MIL 10월에 공부한 것들

뒤로

react

바벨을 사용해서 리액트 javascript 컴파일하기

npx babel --watch src --out-dir . --presets @babel/preset-react

클래스형 컴포넌트와 함수형 컴포넌트

webpack

웹팩 실행하기

$ npx webpack

create-react-app

create-react-app 사용해서 프로젝트 만들기

$ npx create-react-app {project_name}

시작하기

cd {project_name}
npm start

https를 사용하고 싶을때

# 리눅스 or 맥
HTTPS=true npm start

# 윈도우라면
HTTPS=true && npm start

빌드하기 npm run build 는 배포 환경에서 사용할 파일을 만들어줌

로컬에 웹서버를 띄워서 확인하기

npm install -g serve 로 serve 모듈을 설치하고 로컬에 웹서버를 띄워보자

server 아니고 serve 인것에 주의하자.

npx serve -s build

build 를 할때 10킬로바이트보다 작은 이미지는 별도의 파일로 생성되지 않고 data url 형식으로 자바스크립트 파일에 포함된다. 작은 파일을 요청하는 http 컨넥션이 더 비싸기 때문이다.

polyfill

core-js 를 사용하면 폴리필을 사용할 수 있다.

설치

npm install core-js

import 'core-js/features/string/pad-start';
const val = '123'.padStart(5, '0');

console.log(val); // 00123

autoprefixer

css의 최신기능을 사용하려면 벤더 접두사가 붙은 이름을 사용해야하는데, autoprefixer 패키지를 사용하면 자동으로 접두사가 붙는다.

css 작성방법

단일 페이지 애플리케이션 (SPA) 만들기