[모던리액트 딥다이브] 2024-04-01 DIL

모던 리액트 딥다이브 week5

2024-03-27 DIL

주차	DIL 범위	날짜	개인 진도
5주차	9장	2024-04-01	529-542p

9장 모던 리액트 개발 도구로 개발 및 배포환경 구축하기

Next.Js로 리액트 개발 환경 구축하기

프론트앤드 개발자가 직접 만든 애플리케이션을 온전히 이해하려면

• package.json 부터 시작해서 직접 설정해보기.
• 왜 이런 파일이 필요한지,
• 이 파일 내부에 어떤 설정이 필요한지 이해한다.

기본 패키지 설치

1. npm init
2. npm i react react-dom next
3. npm i @types/node @types/react @types/react-dom eslint eslint-donfig-next typescript --save-dev

tsConfig 작성

{
"$schema" : "https://json.schemastore.org/tsconfig.json" 
}

{
    "$schema": "https://json.schemastore.org/tsconfig.json",
    "compilerOptions": {
        "target":"es5",
        "lib":["dom","dom.iterable","esnext"],
        "allowJs":true,
        "skipLibCheck":true,
        "strict": true,
        "forceConsistentCasingInFileNames":true,
        "noEmit": true,
        "esModuleInterop":true,
        "module":"esnext",
        "moduleResoultion":"node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx":"preserve",
        "incremental": true,
        "baseUrl":"src",
        "paths": {
            "#pages/*":["pages/*"],
            "#hooks/*":["hooks/*"],
            "#types/*":["types/*"],
            "#components/*":["components/*"],
            "#utils/*":["utils/*"],
        },
        "styled-components": true,
    },
    "include": ["next-env.d.ts","**/*.ts","**/*.tsx"],
    "exclude": ["node_modules"],
}

에러남..

다양한 옵션들 중 strict 모드는 반드시 켜둘 것.

• strict 모드는 타입을 엄격히 지키는 것을 도와준다.
• 타입스크립트의 타입 시스템을 이해하는 데 많은 도움을 얻을 수 있다.
• Js -> Ts 과도기 과정이 아니라면 켜두도록 하자.

next.config.js 작성하기

next.config.js가 버전 별로 제공하는 설정파일이 다르기 때문에 깃허브 저장소를 방문하여 확인 가능하다.

• reactStrictMode: 리액트의 엄격 모드를 활성화
• powerByHeader: 일반적으로 보완 취약점으로 취급되는 X-powered-By 헤더를 제거한다.
• eslint.ignoreDuringBuilds: 빌드 시에 ESLint를 무시한다. 이후 ESLint는 CI과정에서 별도로 작동하게 만들어 빌드를 더욱 빠르게 만든다.

ESLint와 Prettier설정하기

• eslint-config-next 단순히 코드에 있을 잠재적인 문제를 확인할 뿐
• 띄어쓰기나 줄바꿈 같이 코드의 스타일링을 정의해 주지 않으므로
• 추가적인 설치가 필요하다.
• npm i @titicaca/eslint-config-triple --save-dev

eslint-config-next와 eslint-config-triple이 함께 작동하려면 추가적인 설정이 필요하다.(next.config에 작성)

스타일 설정하기

npm i styled-components

npm i @types/styled-components --save-dev

swc에 styled-components를 사용한다는 것을 알리기 위해 next.config.js에 코드 추가하기

"styled-components": true,