5. Parcel & ESLint

Parcel

빌드도구, 번들러

Zero Configuration

특별한 설정 없이 바로 사용 가능한 빌드 도구. 내부적으로 SWC를 사용해 기존 도구보다 빠르다.(ESModule)

설정이 필요 없다했지만 두가지는 해줘야 함.

1. package source 설정

// package.json
"source": "./index.html",

위처럼 세팅 안해주면 npx parcel index.html로 번들링 해줘야함,

npx parcel index.html --port 8080 해줘야함.

1. static file.

프로젝트 내부 폴더에 이미지를 넣고

<img src="/images/images.jpeg" alt="test image" />

이렇게 가져와도 이미지가 나오지 않는다.

parcel-reporter-static-files-copy를 설치하고 설정해줘야

static 폴더의 파일을 정적 파일로 Serving할 수 있다(이미지 등 Assets).

npm i -D parcel-reporter-static-files-copy

// .parcelrc
{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

그리고 static 폴더를 만들고 images/image.jpeg를 안으로 옮겨준다.

캐시날리고 새로고침하면 이미지 나옴.

배포하고싶다

npm run build  //start만 해도 dist 생김.

// npx parcel build 해도됨 package설정 안했으면

빌드한 dist 로 배포한다.

cd dist

npx servor // zero configuration server

lint 무엇을 위해서?

• 스타일 통일

• 잠재적 문제 발견

• 베스트 프랙티스 추천 → 최신 트렌드를 학습하는데 활용할 수 있다.

vscode ESLint extension

.vscode/settings.json파일을 추가해 JS/TS 파일을 저장할 때마다 ESLint를 실행하고 문제점을 고치게 설정할 수 있다.

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

아샬의 기본세팅

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

Trailing Spaces

npm run check //타입스크립트 컴파일 하면서 문제되는거 잡고

npm run lint //린팅~

하나짜리 스크립트로 만들어도됨 (당연; ;)