node.js / npm / gitignore / nodemon / Babel / Eslint & Prettier / Jest / parcel

Frontend - Preset

npm init
- 명령어
  - npm init
  - npm init -y
gitignore
- extension -> gitignore 검색 (가장 조회수 많은 거 다운)
- ctrl + shift + p -> add gitignore 검색
- node 검색 -> 실행
nodemon
- npm i -D nodemon
- "scripts": { "start": "nodemon ./index.js", },
- npm (run) start
- ++ 원래는 vs code terminal에 쳐야하는데 내 컴퓨터에 이상한 오류가 생겨서 window powershell 로 진행함! (경로 찾아서)
Babel
- npm i -D @babel/core @babel/preset-env @babel/cli @babel/node
  - 만약 오류 발생시 npm -g i -D @babel/core @babel/preset-env @babel/cli @babel/node
- 루트 디렉토리에 babel.config.json 파일 생성
  - ```
    {
       "presets": ["@babel/preset-env"]
    }
```
- ```
  "scripts":{
       "start": "nodemon --exec babel -node ./index.js",
  },
```
  - npm (run) start
Eslint & Prettier
- npm install eslint --save-dev
- npx eslint --init
- init 설정
- npm i -D eslint-config-prettier eslint-config-tui eslint-plugin-prettier prettier
- ```
  "lint": "eslint ./index.js --fix"
```
- eslintc.js

 module.exports = {
 parserOptions: {
     sourceType: "module"
 },
 env: {
     browser: true,
     es6:true
 },
 extends: ['eslint-config-tui', 'prettier'], 
 plugins: ["prettier"],
 rules: {
     "prettier/prettier": "error",
 },
 };

Jest

npm install --save-dev jest babel-jest
jest.config.json 파일 생성

  {
      "clearMocks": true,
      "collectCoverage": true,
      "verbose": true,
      "testEnvironment": "jsdom"
  }

script 수정

  "scripts": {
      "test:jest": "jest --watchAll --collect[=true] --logHeapUsage"
      }

test 폴더 하위에 (원하는 파일명).test.js 파일 생성

주의사항!!

    // export랑 함수 || 객체가 한계일 경우
    const sum = (a + b) => {
        return a + b;
    };
    
    export default sum;
    // 테스트 파일
    import sum from "../src/index.js";
    //테스트 컨텍스트

    // export랑 함수 || 객체가 다수일 경우
    export const sum = (a, b) => {
        return a + b;
      };
      
    export const minus = (a, b) => {
        return a - b;
      };
      //테스트 파일
      
    import { sum, minus } form "../src/index.js";
    //테스트 컨텍스트

parcel
- npm install --save-dev parcel
- npx parcel src/index.html (만약 src 폴더 하위에 index.html 파일이 있다면)
- ```
  "scripts": {
      "start": "parcel",
      "build": "parcel build"
      },
```
Cypress(다음에 진행)

일단은 Eslint & Prettier까지만 잘 숙지할 것

parcel 할때 에러 발생함.. 에러도 다 깨져서 안보였다..

Run `npm audit` for details.
PS C:\Users\이진숙\Desktop\20220111> npx parcel src/index.html
>>
Error: �� ̸�, ��͸� �̸� �Ǵ� �� ̺� �� ߸��Ǿ��ϴ�.

도움 받아서 고쳐지면 글 수정하고 내용 추가할 예정.

내 github 주소

https://github.com/sandeulju/babel_jest_cypress.git

GitHub - sandeulju/babel_jest_cypress

Contribute to sandeulju/babel_jest_cypress development by creating an account on GitHub.

github.com

tw님 필기

1)npm init -y

2)npm install -D nodemon

3)익스텐션에서 gitignore install

4)ctrl + shift + p // Add gitignore // Node (npm install 하면 node_modules를 다시 다운받아줌)

5)scripts: 안에 "명령어: node ./url" 입력시 nodemon실행 가능

6)npm install -D @babel/core @babel/cli @babel/preset-env @babel/node

7)babel.config.json파일 생성후 { "presets": ["@babel/preset-env"] } 내용 추가

8)npm -g install @babel/node 설치후 babel사용 가능!!

ESlint

1) npm install eslint -D

2) npx eslint --init 후 원하는 사양 결정후 .eslintrc.js파일 생성됬는지 확인

3).eslintrc.js파일에 module.exports = { parserOptions: { sourceType: "module" }, env: { browser: true, es6:true }, extends: ['eslint-config-tui', 'prettier'], plugins: ["prettier"], rules: { "prettier/prettier": "error", } } 붙여넣기

4)npm install -D eslint-config-prettier eslint-config-tui eslint-plugin-prettier 설치, npm install -D prettier 설치

5)익스텐션 prettier 설치

jest

1) npm install -D jest babel-jest

2) jest.config.json 파일 생성 후 { "clearMocks": true, "collectCoverage": true, "verbose": true, "testEnvironment": "jsdom" } 붙여넣기

3) 파일명.test.js 파일만들어서 test코드 짠 후 test할 명령어 scripts에 추가

4) npm (run) 명령어

'TIL > 기타' 카테고리의 다른 글

20220930 (1)	2022.09.30
20220927~20220929 (0)	2022.09.29
20220923 읽고 공부한 것 (1)	2022.09.23
20220921 (0)	2022.09.21
Git CLI 명령어 자꾸 헷갈린다..! 참고 사이트들 정리(01/04 최종수정) (0)	2022.01.02

SanGumi (Dev)

node.js / npm / gitignore / nodemon / Babel / Eslint & Prettier / Jest / parcel

Frontend - Preset

tw님 필기

'TIL > 기타' 카테고리의 다른 글

댓글

티스토리툴바

node.js / npm / gitignore / nodemon / Babel / Eslint & Prettier / Jest / parcel

Frontend - Preset

tw님 필기

'TIL > 기타' 카테고리의 다른 글

관련글

댓글

티스토리툴바