1. 개발환경
키워드
Node.js
NPM(Node Package Manager)
package.json / package-lock.json
node_modules
npx
ES Modules vs CommonJS
Node.js 개발환경 세팅
예전엔 nvm(node version manager)으로 했으나 요즘엔 fnm(fast node manager)으로 설치
node 사이트에서 최신버전 확인
WSL에 fnm 설치하기
homebrew 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"환경변수에 추가 (zsh 기준)
echo 'eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)' >> ~/.zshrc
eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)fnm 설치 및 환경변수 등록
brew install fnm
echo 'eval "$(fnm env)"' >> ~/.zshrc
eval "$(fnm env)"Node.js 설치
# 설치 가능한 버전 확인
fnm ls-remote
# LTS 설치하고 default 등록
fnm install --lts
fnm use lts-latest
fnm default $(fnm current)
# 설치 확인
fnm list
fnm current
# npm 업그레이드
npm install -g npmTypeScript + React + Jest + Parcel 개발환경 세팅
작업 폴더 만들기
mkdir my-app
cd my-appnpm 패키지 세팅
npm init -y : 전부 yes로 하기
package.json이 생김
{
"name": "my-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}scripts 안에 있는걸 실행할 수 있음 ex) npm test
git ignore 파일 세팅
엄청 큰 node_module이나 불필요한 파일이 커밋되는 일 방지
.gitignore 만들어서 내용작성
github gitignore의 node 추천
타입스크립트 설치
npm i -D typescriptD 옵션으로 타입스크립트를 설치하면 package.json에 devDependencies으로 타입스크립트가 들어옴
dependencies와 devDependecies의 차이 : dependency는 프로그램에서 직접 사용할 것, devDependencies는 환경에서 사용할 것(툴, 도구로서 사용하는 것).
배포시에는 devDependencies는 생략가능
타입스크립트 컴파일러 설치
npx tsc --initnpx는 node_modules/.bin 안에 있는것을 실행해주는 것
npx는 내가 패키지를 설치 안했어도 다른 곳에 받아서 실행해주기도 함
npm i -D로 설치한걸 npx로 많이 실행함
tsconfig.json이 생김 -> jsx 주석해제
ESLint 설치
npm i -D eslint
npx eslint --init✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ 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? · guide
✔ Which style guide do you want to follow? · 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? · npm.eslintrc.js가 생성됨
env 밑에 jest: true 추가
.eslintignore 파일을 만들어서 아래 내용 추가
/node_modules/
/dist/
/.parcel-cache/리액트 설치
npm i react react-dom타입스크립트를 위해 설치
npm i -D @types/react @types/react-dom테스팅 도구(jest, swc) 설치
npm i -D jest @types/jest @swc/core @swc/jest jest-environment-jsdom @testing-library/react @testing-library/jest-domjest.config.js 파일 생성
SWC를 사용하도록 설정
module.exports = {
testEnvironment: 'jsdom',
setupFilesAfterEnv: [
'@testing-library/jest-dom/extend-expect',
],
transform: {
'^.+\\.(t|j)sx?$': ['@swc/jest', {
jsc: {
parser: {
syntax: 'typescript',
jsx: true,
decorators: true,
},
transform: {
react: {
runtime: 'automatic',
},
},
},
}],
},
testPathIgnorePatterns: [
'<rootDir>/node_modules/',
'<rootDir>/dist/',
],
};
eslint 사용하기
npx eslint <경로> 검사하기
npx eslint --fix 수정하기
Parcel 설치
parcel은 웹서버를 띄워줌
npm i -D parcelpackage.json 수정
"source": "./index.html", // main을 수정
"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"
},테스트
index.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/main.tsx"></script>
</body>
</html>./src/main.tsx
import ReactDOM from 'react-dom/client';
function App() {
return (
<p>HELLO WORLD</p>
);
}
const element = document.getElementById('root');
if (element) {
const root = ReactDOM.createRoot(element);
root.render(<App/>);
}React를 import 하지 않아 생기는 lint 에러는 .eslintrc.js에 다음을 추가해서 해결
extends: [
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'xo',
],npm start로 parcel에서 정상 작동 확인
Last updated