728x90 프로젝트 기록10 [CINEMATE] Next.js 프로젝트 리팩토링하기 (feat. 영화 추천 서비스) (token, EC2, PM2, Axios Interceptors, SSR, React-Query useInfiniteQuery) 프로젝트(Github) 👉 https://github.com/MovieApplication/cinemate사용 기술 👉 React + TypeScript + Next.js + SASS주소 👉 http://3.34.139.203/ CINEMATE라는 프로젝트는회사에서 Next.js와 TypeScript를 좀 써보고개인 프로젝트에 적용하면 좋을 것 같아서 진행한 프로젝트이다. 부족한 실력으로 기능 하나하나를 구현하다 보니 다양한 에러를 만났고,그 에러를 해결하기 위해 열심히 찾아보고 공부하니 실력이 늘었던 것 같다. 아직도 매우 빈틈이 많고 부족한 코드이기 때문에프로젝트를 끝내고 한 달 동안 (조금) 늘은 실력으로 리팩토링 작업을 시작해보고자 한다. 목차로그인 토큰 정보 저장 방식 변경 (Web St.. 2023. 7. 28. [No-Cap News] 방치된 프로젝트 리팩토링하기 (feat. React) 프로젝트(Github) : https://github.com/dygreen/nocap-news사용 기술 : React + Redux(RTK) + Styled-components주소 : https://nocap-news.vercel.app/ 거의 1년 정도 실무 경험을 해보니, 그 전에 진행했던 프로젝트들의 부족함이 많이 보이기 시작했다.완벽한 코드는 없으니 (더군다나 내가 작성한 코드이기 때문에..!) 지속적으로 리팩토링이 필요하다고 생각한다. 다양한 프로젝트들 중에서, 취준 기간에 가장 공들였던 프로젝트이기도 하고일단 보여지는 화면부터가 수정이 간절히 필요했던 뉴스앱 서비스 No Cap News부터 손보기로 했다. 이번 글에서는 어떤 부분을 리팩토링하였고, 리팩토링 하는 과정에서 배운점들을 기록해보고자.. 2023. 7. 2. [React] 카카오 로그인/로그아웃 프론트에서 다 하기 (+ 서비스 회원가입/로그인/로그아웃 포함) Front : React + Next.js + TypeScript Back : Spring 카카오 로그인 적용 이유? : (진행하고 있는 영화 커뮤니케이션 프로젝트에서) 등록된 리뷰들은 로그인 없이도 볼 수 있게 하고, 리뷰 등록/수정/삭제는 로그인을 해야만 가능하도록 하기 위해 카카오 로그인을 적용하고자 했다. 먼저 카카오 로그인을 적용했을 때의 과정은 다음과 같다. (REST API 활용) [ 카카오 ] 카카오 로그인 요청 → 인가 코드 받기 → 카카오 로그인 토큰 발급 → 토큰으로 카카오 유저 정보 받기 → [ 개인 서비스 ] 개인 서비스 내에서 유저 조회 → 기존 유저일 경우: 로그인 진행 / 신규 유저일 경우: 유저 등록(회원가입) 후 로그인 진행 [ 카카오 및 개인 서비스 로그아웃 ] 카카오 .. 2023. 5. 28. [Next.js] router.query 사용 시 초기 렌더링 값 설정하기 (새로고침 오류 해결) 먼저 프로젝트에서... 영화 포스터를 클릭하면 해당 영화의 id 값(movieId)으로 세부 정보 api를 조회(+해당 영화와 유사한 영화 목록 조회, 해당 영화 리뷰 조회 등)하여 Dynamic Router(동적 라우팅)을 구현하였다. 그런데 문제는 영화 상세 정보 페이지(/detail/[movieId])에서 새로고침을 하면 movieId가 리셋되어 영화 세부 정보 조회 api 등이 호출되지 않는 문제가 발생했다. 해당 문제가 발생한 코드는 다음과 같다. import {useRouter} from "next/router" const MovieDetail = () => { const router = useRouter() const movieId = router.query.movieId as string .. 2023. 5. 26. 이전 1 2 3 다음 728x90
