리액트 개발 환경 :: React Development Environment

React Development Environment

리액트 개발 환경을 미리 구현해 놓고 필요할때 사용할 수 있도록 정리하였다.

현재 날짜 기준으로 최신 버전으로 구성하였고, 발견된 오류는 모두 정리된 상태이지만 혹시나 문제가 있으면 이슈주면 해결해 줄 수 있을 것 같다. 아마도~ :)

https://github.com/syakuis/react-dev-base

설치

$ wget https://github.com/syakuis/react-dev-base/archive/master.zip
or
$ git clone https://github.com/syakuis/react-dev-base.git
​
$ npm install

일반적인 프로젝트와 멀티 프로젝트 모두 설정해 뒀다. 그리고 설정은 완벽히 분리되어 있다.

현 상태에서 멀티 프로젝트로 전환하려면 몇가지만 제거해주면 된다. 그전에 lerna 최신버전을 전역으로 설치해야 한다.

전역은 낮은 버전이고 지역은 최신버전이더라도 낮은 버전으로 사용되니 문제가 될 수 있다.

$ sudo npm -i -g lerna@latest
$ lerna init
$ lerna bootstrap

init lerna 를 준비하고 bootstrap 멀티 프로젝트들에게 의존성을 구성하도록 명령한다.

./packages/* 에 해당하는 프로젝트가 lerna 에서 관리되는 하위 프로젝트들이다. 사용법은 설명하지 않겠다. 필요하다면 요청하면 시간날때 정리해보도록 하겠다.

https://github.com/lerna/lerna

이제 기존 프로젝트 설정을 제거하겠다. ./src 는 필요없다. ./package.json 에서 scripts 는 원하는 것으로 변경해도 된다.

위 작업을 안해도 되지만 필요없는 것을 구지 둔다는 건 혼란을 줄 수 있으니 정리하는 것이 좋다.

사용된 라이브러리 설명

• webpack & webpack-dev-server

• babel

• react & react-dom

• editorconfig 에디터 파일 타입에 따라 간격이나 언어셋등을 설정한다. .editorconfig 파일에 설정한다. vscode 플러그인 : EditorConfig for VS Code

• eslint vscode 플러그인 : ESLint 설정에서 아래의 소스 이외에 설정은 제거해도 된다.

  rules: {
    'prettier/prettier': ['error'],
    'import/no-unresolved': ['error', { commonjs: true, amd: true }],
    'import/extensions': ['error', 'never', { packages: 'always' }],
    'import/no-extraneous-dependencies': [
      'error',
      { devDependencies: true, peerDependencies: true },
    ],
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
  }

• prettier vscode 플러그인 : Prettier - Code formatter 단축키 option + command + l 자동으로 코드를 정리합니다.

• eslint-config-airbnb

• jest vscode 플러그인 : Jest

• stylelint vscode 플러그인 : stylelint

• lerna

일반 프로젝트 관리

$ npm install
$ npm run build  // 소스 빌드
$ npm run start   // 서버 구동

다중 프로젝트 관리

packages 폴더에 프로젝트를 생성하면 된다.

$ npm install
$ sudo npm install -g lerna@latest
​
$ lerna init
$ lerna bootstrop
​
$ lerna build
$ lerna exec -- npm run dev

자세한 설명은 lerna 사이트에서 확인하기.