babel을 사용하는 이유:
ES6 이상의 프로젝트 문법을 모든 브라우저가 지원하는 ES5 로 transpiling 하기 위함
webpack을 사용하는 이유:
기존 asset을 모듈화하여 관리와 성능 향상에 도움을 준다.
하나의 bundle로 묶을 수 있다.
- 코드를 필요할때 로딩할 수 있다.
- Minifying: 공백문자 줄이기, 변수명 길이가 작게 변경 등
- HMR (Hot module replacement): 개발모드에서 원본 소스코드 변경을 감지하여 변경된 모듈만 즉시 갱신
css <(transpiling) sass, less
babel-loader
css-loader
webpack webpack-cli
react react-dom 등
개발시 필요한 라이브러리 모두 추가하는 것을 create-react-add로 지원
yarn add create-react-app
webpack --mode=development --module-bind js=babel-loader
./dist/main.js trainspiling 된 코드 위치
webpack.config.js
관련 라이브러리들
sourceMap 원 소스와 transpiling 된 코드를 둘다 로딩
css-loader: css 파일 읽기
style-loader: head 엘리먼트에 css 주입, css-loader 와 같이 사용
postcss-loader: 자바스크립트 플러그인을 통해 css를 변환하는 툴, 플러그인 베이스의 자동화 툴로, 앞으로 표준이 될 css 눔법을 확장/지원하는 css 게의 Babel 이다.
autoprefixer css vender-prefix 자동처리 플러그인
post-css-color-function color modifier 지원
postcss-simple-vars sass 형식 변수 지원
postcss-nesting Nesting 문법 지원
postcss-for for문 지원
postcss-assets url내에 들어가는 파일의 경로 계산이나 이미지의 width 측정
precss sass 처럼 사용하기 위한 플러그인 모음
cssnext 아직 지원하지 않는 새로운 구문 지원
creat react app (CRA)
create-react-app페이스북 팀에서 유지 보수를 하고 있다.
webpack babel eslint 등의 기본설정이 되어있다.
yarn global add create-react-app
yarn create react-app my-app
yarn eject는 초보 단계에서 지양하라
yarn start
yarn build
python -m http.server 를 build 안에서 하면 정적웹 서비스가 된다.
yarn global add serve
nodejs에서의 경량 웹서버
serve
상대경로 import를 절대경로로 지정하기
jsconfig.json
{
"compilerOptions":{
"baseUrl": "src"
},
"include": ["src"]
}WebStorm 등을 사용할경우
src 폴더를 우클릭하여 Resource Root Directory 로 지정
Ant Design
알리바바 그룹에서 개발한 UI 프레임워크
React, Vue, Angular 지원
깊은 디자인 철학을 가진 UX 이다
