[React] Deep Dive 모던 리액트(22) Next.js 개발환경 구축

728x90

create-react-app과 create-next-app은 리액트 애플리케이션과 Next.js 애플리케이션을 손쉽게 만들 수 있는 CLI도구이다. 이번에는 직접 프로젝트 파일들을 하나씩 설정해보며 개발환경에 대해 이해해보자.

cra는 2023년 이후 유지보수되지 않을 가능성이 크다고 한다. CRA개발자 팀이 리액트 애플리케이션을 만드는 보일러플레이트가 아닌 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이라고 한다.

create-necxt-app 없이 하나씩 구축해보기

모든 Node.js프로젝트는 package.json을 만드는것으로부터 시작한다.

폴더를 하나 만들고 아래 명령어를 통해서 package.json을 만들어 보자.

npm init

(단순하게 프로젝트 이름만 설정해주고 나머지는 공란으로 두었다.)

해당 명령어를 입력하면 폴더 안에 아래와 같은 package.json파일이 있을 것이다.

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

이어서 Next.js프로젝트를 실행하는데 핵심적인 라이브러리인 react,react-dom,next를 설치하자.

npm i react react-dom next

이어서 devDependencies에 필요한 패키지를 설치하자. typescript, @types/react , @types/react-dom , @type/node 와 ESLint 를 위한 eslint,eslint-confing-next를 설치해주자.

npm i @types/node @types/react @types/react-dom eslint eslint-config-next typescript --save-dev

tsconfing.json 작성하기

필요한 라이브러리를 모두 설치했다! 이제 타입스크립트 코드를 작성하기 위한 준비를 하자. 타입스크립트 설정은 tsconfig.json에 기록한다.

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

우선은 위와같이 JSON 최상단에 $schema를 넣어야한다. 이는 schemaStore에서 제공해주는 정보로 해당 JSON파일이 무엇을 의미하고 어떤 값이 들어갈 수 있는지 알려주는 도구이다. 이게 잘 설정되어 있다면 IDE에서 자동완성이 가능해진다.

이제 아래와 같이 tsconfig.json을 만들어보자.

각 옵션에 대한 설명을 간단하게 주석으로 달아뒀으니 꼭 확인해보자.

