1. 개발환경

🚀 React + TypeScript + Lint + Parcel

1. FNM

fnm 설치

brew install fnm

환경 변수 추가

# ~/.zshrc
eval "$(fnm env --use-on-cd)"

FNM 기본 명령어

버전 확인

fnm --version

설치 가능 버전 리스트 확인

fnm list-remote

버전 설치

fnm install --lts (Long Term Support)
fnm install <version>

설치한 버전 사용

fnm use lts-latest
fnm use <version>

특정 버전 기본으로 사용

fnm default $(fnm current)
fnm default <version>

이후 Parcel 설치 과정의 이슈로 인해 v18.15.0 사용 (원인 불명)

프로젝트 안으로 진입했을 때 node version 변경하기

프로젝트 폴더의 루트로 들어가 .node-version 파일 생성

node --version > .node-version

2. npm 패키지 준비

# npm 전역 설치 및 업그레이드
npm install -g npm
npm install -g npm@latest

# 프로젝트 내부에서 npm 초기화
npm init -y

2. 타입스크립트 설정

여기서 -D 옵션을 사용하여, 타입스트립트를 프로덕션 환경에는 설치되지 않도록 한다. 타입스크립트는 코딩을 위한 도구로 설정한다.

npm i -D typescript
npx tsc --init

3. ESLint 설정

npm i -D eslint
npx eslint --init

npx eslint --init

@eslint/create-config@0.4.6
- Ok to proceed? (y) y

How would you like to use ESLint? …
- To check syntax, find problems, and enforce code style

What type of modules does your project use? …
- JavaScript modules (import/export)

Which framework does your project use? …
- React

Does your project use TypeScript?
- Yes

Where does your code run?
- Browser

How would you like to define a style for your project? …
- Use a popular style guide

Which style guide do you want to follow? …
- XO: https://github.com/xojs/eslint-config-xo-typescript

What format do you want your config file to be in? …
- JavaScript

eslint-plugin-react@latest eslint-config-xo@latest ...
? Would you like to install them now? › No / Yes
- Yes

Which package manager do you want to use? …
- npm

4. React 설치

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

5. 테스팅 도구 설치(Jest)

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

6. Parcel 설치

npm i -D parcel

Parcel 이란?
모듈 번들러. Webpack 과 함께 bundler 시장의 점유율을 나눠갖고 있다. 번들러란 dependency가 있는 자바스크립트 파일을 최적화/압축하여 하나 혹은 여러개의 static 파일로 빌드해주는 컴파일러이다. Webpack 을 사용하는 것보다 장점이 있다고 한다.

7. parcel-reporter-static-files-copy 설치

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

# Root path 에 static 폴더를 만든다. 정적 이미지 등을 해당 폴더에 넣는다.
mkdir static

ETC

.gitignore 파일 생성

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

gitignore.io 바로가기

tsconfig.json 수정

...
"jsx": "react-jsx",

.eslintrc.js 수정

env: {
  browser: true,
  es2021: true,
  jest: true,  # 추가. Jest를 설치한 경우
},
extends: [
  'xo',
  'plugin:react/recommended',
  'plugin:react/jsx-runtime',  # 추가
],

prettier 와 충돌 방지

npm install --save-dev eslint-config-prettier

// .eslintrc.js 파일 수정 - prettier 추가
extends: ['xo-typescript', 'prettier'],

vscode 껐다 켜기

.eslintignore 파일 생성

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

.parcelrc 생성

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

.vscode 폴더 생성 -> settings.json 파일 생성

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

index.html 생성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Demo App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/main.tsx"></script>
  </body>
</html>

App.tsx 생성 (src 폴더 생성 후)

export default function App() {
  return <p>Hello, world!</p>;
}

main.ts 파일 (src 폴더 생성 후)

import ReactDOM from 'react-dom/client';

import App from './App';

function main() {
  const element = document.getElementById('root');

  if (!element) {
    return;
  }

  const root = ReactDOM.createRoot(element);

  root.render(<App />);
}

main();

package.json 파일 수정

"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"
  },

빌드 + 정적 서버 실행

빌드

npx parcel build

정적 서버 실행

npx servor ./dist

PreviousWEEK1 Next2. 타입스크립트 기초

Last updated 1 year ago

