Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-03 04:38


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

리액트 개발 환경 :: 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 사이트에서 확인하기.



댓글 남기기
◀ PREV 1···789101112131415···313 NEXT ▶