개발일기

1. package.json 생성 npm init -y yarn init -y 2. 리액트관련 라이브러리 추가 npm install -D react react-dom yarn add -D react react-dom 3. 웹팩관련 라이브러리 추가 npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin 4. 바벨관련 라이브러리 추가 npm install -D @babel/cli @babel/core @babel/preset-env @babel/preset-react yarn add -D @babel/cli..

1. package.json 생성 npm init -y yarn init -y 2. babel 관련 패키지 설치 npm install @babel/cli @babel/core @babel/preset-env @babel/cli : cli ( Command Line Interface ) 바벨을 커맨드 인터페이스에서 바벨을 실행할 수 있도록 해주는 패키지 @babel/core : 바벨을 실행하기 위해 필수적으로 설치되어야 하는 패키지 @babel/preset-env : 자바스크립트 파일에 작성된 es6, es7, es8, es9 등등의 문법을 es5 문법으로 변환시켜준다. 이로인해 es6 이상의 문법을 지원하지 않는 브라우저에서도 자바스크립트가 정상적으로 작동할 수 있게 된다. @babel/preset-en..

0. Babel이란? 바벨이란 자바스크립트가 es5 -> es6 -> es7 등으로 점차 올라가면서 생기는 문제를 해결하기 위한 역할을 한다. 최신 자바스크립트 문법을 지원하지 않는 구형브라우저인 경우 해당 페이지가 나오지 않을 때가 있다. 이러한 경우 전체적인 자바스크립트 문법을 구형 브라우저 버전에 맞게 수정해야하는 불상사가 생길수도 있다. ( 예시 : JSX문법 ) 이를 방지하기 위해 최신 자바스크립트 문법을 구형브라우저에서도 작동할 수 있게 자바스크립트 문법을 변경해주는 transpiler( or compiler )인 babel을 사용한다. 1. Babel의 작용 시점 바벨은 작용 시점을 알기 위해서는 컴파일타임과 런타임에 대한 간략한 지식이 필요하다. 컴파일 타임 : 소스코드를 컴퓨터가 이해할 ..