1. 개발환경

🚀 React + TypeScript + Lint + Parcel

1. FNM

fnm 설치

brew install fnm

환경 변수 추가

# ~/.zshrc
eval "$(fnm env --use-on-cd)"

FNM 기본 명령어

버전 확인

fnm --version

설치 가능 버전 리스트 확인

fnm list-remote

버전 설치

fnm install --lts (Long Term Support)
fnm install <version>

설치한 버전 사용

fnm use lts-latest
fnm use <version>

특정 버전 기본으로 사용

fnm default $(fnm current)
fnm default <version>

이후 Parcel 설치 과정의 이슈로 인해 v18.15.0 사용 (원인 불명)

프로젝트 안으로 진입했을 때 node version 변경하기

프로젝트 폴더의 루트로 들어가 .node-version 파일 생성

node --version > .node-version

2. npm 패키지 준비

# npm 전역 설치 및 업그레이드
npm install -g npm
npm install -g npm@latest

# 프로젝트 내부에서 npm 초기화
npm init -y

2. 타입스크립트 설정

여기서 -D 옵션을 사용하여, 타입스트립트를 프로덕션 환경에는 설치되지 않도록 한다. 타입스크립트는 코딩을 위한 도구로 설정한다.

npm i -D typescript
npx tsc --init

3. ESLint 설정

npm i -D eslint
npx eslint --init

npx eslint --init

@eslint/create-config@0.4.6
- Ok to proceed? (y) y

How would you like to use ESLint? …
- To check syntax, find problems, and enforce code style

What type of modules does your project use? …
- JavaScript modules (import/export)

Which framework does your project use? …
- React

Does your project use TypeScript?
- Yes

Where does your code run?
- Browser

How would you like to define a style for your project? …
- Use a popular style guide

Which style guide do you want to follow? …
- XO: https://github.com/xojs/eslint-config-xo-typescript

What format do you want your config file to be in? …
- JavaScript

eslint-plugin-react@latest eslint-config-xo@latest ...
? Would you like to install them now? › No / Yes
- Yes

Which package manager do you want to use? …
- npm

4. React 설치

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

5. 테스팅 도구 설치(Jest)

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

6. Parcel 설치

npm i -D parcel

Parcel 이란?
모듈 번들러. Webpack 과 함께 bundler 시장의 점유율을 나눠갖고 있다. 번들러란 dependency가 있는 자바스크립트 파일을 최적화/압축하여 하나 혹은 여러개의 static 파일로 빌드해주는 컴파일러이다. Webpack 을 사용하는 것보다 장점이 있다고 한다.

7. parcel-reporter-static-files-copy 설치

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

# Root path 에 static 폴더를 만든다. 정적 이미지 등을 해당 폴더에 넣는다.
mkdir static

ETC

.gitignore 파일 생성

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

gitignore.io 바로가기

tsconfig.json 수정

...
"jsx": "react-jsx",

.eslintrc.js 수정

env: {
  browser: true,
  es2021: true,
  jest: true,  # 추가. Jest를 설치한 경우
},
extends: [
  'xo',
  'plugin:react/recommended',
  'plugin:react/jsx-runtime',  # 추가
],

prettier 와 충돌 방지

npm install --save-dev eslint-config-prettier

// .eslintrc.js 파일 수정 - prettier 추가
extends: ['xo-typescript', 'prettier'],

vscode 껐다 켜기

.eslintignore 파일 생성

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

.parcelrc 생성

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

.vscode 폴더 생성 -> settings.json 파일 생성

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

index.html 생성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Demo App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/main.tsx"></script>
  </body>
</html>

App.tsx 생성 (src 폴더 생성 후)

export default function App() {
  return <p>Hello, world!</p>;
}

main.ts 파일 (src 폴더 생성 후)

import ReactDOM from 'react-dom/client';

import App from './App';

function main() {
  const element = document.getElementById('root');

  if (!element) {
    return;
  }

  const root = ReactDOM.createRoot(element);

  root.render(<App />);
}

main();

package.json 파일 수정

"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"
  },

빌드 + 정적 서버 실행

빌드

npx parcel build

정적 서버 실행

npx servor ./dist

PreviousWEEK1 Next2. 타입스크립트 기초

Last updated 1 year ago