리액트 개발 환경 세팅하기

개발 환경을 구성하는 것은 꾸준한 노력이 필요하다. 개발 생태계가 진화해나가는 방향을 파악하고 필요한 부분을 도입하는 판단이 필요하기 때문이다.

0: 개발 환경 개요

0.1: fnm(fast node manager)

웹 FE 개발은 JavaScript를 중심으로 구성한다. 다양한 런타임 환경이 있지만, Node.js를 기반으로 하는 개발 환경을 구성하는 것이 일반적이다. fnm은 필요에 따라 node.js 버전을 쉽고 빠르게 변경할 수 있도록 도와준다.

OS나 Shell에 따라 설치 방법이 달라지기 때문에 공식 문서를 꼼꼼하게 읽어보고 사용법은 usage 문서를 참고한다.

0.2: TypeScript

JavaScript를 확장하여 타입 시스템을 강화한 언어로, 트랜스파일링을 통해 JavaScript로 변환된다. TypeScript는 앱의 복잡도가 증가할수록 높아지는 타입 오류의 위험을 줄여준다. 오류도 상대적으로 구체적인 메시지를 제공하므로 디버깅이 쉽다.

실질적으로 텍스트 에디터에서 제공하는 실시간 오류 검사와 자동 완성 기능으로 개발 생산성을 향상시킨다.

TypeScript 참고자료

0.3: ESLint

코드 작성에 도움이 되는 가이드를 제공한다. 코드 스타일을 정의하는 규칙을 기반으로 검사를 수행하고, 다양한 플러그인을 통해 규칙을 확장할 수 있다.

0.4: React

react는 UI를 만들기 위한 라이브러리로, 웹앱으로 빌드하기 위해서 react-dom 패키지를 같이 사용한다. 대부분의 렌더링 작업을 JSX를 통해 추상화하기 때문에 개발자가 DOM 조작보다는 UI를 구성하는 컴포넌트 작성에 집중할 수 있다.

React 참고자료

0.5 Jest

코드 품질을 유지하기 위한 유닛 테스트를 실행하기 위한 라이브러리로, 테스트 작성에 도움이 되는 기능을 제공하는 react testing library와 함께 사용하는 것을 권장한다. @swc/jest 적용으로 성능을 크게 향상시킬 수 있다.

최근 vitest 등장으로 경쟁 구도를 형성했다. 설정이 간편하다는 점에서 vitest를 사용하는 것도 좋은 방법이다.

Testing 참고자료

0.6: Parcel

웹 앱을 구동하기 위한 js 파일을 최적화하는 작업 담당하는 도구로 설정이 간편하고 빠른 속도를 제공할수록 좋다. parcel은 소규모 프로젝트에 적합하다.

기존에는 webpack이 시장을 장악했었지만 최근에는 vite, turbopack(next.js)이 인기를 얻고있다.

Parcel 사용할 때 권장하는 설정은 두가지다.

package.json 파일에 다음과 같이 source를 지정한다.

"source": "./index.html",

parcel-reporter-static-files-copy 패키지를 설치하고 .parcelrc 파일을 작성한다.

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

빌드 명령어와 정적 서버 실행은 다음과 같다.

servor?

npx parcel build

npx servor ./dist

1: 레시피

1.0: fnm 및 node.js 설치

1.0.1: 자동 설치 스크립트를 실행

curl -fsSL https://fnm.vercel.app/install | bash

1.0.2: 쉘 셋업하기

지원범위: bash, zsh, fish, powershell

fnm completions --shell <SHELL>

1.0.3: 쉘 프로파일 추가

지원하는 쉘의 명령어 찾아서 실행

1.0.4: node.js 설치

fnm install --lts
fnm use lts-latest
fnm default $(fnm current)

1.1: 프로젝트 폴더 생성

mkdir my-app

cd my-app

1.2: npm 패키지 초기화

npm init -y

1.3: .gitignore 파일 작성

최소한 node_modules 폴더 커밋을 방지하되, 필요한 파일이나 경로를 추가한다.

gitignore.io 서비스를 활용하는 것도 추천한다.

touch .gitignore

### Node ###

