01. FE Environment

프론트엔드 생존코스 1주차 과제

계속 써먹는 환경설정 총정리

1. 패키지 설치를 위한 node 시작하기

1. 노드를 설치한다. nodejs.org

2. 터미널로 설치가 잘 되었는지 확인 node -v

3. 작업을 시작할 폴더를 생성한다. (대문자 금지) mkdir my-app

4. 폴더 안으로 이동한다. (m치고 tab하면 자동완성됨) cd my-app

5. node package manager 사용을 시작한다. npm init => 질문폭격 npm init -y => 다 yes로 대답

2. 패키지 설치

0. .gitignore 작성

1. .gitignore파일을 만든다. touch .gitignore

2. .gitignore Gernerator 의 도움을 받아 내용물을 채운다.

3. 최소한 node_modules 와 dist는 넣자.

1. TypeScript

1. dev 디펜던시로 타입스크립트를 install

   npm i -D typescript
   npx tsc --init

2. tsconfig.json 파일 수정

   // 주석되어있는 것을 풀고 
   "jsx": "preserve"
   // 수정
   "jsx": "react-jsx"

3. package.json 파일 수정 -> 문법오류 확인 명령어 check 추가 -> CI 등에 추가한다

   //  `sciprts` 파트에 추가
   "chek": "tsc --noEmit"

2. React

1. react 설치

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

2. 기본코드 작성

   mkdir src
   touch src/index.tsx
   touch src/App.tsx

3. App.tsx 내용채우기

   import React from 'react';
   
   export default function App() {
     return (
       <div>Hello, world!</div>
     );
   }

4. index.tsx 내용채우기

   import ReactDOM from "react-dom/client";
   import App from "./App";
   
   const element = document.getElementById('root');
   
   if (element) {
     const root = ReactDOM.createRoot(element);
     root.render(<App/>)
   }

3. JEST + swc

1. jest 설치

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

2. jest.config.js 만들기

   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/',
     ],
   };

3. jest-setup.js 만들기

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

4. src/App.test.tsx 만들기

   import { render } from '@testing-library/react';
   
   import App from './App';
   
   describe('App', () => {
     it('renders greeting message', () => {
       const { container } = render(<App />);
   
       expect(container).toHaveTextContent('Hello, world!');
     });
   });

5. package.json scripts에 명령어 추가

   {
     "scripts": {
       // ...(전략)...
       "test": "jest"
     }
   }

6. 명령어 써보기

   npm test

4. ESLint

1. eslint를 설치한다.

   npm i -D eslint
   npx eslint --init

2. 질문에 대답한다.

   ? 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? …
   ❯ Airbnb: https://github.com/airbnb/javascript
   ❯ XO: ~~
   
   ? What format do you want your config file to be in? …
   ❯ JavaScript
   
   ? Would you like to install them now with npm?
   › Yes

3. package.json에 devDependencies 추가된 내용 확인

   "@typescript-eslint/eslint-plugin": "^6.16.0",
   "@typescript-eslint/parser": "^6.16.0",
   "eslint": "^8.56.0",
   "eslint-config-xo": "^0.43.1",
   "eslint-config-xo-typescript": "^1.0.1",
   "eslint-plugin-react": "^7.33.2",

4. .eslintrc.js 파일에 다음 세 줄을 추가

     env: {
       ...,
       jest: true,
     },
     extends: [
       ...,
       'plugin:react/jsx-runtime',
     ],
     rules: {
       ...,
       'react/react-in-jsx-scope': 'off',
       },

5. package.json에 "scripts" 명령어 추가

   "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx .",

6. .eslintignore 파일을 작성한다. .gitignore 파일과 똑같이 작성해도 ok

7. lint 실행시켜보기

   npm run lint

8. 저장할때마다 lint 실행되게 하기

   mkdir .vscode
   touch .vscode/settings.json

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

5. Parcel

1. parcel을 설치한다.

   npm i -D parcel

2. package.json에 명령어 추가

   "start": "parcel --port 8080",
   "build": "parcel build",

3. .gitignore, .eslintignore 에 .parcel-cache 폴더 추가

4. 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/index.tsx"></script>
   </body>
   </html>

5. package.json 파일 수정

   "main": "index.js", // 노드에서 실행할 경우
   =>
   "source": "index.html", // 웹서버에서 실행할 경우

6. 실행시켜보기

   npm start

7. package.json 에 npm 단축 명령어 최종.json

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