밍의 개발로그

세션 기반 로그인과 토큰 기반 로그인(JWT) 차이세션 기반사용자가 로그인 요청서버가 아이디/비밀번호 확인서버가 세션 생성서버가 세션 ID를 브라우저에 쿠키로 전달이후 요청마다 브라우저는 쿠키의 세션 ID 전송서버는 세션 저장소를 조회해서 로그인 여부 확인토큰 기반(JWT)사용자가 로그인 요청서버가 아이디/비밀번호 확인서버가 JWT 발급클라이언트가 JWT 저장이후 요청마다 Authorization: Bearer 형태로 전송서버는 JWT 서명, 만료시간 등을 검사해서 인증 JWT( JSON Web Token )란? JWT: 사용자 정보와 만료시간 같은 내용을 담고, 위조되지 않았는지 검증할 수 있게 만든 문자열 토큰 로그인 후에는 서버가 매 요청마다 요청 보낸 사람이 누구인지를 확인해야 한다.예전엔 ..

GitHub ActionsGitHub 안에서 돌아가는 자동화 도구GitHub에서 제공하는 CI/CD 도구로, 코드 변경 사항을 자동으로 테스트하고 배포할 수 있게 해준다원래 수동이면:코드 push내가 직접 빌드내가 직접 테스트내가 직접 docker build내가 직접 서버 접속내가 직접 배포GitHub Actions 쓰면:코드 pushGitHub가 알아서 빌드/테스트/배포 OIDC ( Open ID Connect )비밀번호나 AWS 키를 GitHub에 저장해두지 않고도, GitHub Actions가 자기 신원을 AWS에 증명해서 잠깐만 쓸 수 있는 임시 권한을 받게 해주는 방식OAuth 2.0은 원래 권한 위임에 더 가깝고 ( 비밀번호를 직접 주지 않고, 다른 앱에게 제한된 권한만 맡기는 방식 )OI..

- 트러블슈팅문제코드를 수정했는데 Postman에서 수정 내용이 안 보였고, 실행할 때 포트 충돌도 자꾸 발생했다.원인로컬 IntelliJ의 Spring Boot와 Docker 컨테이너의 Spring Boot를 둘 다 실행하고 있었기 때문이다.즉, 같은 앱이 두 군데서 떠 있었고 둘 다 8080 포트를 쓰려 해서 충돌이 났다.또 Postman이 내가 수정한 로컬 앱이 아니라 Docker 앱을 보고 있어서, 코드 변경이 반영되지 않는 것처럼 보였다.해결Spring Boot는 한 군데에서만 실행하고, DB만 Docker로 실행하도록 정리했다.즉,Spring Boot: IntelliJMySQL: DockerPostman: localhost:8080배운 점코드를 수정했는데 반영이 안 보이면, 먼저 어느 서버가 ..

도커를 쓰는 이유는 프로그램마다 필요한 실행 환경을 직접 깔고 맞추는 번거로움을 줄이고, 어느 컴퓨터에서든 비슷한 환경에서 쉽게 실행하기 위해서이다. Docker란 무엇인가컨테이너를 활용하여 소프트웨어를 배포 및 구동하기 위한 오픈 소스 플랫폼( 소스코드가 공개되어 있어서 누구나 확인·수정·배포할 수 있고, 다른 프로그램이나 서비스가 그 위에서 동작하거나 연동될 수 있도록 기반 역할을 하는 시스템 )컨테이너 : 애플리케이션과 그 실행에 필요한 모든 파일과 설정을 포함하는 독립적인 실행 환경이미지 : 컨테이너를 생성하기 위한 읽기 전용 템플릿, 애플리케이션 코드, 런타임, 라이브러리, 도구 등Dockerfile : 이미지를 빌드하기 위한 지침이 포함된 텍스트 파일Docker Hub : Docker 이미지..

