snowpack으로 React 시작하기

이번 미션을 진행하며 Snowpack을 이용해 리액트 환경을 세팅해보았다.

 

Snowpack이란?

• 스노우팩은 요즘 떠오르는 프론트엔드 빌드 툴이다.
• 번들러에 의존하지 않고(unbundle) 웹 어플리케이션을 빌드한다.

Snowpack의 장점은?

• 언번들 개발을 해서 빌드 속도가 빠르다.
• 프로젝트 크기가 개발 속도에 영향을 주지 않는다.
• 번들러를 사용할 시, 작은 변경이 생길 때마다 전체 파일을 새로 번들해야한다. 그리고 이는 파일을 저장하고, 브라우저에 표시하기까지 몇 초의 지연을 발생시킨다. 하지만 snowpack은 번들을 하지 않기 때문에 파일의 일부를 변경하면 해당 파일만 새로 빌드한다.

1. snowpack 설치 (prettier까지 설치됨)

npx create-snowpack-app [프로젝트 이름] --template @snowpack/app-template-react

 

명령어 실행 후, 내가 설정한 프로젝트 이름으로 폴더가 생성된다.

2. 디렉토리 이동

cd snow-test

3. eslint관련 모듈 설치

yarn add -D eslint eslint-config-prettier eslint-plugin-prettier eslint-config-react-app eslint-plugin-react

 

eslint-config-prettier

eslint에서 prettier와 겹치는 포매팅룰을 삭제

 

eslint-plugin-prettier

eslint에 prettier의 포매팅 기능을 추가한다. eslint-config-pretteir로 eslint의 원래 포매팅 기능을 없애버리고, eslint-plugin-prettier로 prettier의 포매팅 기능을 사용한다.

 

eslint-config-react-app

CRA에서 사용된 eslint configuration 추가

 

eslint-plugin-react

리액트 규칙들을 추가해주는 플러그인(웹 브라우저의 일부로서 쉽게 설치되고 사용될 수 있는 프로그램)

4. eslint 시작

eslint --init 

? How would you like to use ESLint? (Use arrow keys)
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style
  
? What type of modules does your project use? (Use arrow keys)       
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? (Use arrow keys)
> React
  Vue.js
  None of these

? Does your project use TypeScript? (y/N) N

? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Browser
 (*) Node

? What format do you want your config file to be in? (Use arrow keys)
> JavaScript
  YAML
  JSON

The config that you've selected requires the following dependencies:

eslint-plugin-react@latest
? Would you like to install them now with npm? (Y/n) Y

5. 이 작업이 끝나면, 프로젝트 루트 디렉토리에 .eslintrc.js 라는 파일이 생긴다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['react-app', 'prettier'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', 'prettier'],
  rules: {},
};

6. babel관련 모듈 설치

yarn add -D @babel/core @babel/core @babel/preset-env @babel/preset-react

7. .babelrc 파일 생성

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

8. 확장자를 jsx에서 js로 바꾸고, import시 확장자 안붙이고 사용하기 위해 다음을 설치

yarn add -D @snowpack/plugin-babel

9. snowpack.config.js 수정

plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    // 추가
    [
      '@snowpack/plugin-babel',
      {
        input: ['.js', '.mjs', '.jsx', '.ts', '.tsx'], // (optional) specify files for Babel to transform
        transformOptions: {
          // babel transform options
        },
      },
    ],
  ],

10. 서버 실행

yarn start

 

 

 

출처

https://ichi.pro/ko/snowpack-beondeullo-jegongdoeji-anhneun-gaebal-ilan-mueos-ibnikka-146656496256313

https://simsimjae.medium.com/prettier와-eslint설정하기-타입스크립트-설정-110dc8ab94b6