프론트엔드 개발환경을 제대로 이해하고 능숙하게 설정해야 하는 이유는?
- 요즘 프론트엔드 분야의 변화가 굉장히 빠르다.
- 그중에서도 프론트엔드 개발 환경은 특히나 변화가 빠르다.
세팅 목록
- Node.js
- TypeScript
- ESLint
- Jest
- React
- Parcel
- React Router
- styled-componets
- styled-reset
- usehooks-ts
- usestore-ts
- Axios
- tsyringe
- reflect-metadata
- jest-dom
- MSW
- CodeceptJS
나만의 프론트엔딩 세팅을 위한 REDEME를 만들어라
- 매번 프로젝트 때마다 문서를 생각없이 따라만 해도
- 세팅이 완료된다면 인지자원을 대단히 아낄 수 있다.
매번 바닥부터 만드는 연습을 하세요!
자신감이 붙고, 시간이 지나면 어떤 부분을 바꿔야 할지 감이 옵니다.
세팅을 시작하자
노드 버전 확인
최신 버전인지 확인한다.
node -v노드 설치
LTS(Long Term Support) 버전을 설치한다.
fnm install --lis
fnm list프로젝트 폴더 생성 및 이동
mkdir my-app
cd my-app
code .npm 패키지 생성
npm init -yignore 세팅
.gitignore 파일을 생성한다.
🎯 TypeScript
TypeScript 설치
npm i -D typescript설정 파일 생성
npx tsc --init tsconfig.json 파일 수정
jsx의 주석을 해제하고 다음과 같이 변경한다.
"jsx": "react-jsx".tsx 파일은 사용하게 해준다.
import React를 하지 않아도 사용할 수 있게 해준다.
🎯 ESLint
ESLint 설치
npm i -D eslintESLint 설정
npx eslint --init상황에 맞게 질문에 대답한다.
설치할까요? y
Eslint 어떤 거에 사용할까요? 모두
자바스크립트 모듈 어떤거 사용할까요? JavaScript (import/export)
프레임워크는 어떤 거 쓸까요? react
타입스크립트 사용하나요? y
Browser, Node? Browser
스타일 가이드를 따르세요? 아니면 매번 물어볼까요? 전자
스탠다드를 따르세요? xo를 따르세요? xo
설정파일 어떻게 잡으시겠어요? js
추가 설치해도 되나요? y
패키지 매니저 뭐 쓸까요? npm (기본)설정 파일 세팅
.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' }],
},
};ignore 세팅
.eslintignore 파일을 생성한다. eslint를 실행할 때 빼는 부분이다.
ESLint 확장자 설치
확장에서 ESLint를 설치한다. 그리고 .vscode 폴더를 만들고 안에 settings.json 파일을 만든다.
mkdir .vscode
touch .vscode/settings.jsonsettings.json 파일에는 Lint가 잡을 것을 설정할 수 있다.
(예를 들어, 80열에서 줄 긋기, save하면 끝에 있는 줄 삭제)
{
"editor.rulers": [80],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // S/TS 파일을 저장할 때마다 ESLint를 실행하고 문제점을 고치게 설정
},
"trailing-spaces.trimOnSave": true
}🎯 Jest
jest는 테스트를 위한 도구이다.
Jest 설치
npm i -D jest @types/jest @swc/core @swc/jest \
jest-environment-jsdom \
@testing-library/react @testing-library/jest-domJest 설정
jest.config.js 파일을 생성 및 작성한다.
🎯 React
React 설치
npm i react react-domType React 설치
npm i -D @types/react @types/react-domReact 기본 파일 생성
기본 파일을 생성한다.
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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';
import App from './App';
function main() {
const container = document.getElementById('root');
if (!container) {
return;
}
const root = ReactDOM.createRoot(container);
root.render(<App />);
}
main();- src/App.tsx
export default function App(){
return (<>Hello</>);
}🎯 Parcel
parcel은 웹 서버를 띄우는 도구이다.
Parcel 설치
npm i -D parcelPackage.json
package.json에서 source로 수정한다.
"source": "./index.html",이렇게 설정하지 않으면 터미널에서 npx parcel index.html --port 8080 으로 실행해야 한다.
package.json에서 script 추가
"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"
},.parcelrc 파일 생성 및 작성
이는 정적 파일을 사용하기 위해서 한다.
parcel-reporter-static-files-copy 를 설치한다.
npm install -D parcel-reporter-static-files-copy.parcelrc 파일을 생성하고, static 폴더를 생성한다.
touch .parcelrc
mkdir static.parcelrc에 다음과 같이 추가한다.
{
"extends": ["@parcel/config-default"],
"reporters": ["...", "parcel-reporter-static-files-copy"]
}
statice 폴더 하위에 있는 폴더/파일을 어디서든 불러서 쓸 수 있다.
🎯 React Router
npm i react-router-dom🎯 Styled-components
npm i styled-components
npm i -D @types/styled-components @swc/plugin-styled-components.swcrc 파일 작성.
{
"jsc": {
"experimental": {
"plugins": [
[
"@swc/plugin-styled-components",
{
"displayName": true,
"ssr": true
}
]
]
}
}
}🎯 Styled-reset
npm i styled-resetApp 컴포넌트에서 사용.
import { Reset } from 'styled-reset';
export default function App() {
return (
<>
<Reset />
<Greeting />
</>
);
}
성장중입니다 🔥 / 나무위키처럼 끊임없이 글이 수정됩니다!