제가 사용하고 있던 Node.js version은 v16.15.1이었습니다.
현재 기준으로 v18.14.2 LTS의 Node.js version으로 세팅하려 합니다.
Node.js version 관리를 위해 FNM(Fast Node Manager)를 사용했습니다. 기존에는 nvm을 통해서 Node.js version을 관리했지만, fnm이 nvm보다 더 빠르고 간편하게 Node.js version을 관리할 수 있다고 하여 사용하게 되었습니다.
// Node.js version 확인
node --version // v16.15.1
// Homebrew를 이용해 fnm 설치
brew install fnm
// `~/.bashrc` 또는 `~/.zshrc`에 다음 추가
eval "$(fnm env --use-on-cd)"
// Node.js LTS(Long Term Support) version 설치 및 사용
fnm install --lts
fnm use lts-latest
// 설치된 Node.js version 확인 및 지정한 버전 default로 설정
fnm list
fnm default $(fnm current)mkdir my-app
cd my-appnpm 패키지를 준비하는 게 첫 번째 작업입니다.
// -y를 통해서 기본 설정값으로 생성
npm init -ynode_modules와 같은 파일들을 commit 하지 않도록 .gitignore 파일을 통해 방지할 수 있습니다.
/node_modules/
/dist/
/.parcel-cache/
위 3개의 파일은 반드시 .gitignore 파일에 넣어줘야하고, github에서 기본으로 제공하는 .gitignore 파일을 주로 사용합니다.
npm i -D typescript
npx tsc --inittsconfig.json 파일에서 "jsx": "preserve" 주석을 해제하고, "jsx": "react-jsx" 설정을 변경했습니다. 참고로 TypeScript는 여러 가지의 JSX 모드를 제공하고 있습니다.
npm i -D는 npm install --save-dev의 약어로 개발 환경에서 사용하는 도구를 설치할 때 사용하는 명령어 입니다. 서버 배포 시 devDependencies를 제외할 수 있어서 배포 크기를 줄일 수 있습니다.
// package.json의 devDependencies key는 개발할 때만 사용하는 확장 모듈을 관리합니다.
"devDependencies": {
"typescript": "^4.9.5"
}npx tsc --init에서 tsc는 TypeScript Compiler의 약어이고, npx는 npm에서 제공하는 도구로서 로컬에 설치된 모듈을 간편하게 실행시킬 수 있고, 로컬에 해당 모듈이 없다면 임시 설치해서 실행시킬 수 있습니다. ./node_modules/.bin/tsc와 npx tsc은 동일합니다.
npm i -D eslint
npx eslint --initESLint 세팅 시 나오는 질문 및 답변은 다음과 같습니다.
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
Would you like to install them now?
❯ Yes
Which package manager do you want to use?
❯ npmstyle guide는 현재 가장 많이 사용하는 airbnb style guide를 적용하고자 합니다.
// XO style guide 제거
npm uninstall eslint-config-xo \
eslint-config-xo-typescript
// airbnb style guide 설치
npm i -D eslint-config-airbnb \
eslint-plugin-import \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-plugin-jsx-a11y.eslintrc.js파일을 적절히 수정합니다.
module.exports = {
env: {
browser: true,
es2021: true,
jest: true,
},
extends: [
'airbnb',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [
'react',
'@typescript-eslint',
],
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
rules: {
indent: ['error', 2],
'no-trailing-spaces': 'error',
curly: 'error',
'brace-style': 'error',
'no-multi-spaces': 'error',
'space-infix-ops': 'error',
'space-unary-ops': 'error',
'no-whitespace-before-property': 'error',
'func-call-spacing': 'error',
'space-before-blocks': 'error',
'keyword-spacing': ['error', { before: true, after: true }],
'comma-spacing': ['error', { before: false, after: true }],
'comma-style': ['error', 'last'],
'comma-dangle': ['error', 'always-multiline'],
'space-in-parens': ['error', 'never'],
'block-spacing': 'error',
'array-bracket-spacing': ['error', 'never'],
'object-curly-spacing': ['error', 'always'],
'key-spacing': ['error', { mode: 'strict' }],
'arrow-spacing': ['error', { before: true, after: true }],
'import/no-extraneous-dependencies': ['error', {
devDependencies: [
'**/*.test.js',
'**/*.test.jsx',
'**/*.test.ts',
'**/*.test.tsx',
],
}],
'import/extensions': ['error', 'ignorePackages', {
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
}],
'react/jsx-filename-extension': [2, {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
}],
'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }],
},
};.eslintignore 파일 내용은 .gitignore 파일과 동일하게 작성해줍니다.
.vscode폴더 생성 후 하위에setting.json파일을 생성합니다.
mkdir .vscode
touch .vscode/settings.json- 아래 내용을 세팅해서 파일 저장시 자동으로 lint 실행 및 fix 하도록 합니다.
{
// 80 column에서 줄 긋기
"editor.rulers": [80],
// 저장 시 자동으로 fix하기
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 저장 시 필요없는 spaces 줄여주기
"trailing-spaces.trimOnSave": true
}npm install -D prettiereslint-config-prettier도 추가 설치합니다. eslint-config-prettier의 역할은 eslint와 중복되는 규칙을 prettier 쪽에서 알아서 꺼주는 역할을 합니다.
npm install --save-dev eslint-config-prettier.eslintrc.js파일에 prettier를 사용할 수 있도록 수정합니다.
{
"extends": ["some-other-config-you-use", "prettier"]
}npm i react react-dom
npm i -D @types/react @types/react-domnpm i -D jest @types/jest @swc/core @swc/jest \
jest-environment-jsdom \
@testing-library/react @testing-library/jest-dom테스팅 도구 설치 내용은 다음과 같습니다.
- Jest 및 SWC 지원 패키지 설치
npm i -D jest @types/jest @swc/core @swc/jest2.React Testing Library 세팅
npm i -D jest-environment-jsdom @testing-library/react @testing-library/jest-domjest.config.js 파일을 작성해서 테스트 시 SWC를 사용할 수 있게 합니다. setupFilesAfterEnv의 내용 중 ./jest.setup은 삭제합니다.
-
SWC can be used for both compilation and bundling. For compilation, it takes JavaScript / TypeScript files using modern JavaScript features and outputs valid code that is supported by all major browsers.
setupFilesAfterEnv의 내용 중 ./jest.setup은 삭제합니다.
module.exports = {
testEnvironment: 'jsdom',
// React Testing Library 관련 설정(setupFilesAfterEnv)
setupFilesAfterEnv: [
'<rootDir>/src/setupTests.ts',
],
transform: {
'^.+\\.(t|j)sx?$': ['@swc/jest', {
jsc: {
parser: {
syntax: 'typescript',
jsx: true,
// React Testing Library 관련 설정(decorators)
decorators: true,
},
transform: {
react: {
runtime: 'automatic',
},
// React Testing Library 관련 설정(legacyDecorator, decoratorMetadata)
legacyDecorator: true,
decoratorMetadata: true,
},
},
}],
},
};npm i -D parcel-
Parcel이란?Parcel은 특별한 설정 없이 바로 사용 가능한 빌드 도구입니다.
내부적으로SWC를 사용해서 기존 도구들보다 빠릅니다. -
추천하는 설정 작업
package.json파일에 source 속성 추가
"source" : "./index.html"
parcel-reporter-static-files-copy패키지를 설치 후.parcelrc파일을 작성합니다. https://github.com/elwin013/parcel-reporter-static-files-copy 아래 설정을 통해서 static 폴더의 파일을 정적 파일로 Serving할 수 있습니다.(이미지 등 Assets)
{
"extends": ["@parcel/config-default"],
"reporters": ["...", "parcel-reporter-static-files-copy"]
}아래의 scripts 내용을 참고하여 수정합니다.
"scripts": {
"start": "parcel --port 8080",
"build": "parcel build",
"check": "tsc --noEmit",
// lint 관련 설정
"lint": "eslint --fix --ext .js,.jsx,.ts,.tsx .",
// jest 관련 설정
"test": "jest",
"coverage": "jest --coverage --coverage-reporters html",
"watch:test": "jest --watchAll"
},또한 위 상태에서 npm run start를 하면 에러가 발생하는데,
현재 packsge.json의 "main" : "index.js"를 "source" : "index.html"로 수정하면 에러를 해결할 수 있습니다. 원래 node의 경우 실행 파일을 "main" 으로 잡아주는데, 해당 파일에서는 웹 서버를 띄울 것이기 때문에 "source"로 변경했습니다.
index.html파일 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Demo App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/main.tsx"></script>
</body>
</html>2.src/main.tsx 파일 작성
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();3.src/App.tsx 파일 작성
export default function App() {
return <p>Hello, world!</p>;
}Node.js는 비동기 이벤트 기반 JavaScript 런타임입니다.
NPM(Node Package Manage)는 자바스크립트 패키지 매니저입니다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공합니다.
NPM(Node Package Manager)은 package.json 파일을 통해서 프로젝트 정보와 패키지의 의존성을 관리합니다. package.json을 통해서 동일한 개발 환경을 빠르게 구축할 수 있는 장점이 있습니다.
package.json의 dependencies key는 서비스를 배포할 때 쓰이는 모듈 관리를 위한 부분입니다.
npm install 명령어를 통해 dependencies에 포함된 모든 확장 모듈을 설치할 수 있습니다.
// package.json 생성
npm init
// package.json 기본 설정 적용
npm init -ypackage.json에서 설치한 모듈의 dependencies들을 상세하게 명시해 놓은 곳입니다.
node_modules는 모듈들을 패키지화하여 모아둔 저장소입니다.
npx는 npm에서 제공하는 도구로서 로컬에 설치된 모듈을 간편하게 실행시킬 수 있고, 로컬에 해당 모듈이 없다면 임시 설치해서 실행시킬 수 있습니다.