react-disney-app 회고록

typescript도 공부했고, state 관리 라이브러리들도 공부 했고 이를 활용한 프로젝트를 하나 하고자 생각하여 TMDB API를 사용하여 디즈니 플러스 클로닝 애플리케이션을 제작 하였다. 프로젝트는 여기로 접속 가능하다. ReactTypescriptNext.j

백앤드 서버 없이 간단하게 로그인을 구현 하고 싶어 firebase를 사용하였다. 다양한 로그인 방식을 지원 하는데 그 중에서 구글 로그인 방식을 사용하였다. firebase 콘솔 설정 방법과 코드 적용 방법에 대해서 이야기 하겠다. 프로젝트 추가 클릭프로젝트 이름

RTK 와 RTK-query 관련 일화는 더 많지만 뒤에 SSR 포스트와 더 연관 있어서, 일단 이번 포스트에서는 찾아봤었던 사용법 몇 가지와 발생했던 에러 해결에 대해 이야기 하겠다.전체 코드는 여기를 확인하길 바란다.영화 데이터를 가져오기 위해서 header에

npx create-next-app 으로 프로젝트를 세팅을 시작하는데, 터미널 창에서 이런 물음이 나왔다.Use App Router (recommended)? No / YesApp Router가 무엇인가에 대해 찾아보니, Next13부터는 기존의 page 디렉토리 기

검색 기능 구현에 있어서 디바운싱(debouncing) 이라는 개념을 적용하였다. 연이어 호출 되는 함수들 중 마지막 함수만 호출 하도록 하는 것으로 주로 ajax 검색에 사용 된다.검색 창에 검색어를 입력 시 바로 결과를 보여주려면 검색 창 input에 onCha

이번 프로젝트에서 가장 이슈가 많았던 부분이다. 왜 SSR(ServerSideRendering)을 적용해야 했고, 그 과정에서 어떤 어려움이 있었는지, 이야기 하겠다.처음부터 SSR을 바로 적용하지 않았고, 프로젝트가 어느 정도 구현되고 나서, 필요하다 싶어 적용

npm run build 를 실행하니, 타입스크립트 관련한 에러가 발생하였다. 기본적으로 tslint가 설정 되어있어 빨간줄로 표시가 되어 에러 발생 지점을 찾는 것은 어렵지 않았다. main 페이지 장르별 영화의 데이터를 받아오는 api 설정에서 RTK-query

처음에는 배포하는 방식으로 github action을 사용해서 AWS S3에 배포 자동화를 실현하고자 하였다. 하지만 S3는 정적 웹 사이트 배포만 가능 하고, serverside rendering 이 포함된 사이트는 배포 할 수 없었다. (😢 열심히 방법 찾아