https://www.themoviedb.orgTMDB 사이트에 들어가서 로그인을 한 후 프로필 -> 설정 -> API로 들어간다.API 키 요청 링크를 클릭하고 Developer / Professional에서 Developer를 선택한다. 개인정보를 입력하고
헤더 부분에는 홈화면으로 가는 링크, Popular, Top Rated, Upcoming 페이지로 가는 링크, 그리고 검색창으로 구성한다. styled-components를 사용해 스타일링을 했다. Link 태그를 사용할 때는 styled.Link가 아니라 styled
영화 목록 페이지는 모듈화한 API와 React Query의 useInfiniteQuery, react-infinite-scroller 라이브러리를 사용해서 무한스크롤로 영화 목록을 구성한다.Popular, Top Rated, Upcoming 각각 호출하는 API만 다
form 태그와 useState를 사용해 입력을 받아서 검색어를 검색페이지로 useNavigate()를 사용해 검색 페이지로 보낸다. 그리고 반응형으로 브라우저 크기에 맞게 검색창 크기를 조절한다.다른 영화 목록 페이지처럼 useInfiniteQuery와 Infinit
https://www.netlify.comNetlify에 접속해서 우측 상단의 Sign up 버튼을 눌러서 회원가입을 한다.나는 GitHub 계정으로 가입했다.Sites 메뉴에 Add new site 버튼을 클릭한다.Import an existing proje
회원가입과 로그인 기능을 구현하기 위해 Express와 MongoDB를 사용한다.회원가입 기능에 필요한 유저 모델 스키마를 만들어준다.클라이언트에서 아이디, 비밀번호, 이름을 받아와서 새 모델을 만들어 MongoDB에 저장한다.이때 bcrypt의 genSalt, has
댓글에 필요한 댓글 모델 스키마를 만든다.서버에 영화 아이디를 body로 넘겨주어서 댓글 리스트를 찾고 repleList에 복사한다.클라이언트에서 영화 아이디를 넘겨받아 db에서 해당 아이디에 등록된 댓글을 찾는다.먼저 로그인을 한 상태인지 검사를 하고 확인이 되면 댓
CORS란 Corss-Origin Resource Sharing의 줄임말로 교차 출처 리서스 공유라고 해석된다. 교차 출처는 다른 출처라는 뜻인데 출처란 URL 내의 Protocol과 Host, Port번호까지 합친 것이다.즉, Protocol과 Host, Port번호