개인 포트폴리오 사이트 개발

그 동안 미뤄왔던 개인 포트폴리오 웹사이트 개발을 시작하려고 한다.

■ 적용하고 싶은 내용들

• React18 : 얼마전에 React18 버전이 출시되어서 Suspense 등 신규 기능 테스트를 위하여 적용해 보려고 한다.
  react18
• Redux-Toolkit : Redux를 편리하게 Tool로 제공한다고 하여 적용해 보려고 한다.
  redux-Toolkit1
  redux-Toolkit2
• TypeScript : TypeScript 숙달을 위하여 적용하려고 한다.
  TypeScript
  기존 CRA 프로젝트에서 TypeScript 추가
• Next.js : SSR을 구현을 위하여 적용해 보려고 한다.

1-1. CRA TypeScript 신규 프로젝트 생성

1. npx create-react-app my-app --template typescript

1-2. 기존 CRA TypeScript 추가

1. npm install --save typescript @types/node @types/react @types/react-dom @types/jest
2. typescript file add
   1) tsconfig.json 파일 추가
   2) react-app-env.d.ts 파일 추가
3. 파일명 수정
   1) jsx로 구성된 파일 : .tsx
   2) 그 이외 파일 : .ts
   3) 일부 js 로직만 사용되는 파일 : *.js 유지
4. typescript lodash install npm install @types/lodash

1-3. Eslint & Prettier 설치

Koras02코딩웹님 참조1
hyunjin.log님 참조2
찬영님 블로그 참조3