개발일기

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..

webpack.config.js 파일의 내용 const path = require("path"); const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/", output: { path: path.resolve(__dirname, "build"), filename: "webpack_build.js", }, resolve: { modules: [path.join(__dirname, "src"), "node_modules"], alias: { react: path.join(__dirname, "node_modules", "react"), }, }, module: { rules: [ { test: /\...

1. 웹팩이란? 웹 어플리케이션을 구성하는데 HTML, Javascript, CSS 등의 다양한 자원이 활용된다. 웹 어플리케이션을 구성하다보면 이러한 자원들의 갯수가 많아질 것이다. HTML파일이 10개, Javascript파일이 20개, CSS파일이 15개 등으로 구성이 될 것이다. 이러한 각각의 파일들을 하나의 파일로 병합 및 압축해주는 것을 도와주는 도구가 바로 웹팩이다. 웹팩을 통해 병합 및 압이 완료되면 프로젝트를 구성하는 파일은 HTML 1개, Javascript 1개, CSS 1개로 간단하게 구성되도록 도와준다. 1-1. 모듈들을 모아주는 웹팩을 사용하는 이유는? 가장 큰 이유로는 웹 어플리케이션의 로딩속도 개선이다. 하나의 페이지에 연결된 자바스크립트 파일이 많다면 모든 자바스크립트 파일..

{ "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true, "outDir": "dist", "downlevelIteration": true, "strict": true, "noImplicitAny": false, "moduleResolution": "node", "baseUrl": ".", "paths": { "*": ["node_modules/*"] }, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } // tsconfig.json tsconfig.json에서 jsx라는 항목을 빼먹었기 때문에 발생하는 ..

리액트를 통해 개발을 하기 위해서는 까다로운 설치과정을 거쳐야 한다. 1. Node.js 설치 먼저, Node.js를 설치해준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 다운로드 페이지가 들어가면 해당 화면이 나온다. LTS란 Long Term Support의 준말이다. 즉, 오랜기간 동안 해당 버전의 기능들을 지원한다는 뜻이다. 반대로 현재 버전(최신 기능)은 아직 개발중인 단계인 버전을 뜻한다. 이 개발 중인 버전을 통해 코드를 작성할 경우, 해당 버전이 패치를 통해 버전업이 되면서 기능이 변경되거나 사라질 수 있는 가능성..

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

0. npm install -D, npm install --save, npm intall -g ??? npm 패키지 매니저를 통해 다양한 패키지들을 설치할 때, --save, -D, -g 등 다양한 옵션이 붙는 경우가 종종 발생한다. 그 이유에 대해서 한 번 알아보자. 1. npm install -D "devDependencies": { "react": "^17.0.2" } -D 옵션을 추가한 경우 devDependencies에 패키지들이 추가된다. 이 경우, --production 옵션을 추가하여 배포할 프로젝트를 빌드할 때, devDependencies에 있는 패키지들은 포함되지 않는다. 2. npm install --save "dependencies": { "react": "^17.0.2" } --..