TypeScript 사용
ESLint 사용
Tailwind CSS 사용
`src/` directory 사용
App Router 사용

globals.css 초기화(Tailwind css 세팅만 남김)
page.tsx 초기화
MetaData 작성
필요없는 파일 제거
yarn 설치

폴더 네이밍
패키지 구조 설계

이미지, 폰트, lottie 애니메이션 복사

lotties.ts
stacks.ts
useDidMountEffect.ts

yarn add prettier -d
package.json script 등록
yarn format:fix 실행

yarn add eslint-config-airbnb -d
yarn add eslint-config-airbnb-typescript
            @typescript-eslint/eslint-plugin@^6.0.0
            @typescript-eslint/parser@^6.0.0 -d
yarn add eslint-config-prettier -d
.eslint.json extends 추가
"react/react-in-jsx-scope": "off"
useDidMountEffect.ts 파일 react-hooks/exhaustive-deps 규칙 비활성화

yarn add recoil
recoil 세팅용 recoilRootProvider 파일 생성
최상위 Layout.tsx child recoilRootProvider 포장

Fe/#204 NextJS 세팅

tsconfig include에 설정파일 추가

yarn add yup react-hook-form @hookform/resolvers

img 태그 => 'next/image'의 Image 컴포넌트로 변경
useNavigate=> useRouter
axios => fetch
alert => Error 객체로
공식문서 Error.js 코드 가져와서 넣음
eslint import/no-extraneous-dependencies off

13.5.1=>13.5.3

Eslint 의존성 배열 강제 규칙 제거(의도대로 동작 안함)
img태그 => 'next/image'의 image 컴포넌트로 변경
useNavigate => useRouter
axios => fetch
alert => Error 객체
Error.js에 공식문서 기본 코드 삽입

useRecoilState => useRecoilValue

- Swiper 컴포넌트에서 사용하지 않는 리스너 함수 제거
- Swiper 컴포넌트에 Autoplay 기능 추가

Fe/#214 로그인 페이지 마이그레이션

Fe/#218 회원가입 페이지 마이그레이션

- API 호출 방식 변경 : axios -> fetch
- useNavigate -> useRouter
- react-query 사용을 위한 queryProvider 컴포넌트 생성

yarn add react-aws-s3-typescript
s3 환경변수 추가
s3config.ts 파일 추가
imageUploader 컴포넌트 마이그레이션

yarn add react-quill highlight.js
quillEditor 마이그레이션

- img 태그 일부 'next/image'의 Image 컴포넌트로 변경
- API 호출 쿼리 파라미터 부분 수정

- recoilRootProvider, queryProvider 컴포넌트 -> Provider 컴포넌트 하나로 합치기
- react-router-dom 라이브러리 삭제

- yarn format:fix 실행

FE/#215 메인 페이지, ProjectCard 마이그레이션

- api 호출 방식 변경 axios → fetch
- useNavigate → useRouter
- react-router-dom의 URL 파라미터 라우팅 방식 → Next.js dynamic routing 방식
- useParams → Next.js dynamic routing
- img 태그 → 'next/image’의 Image 태그로 변경

feat : 유저 검색 페이지 마이그레이션

- api 호출 방식 변경 axios → fetch
- useNavigate → useRouter
- react-router-dom의 URL 파라미터 라우팅 방식 → Next.js dynamic routing 방식
- useParams → Next.js dynamic routing

- projectName -> postName 변수명 변경
- export default SearchProjectPage -> export default function SearchProjectPage로 변경

글쓰기 페이지 마이그레이션
Quill에디터 dynamic import

FE/#231 프로젝트 검색 페이지 마이그레이션

yarn add @aws-sdk/client-s3 short-uuid
S3 업로드 용 API 구현
ENV 변경

기존 클라이언트 사이드 에서 업로드 => 서버사이드 업로드 및 API 호출로 이미지 주소 콜백
이미지 최적화 용 next.config image remotePatterns 설정
크기를 모르는 이미지를 위해 fill속성 추가
Largest Contentful Paint (LCP) 요소를 위한 priority 속성 추가

- API 호출 방식 변경 : axiox -> fetch

yarn add @toast-ui/react-editor @toast-ui/editor-plugin-color-syntax @toast-ui/editor-plugin-code-syntax-highlight prismjs @types/prismjs
마크다운 편집 밑 HTML로 백에 전송
Quill-Editor 삭제

Fe/#223 WritingPage 및 ImageUploader, TechStackSelection, QuillEditor 컴포넌트 마이그레이션

Fe/#263 글 수정 페이지 마이그레이션

Layout.tsx를 Wrapping하는 방식으로 구현
PathName으로 예외처리 및 useEffect 의존성 배열 변수 할당

feat : NavBar 마이그레이션

res 체크 순서 수정
코드 가독성을 위한 URLSearchParams 객체 선언

- react quill -> toast ui 라이브러리 변경
- QuillWritten -> ToastViewer 이름 변경

팔로워, 팔로잉, 좋아요 누른 사람 모달 하나로 한번에 관리

쓴 글 목록 컴포넌트 화

fetch로 데이터 가져와 Map 함수로 WritedPost에 데이터 집어넘

Fe/#243 ReadingPage 및 GptModal, Reply, QuillWritten, ReadReply, ReadReReply, WritingReReply, PutReReply 컴포넌트 마이그레이션

Fe/#268 MyPage 마이그레이션 및 기능 구현