# Logs
logs
*.log
npm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Coverage directory used by tools like istanbul
coverage

# Dependency directories
node_modules/

# TypeScript cache
*.tsbuildinfo

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# build output
dist

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

1.4: TypeScript 설정

npm i -D typescript

npx tsc --init

상황에 맞게 설정하는 것을 권장하며, 최소한 jsx 속성은 필수적으로 활성화한다.

{
  "compilerOptions": {
    "jsx": "react-jsx",
  }
}

1.5: ESLint 설정

npm i -D eslint

npx eslint --init

아직 설치하지 않았지만 미리 jest:true 설정을 잡아두면 편하다.

// .eslintrc.js 예시

env: {
  ...
  jest: true,
},

eslintignore 파일을 작성하고 필요한 경로를 추가한다. 보통 gitignore 파일과 동일한 경로를 추가한다.

touch .eslintignore

### .eslintignore 예시 ###

/node_modules/
/dist/
/.parcel-cache/

1.6: React 설치

npm i react react-dom

npm i -D @types/react @types/react-dom

1.7: 테스트 도구 설치

npm i -D jest @types/jest @swc/core @swc/jest \
    jest-environment-jsdom \
    @testing-library/react @testing-library/jest-dom

더 빠른 테스트 실행을 위해 swc 설정을, 다양한 매쳐 사용을 위해 TypeScript, Jest 설정을 추가한다.

tsconfig.json 파일의 types 속성에 다음과 같이 추가한다.

{
  "types": ["node", "jest", "@testing-library/jest-dom"],
}

touch jest.setup.js

// jest.setup.js 예시

import '@testing-library/jest-dom';

// jest.config.js 예시

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: [
    '<rootDir>/jest.setup.js',
  ],
  transform: {
    '^.+\\.(t|j)sx?$': ['@swc/jest', {
      jsc: {
        parser: {
          syntax: 'typescript',
          jsx: true,
          decorators: true,
        },
        transform: {
          react: {
            runtime: 'automatic',
          },
        },
      },
    }],
  },
  testPathIgnorePatterns: [
    '<rootDir>/node_modules/',
    '<rootDir>/dist/',
  ],
};

1.8: Parcel 설치

npm i -D parcel

이미지를 비롯한 정적 파일을 처리하기 위해 패키지를 설치한다.

npm install -D parcel-reporter-static-files-copy

설치한 패키지를 사용하기 위해 .parcelrc 파일을 작성한다.

touch .parcelrc

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

빌드 오류를 피하기 위해 폴더를 생성해준다.

mkdir static

1.9: 패키지 스크립트 수정

package.json 예시 파일을 참고하여 웹프로젝트의 엔트리 파일을 정의하기 위한 source 속성을 추가하고, 필요한 스크립트를 추가한다.

{
  ...
  "source": "./index.html",
  "scripts": {
    "start": "parcel --port 8080",
    "build": "parcel build",
    "check": "tsc --noEmit",
    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx .",
    "test": "jest",
    "coverage": "jest --coverage --coverage-reporters html",
    "watch:test": "jest --watchAll"
  }
  ...
}

1.10: 기본 코드 작성

index.html

touch index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Demo App</title>
  </head>
  <body>
    <p>Hello, React!</p>
  </body>
</html>

src/main.tsx

mkdir src
touch src/main.tsx

import ReactDOM from 'react-dom/client';

const element = document.getElementById('root');

if (element) {
  const root = ReactDOM.createRoot(element);
  root.render(<p>Place for App Component</p>);
}

...
<body>
  <div id="root"></div>
  <script type="module" src="./src/main.tsx"></script>
</body>
...

src/App.tsx

touch src/App.tsx

import React from 'react';

function App() {
  return (
    <div>App Component</div>
  );
}

export default App;

Appendix: VSCode 설정

JS/TS 파일을 저장할 때마다 ESLint 실행 후 문제점을 고치도록 수정하기

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

설정 예시

{
    "editor.rulers": [
        80
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "trailing-spaces.trimOnSave": true
}

PreviousEcosystem: React Next리액트로 작업하기

Last updated 2 years ago