왜 spring boot를 써야하는가?-> Spring Boot는 “웹 서비스나 서버 프로그램을 훨씬 쉽게 만들게 해주는 도구”라서, 자바만으로 서버를 만들면 너무 귀찮고 복잡하니까 Spring Boot를 쓰는 것!스프링부트는서버를 쉽게 띄워줌REST API 만들기 쉬움DB 연결 쉽게 해줌객체를 JSON으로 바꿔줌설정 파일로 관리 가능에러 처리 구조도 잘 잡혀 있음그래서 개발자가 “게시글 저장”, “회원가입”, “조회” 같은 진짜 기능 구현에 더 집중할 수 있다. - API, 왜 필요한가요?API (Application Programming Interface) : 웹 서비스에서 데이터를 주고받기 위한 규칙 HTTP (hypertext transfer protocol) : 웹 브라우저와 서버가 하이퍼텍스트..

지난 시간에 클론코딩 해본 것에 검색 기능+홈화면으로 돌아오기 기능을 추가로 구현해본 것에 디벨롭하여 영화 대여 온라인몰을 구현해보기로 했다. ✅ 구현해볼 것장르별로 모아보기영화 상세 페이지찜(하트) 추가MyBox에서 모아보기대여하기 추가 1. 장르별로 모아보기드롭다운을 통해 장르별로 영화를 모아볼 수 있도록함사용 기능HTML 기본 드롭다운 UI 구성genreMap.js에 장르별 아이디 구분usestate로 영화 장르 상태값 관리filter()로 영화 장르 기준으로 필터링const handleGenreChange = (e) => { const genreId = e.target.value; setSelectedGenre(genreId); if (genreId === '') { setFilt..

https://www.youtube.com/watch?v=qN6Svts61qs&t=13s 유튜브의React 기본개념(Component, JSX, Props) 활용 예제 - 영화 앱 만들기를 통해 클론코딩을 해보았다TMDB API TMDB (The Movie Database) 에서 제공하는 "현재 한국에서 상영 중인 영화 목록" 을 가져오는 API를 활용했다. API에서 가져온 실제 Response 데이터를 dummy.js 파일로 만들어서 저장했다. // movieDummy.jsexport const dummy = { dates: { maximum: "2022-06-29", minimum: "2022-05-12" }, page: 1, results: [ { id: 507086, ..

섹션 14. 웹 프로젝트 시작하기-린캔버스(Lean Canvas)란?스타트업과 같은 신생 기업이 비즈니스 모델을 빠르게 정리하고 검증할 수 있도록 도와주는 비즈니스 모델 프레임워크린캔버스는 복잡한 사업 계획을 간단하게 정리할 수 있는 1페이지 짜리 도구로, 9개의 핵심 요소로 구성됨문제(Problem): 고객이 겪는 주요 문제들을 명확하게 정의고객 세그먼트(Customer Segments): 타겟 고객층을 구체적으로 식별독특한 가치 제안(Unique Value Proposition): 고객에게 제공할 핵심 가치해결책(Solution): 문제를 해결할 수 있는 구체적인 솔루션채널(Channels): 고객에게 도달할 수 있는 경로수익 모델(Revenue Streams): 수익을 창출하는 방식비용 구조(Cos..

섹션 7. State 고급스킬-객체 State 업데이트하기리액트 state가 가진 기존의 객체를 직접 변경하면 안됨 객체를 업데이트 하고 싶을 때는 새로운 객체 생성하여 state가 복사본을 사용하도록 해야 함여러 필드에 단일 이벤트 핸들러 사용하기 const handleTitleChange = (e) => { setForm({ ...form, title: e.target.value }) } const handleDescriptionChange = (e) => { setForm({ ...form, description: e.target.value }) } 에서const handleChange = (e) => { console.log('e.target.name: ..

섹션 2. 프로젝트 이해하기-프로젝트 생성Create React App(CRA) 이용npx create-react-app cra-react-appVite 이용npm create vite@latestcd vite-react-app npm i npm run dev →차이점 : CRA로 만든 프로젝트는 Webpack 기반으로 빌드 진행, Vite는 비트 기반으로 진행, 그러나 React문법은 어떤 방법으로 진행하든 동일 -React 프로젝트 구조public과 asset의 차이점 정리구분 public/ src/assets/ 접근 방식절대 경로 (/) 사용import 필요빌드 시파일 변경 없음Webpack이 최적화 및 해시 추가사용 예시favicon, meta 이미지, SEO용 파일컴포넌트 내부에서 쓰는 이..