v5.0 contentlayer와 마크다운 기반 구조 수정

• 지속적인 과금 부담으로 백엔드서버 삭제
• 마크다운 기반 SSG로 구조 변경

v4.0 App Router 마이그레이션

• Pages Router 기반에서 App Router 기반으로 마이그레이션
• https://byjuun.com/posts/React/app-router-migration-1
• https://byjuun.com/posts/React/app-router-migration-2

v3.7 상태관리 로직 Context, Reducer 기반으로 수정

• 게시글 Form 데이터 상태 관리 로직 : 상위 컴포넌트에서 전체상태를 가지고 props형태로 내리던 게시글 작성,수정 페이지의 게시글 폼 데이터와 관련 로직을 Context, Reducer기반으로 수정 → https://github.com/BY-juun/Blog/blob/production/client/context/writeContext.tsx
• 모달 관련 로직 : 상태와 해당 상태를 수정하는 함수가 나뉘어있던 모달 관련 로직을 Context, Reducer기반으로 수정 → https://github.com/BY-juun/Blog/blob/production/client/context/headerContext.tsx

v3.6 On Demand Revalidation을 이용해 ISR개선

• On Demand Revalidation을 위한 NextJS 서버 내부 API 구성

v3.5 OAuth

• Github OAuth 도입
• KaKao OAuth 도입
• OAuth 도입에 따른 서버와 클라이언트 로직 변경
• OAuth 도입에 따른 사용자 테이블 변경

v3.4 Infinite Scroll 적용

• 메인페이지, 카테고리 페이지 InfiniteScroll적용
• 이전 페이지 스크롤 위치 저장을 위해 sessionStorage활용
• React Query에서 제공하는 useInfiniteQuery활용

v3.3 이미지 최적화

• Intersection Observer를 활용한 이미지 Lazy Loading 적용
• png => webp 적용 (picture, source 태그 활용)
• alias path 적용

v3.2_sub 테스트 코드 적용

• MSW(Mocking Service Worker)를 이용해, 서버와 통신하는 API 모킹
• 클라이언트 모든 컴포넌트에 테스트 코드 작성 및 적용 (rendering test, user interaction test)
• 서버와 통신하는 모든 API에 테스트 코드 작성 및 적용
• pages 폴더에 테스트 파일을 만들 경우, NextJS에서 빌드과정에서 이를 테스트라고 인식하지 못함 -> 페이지 관련 테스트는 util 폴더에 따로 빼놓음

v3.2 Server Migration to Typescript

• 익스프레스 서버 타입스크립트로 마이그레이션 작업 진행
• 각 모듈 타입 추가
• 소스코드에 타이핑을 추가하고, 타입스크립트 설정 추가
• EC2에서 인스턴스 유형으로 t2 Micro를 사용중인데, 해당 인스턴스에는 빌드가 너무 오래걸리고, 느리게 진행된다.
• 현재는, 서버의 코드 양이 그렇게 크지 않기 때문에, 로컬에서 빌드 후 원격저장소(깃헙)에 올린 후, EC2에서는 빌드파일까지 pull 받은 후 pm2를 이용해서 실행한다.

v3.1 서버 구조 개선

• 라우터에서 모든 기능을 처리하는 서버 구조를 Router, Controller, Service 에서 나누어 처리하도록 구조 개선
• API를 위한 코드들을 src 폴더로 이동
• 사용하지 않는 passport strategy 삭제

v3.2에서 변경 할 내용

• 서버 코드 타입스크립트 적용
• passport 기반 로그인을 jwt 또는 session 기반 로그인으로 변경
• sequelize를 이용한 디비 접근을 query 혹은 typeORM을 이용하도록 변경