{
  "$schema": "https://json.schemastore.org/tsconfig.json",
  "compilerOptions": {
    // 타입스크립트를 JS로 컴파일할때 사용하는 옵션
    "target": "ES5", // TS가 변환을 목표로하는 언어의 버전 (ES5를 사용했기에 화살표함수 -> 일반함수로 변환)
    "lib": ["dom", "dom.iterable", "esnext"], //프로젝트에서 ES5를 목표하면 Promise등 존재를 모른다. 하지만 esnext를 추가함으로 신규기능에 대한 API조회가 가능해진다.
    "allowJs": true, //TS가 JS파일도 컴파일 하게 할건지 결정
    "skipLibCheck": true, //라이브러리에서 제공하는 d.ts에 대한 검사 여부 결정
    "strict": true, //TS컴파일러의 엄격 모드 제어 (alwaysStrict => 모든 파일에 use strict 추가)
    "forceConsistentCasingInFileNames": true, // 파일이름의 대소문자를 구분하도록 강제
    "noEmit": true, //컴파일을 하지않고 타입체크만 함. Next.js는 swc가 컴파일을 하기 떄문
    "esModuleInterop": true, //coommonJS방식의 모듈을 import로 가져올 수 있게 해줌
    "module": "esnext", // 모듈시스템을 설정한다.
    "moduleResolution": "node", // 모듈을 해걱하는 방식을 설정
    "resolveJsonModule": true, //JSON파일을 import할 수 있게 해줌
    "isolatedModules": true, // imoprt나 export가 파일에 없다면 단순 스크립트파일로 인식하여 해당 파일이 안 생성되도록 함
    "jsx": "preserve", // .tsx파일 내부의 JSX를 컴파일하는 방식을 설정한다. preserve는 변환하지않고 그대로 유지하는 방식
    "incremental": true, // 마지막 정보를 .tsbuildinfo파일 형태로 디스크에 저장하여 컴파일을 더 빠르게 수행할 수 있다.
    "baseUrl": "src", // 모듈을 찾을 때 기준이 되는 디렉토리 지정
    "paths": {
      //상대경로가 아닌 절대경로를 사용할 수 있게 해줌
      "#pages/*": ["pages/*"],
      "#hooks/*": ["hooks/*"],
      "#types/*": ["types/*"],
      "#components/*": ["components/*"],
      "#utils/*": ["utils/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], //TS컴파일 대상에서 포함시킬 파일 목록
  "exclude": ["node_modules"] // 타입스크립트 컴파일 대상에서 제외시킬 파일 목록
}

next.config.js 작성하기

이제 Next.js를 설정을 위한 next.config.js를 만들어보자.

next.config.js가 제공하는 설정 파일은 버전별로 조금씩 다르며 본인이 사용하고 있는 next.config.js에서 사용 가능한 옵션을 확인하려면 깃헙 저장소를 방문하여 확인하자

https://github.com/vercel/next.js/blob/v14.1.0/packages/next/src/server/config-shared.ts

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true, //리액트 엄격모드 실행
  poweredByHeader: false, //보안취약점으로 취금되는 X-Powered_By 헤더 제거
  eslint: { 
    ignoreDuringBuilds: true, //빌드시에 ESLint 무시
  },
};

module.exports = nextConfig;

ESLint, Prettier 설정

앞서 eslint,eslint-config-next를 설치했지만 이것만으로는 약간 부족하다. 코드스타일링을 위해 일반적인 ESLint 작업을 위해 아래 라이브러리를 설치해주자.

npm i @titicaca/eslint-config-triple --save-dev

eslint-config-next와 eslint-config-triple이 함께 작동하기 위해 아래와 같이 .eslintrc.js파일을 만들어주자

const path = require("path");

const createConfig = require("@titicaca/eslint-config-triple/create-config");

const { extends: extendConfigs, overrides } = createConfig({
  type: "fronted",
  project: path.resolve(__dirname, "./tsconfig.json"),
});

module.exports = {
  extends: [...extendConfigs, "next/core-web-vitals"],
  overrides,
};

스타일 설정

SCSS , CSS 등등 여러 방법이 있겠찌만 styled-components를 사용해서 스타일을 입혀보자.

npm i styled-components

swc에 styled-components를 사용한다는 것을 알리기 위해 next.config.js에 해당 옵션을 추가해주자.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true, //리액트 엄격모드 실행
  poweredByHeader: false, //보안취약점으로 취금되는 X-Powered_By 헤더 제거
  styledComponent: true,
  eslint: {
    ignoreDuringBuilds: true, //빌드시에 ESLint 무시
  },
};

module.exports = nextConfig;

이제 폴더를 만들어보자. 이번 챕터에서는 각 폴더 구조와 여러 파일들의 역할을 아는게 목적인 만큼 책의 저자가 해당 내용을 제공해주었다.

(이전 챕터 Next.js 예제에서 사용한 코드이다)

https://github.com/wikibook/react-deep-dive-example

GitHub - wikibook/react-deep-dive-example: 《모던 리액트 Deep Dive》 예제 코드

《모던 리액트 Deep Dive》 예제 코드. Contribute to wikibook/react-deep-dive-example development by creating an account on GitHub.

github.com

src파일을 넣었다면 아래와 같이 Next.js 실행,빌드,린트 설정을 package.json에 넣으면 프로젝트를 실행할 수 있는 환경의 준비가 끝난다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "next start",
    "build": "next build",
    "lint:es": "eslint '**/*'.{js,ts,tsx}",
    "lint:es:fix": "npm run lint:es -- --fix",
    "prettier": "prettier '**/*' --check",
    "prettier:fix": "prettier '**/*' --write"
  },

이제 빌드를 한번 해주고 start를 하면 next.js예제가 잘실행된다.

npm run build
npm run start

create-next-app은 편리하고 많은 작업을 대신 해주기 때문에 오히려 전체 프로젝트 구성에 필요한 내용을 놓치는 경우가 생길 수 있다. 이런 next.config.js , tsconfig.json , package.json , .eslintrc 등을 작성해 보는 경험은 매우 중요한 것 같다!

깃허브의 저장소에 보일러플레이트 프로젝트를 만들고 Template repository 옵션을 체크한다면 저장소를 템플릿 저장소로 사용하는것 또한 가능하다.

혹은 이를 cli패키지로 만들어서 create-mingyu-app 과 같은 패키지를 만드는 방법또한 상황에 따라서 고려해볼만 하다.