Full Stack Web Developer.
Syaku (샤쿠)

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

        

07-12 09:23


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

React 앱을 개발하기 위한 기본 개발 환경

React 앱을 개발하기 위한 기본 개발 환경


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

본 프로젝트는 리액트 앱 개발을 위한 기본적인 개발환경을 구성하고 있다.

새로운 프로젝트마다 매번 개발환경을 구성하는 작업을 생략하기 위해 만들어졌다.

바벨 설정은 ie 11 이상으로 되어있다. 필요하다면 직접 변경하여 사용한다.

Built-in package

webpack
webpack-dev-server

eslint
eslint-config-airbnb
stylelint

babel
React & ReactDOM
jest

패키지 구동

npm or yarn

$ yarn build:prod
$ yarn build:publish
$ yarn serv:
$ yarn serv:demo
$ yarn stats:prod

$ yarn jest

npm 저장소에 배포하기

// 바벨로 빌드하여 최종 소스를 생성한다.
$ yarn build:publish

// npm 에 배포하기전에 배포 소스를 만들어 설치해본다. *.tgz
$ yarn pack
$ yarn add ./packName.tgz

// npm 서버 패키지를 배포한다.
$ yarn publish

개발 환경 설정 설명

css classname 충돌 방지

SPA 는 한번 로드된 css 의 class name 계속 유지되므로 같은 이름이 있으면 디자인에 문제가 생긴다. 이를 해결하기 위해 css-loader 의 module 옵션을 사용한다. 하지만 이 기능은 코딩시 매우 불편하므로 무조건 사용하는 것보다 충돌이 생기는 곳에만 사용한다.

충돌이 생기는 css class name 를 *.module.css 로 분리하여 코딩하고 사용할때는 아래와 같이 사용한다.

import s from './style.module.css';

... skip ...

<div className={s.name}>

충돌이 되지 않는 클래스는 그래도 사용하면 된다. <div className="clas"></div>

webpack 설정에 *.module.css 에 대해 모듈로 처리되게 설정되어 있다.

추천 패키지

  • axios: ajax request
  • qs: json to parameter type trans
  • attr-accept: mimetype check
  • classnames: css classname appender
  • file-saver: file save
  • filesize: file size
  • flatpickr: datetime picker
  • moment: date util
  • shortid: 유니크 key 생성.
  • store: local storage. cookie and session support
  • styled-components: inline style created.


댓글 남기기
◀ PREV 1···456789101112···14 NEXT ▶