개발일기

React routet 설치법 npm install react-router-dom yarn add react-router-dom HashRouter 주소에 해쉬태그가 붙는다(#) -> index.html에서 index.html# 처럼 뒤에 붙는다. BrowserRouter와는 다르게 새로고침하여도 에러가 발생하지 않는다. 검색 엔진이 찾지를 못한다. 주로 정적인 페이지에서 사용된다. // HashRouter로 감싸주어 사용한다. BrowserRouter 태그를 통해 to 속성에 이동할 경로를 추가하여 이동시킨다 새로고침하면 경로를 찾지 못해 에러가 발생한다. HTML5 History API를 사용한다. 주로 동적인 페이지에서 사용된다. 메인 페이지 // BrowserRouter 감싸주어 사용한다. 두 라..

시간단위에 대한 개념 UTC : 세계협정시를 나타내는 UTC ( Coordinated Universal Time )는 GMT와 초단위의 소숫점에서 약간의 차이가 발생한다는 특징이 있다. 차이가 미묘하기에 일상에서는 UTC와 GMT가 혼용되어 사용된다. GMT : 그리니치 평균시를 뜻하며, 런던을 기점으로 웰링턴에 종점으로 설정된 협정 세계시의 기준시간대를 의미한다. Unix Timestamp : 1970년 1월 1일에서 시작한 UTC시간부터 누적된 경과시간을 초단위로 변환하여 표현한 시간을 의미한다. KST : ( Korea Strandard Timezone) 한국 표준시를 뜻한다. 동경 135도를 기준으로 하며 UTC / GMT보다 9시간 빠르다. 이외에도 PT( Pacific Timezome), JS..

기존 모듈화 방식 : 스크립트 태그 ( 기존에는 자바스크립트 파일들을 script 태그를 이용하여 불러오는 방법을 사용하였다. script태그를 통한 방법 외에는 모듈화 시킬 방법이 없있기 때문이다. script태그를 통한 방식에는 크게 두가지의 문제점이 발생할 수 있다. 각각의 태그로 불러온 js파일들의 전역변수가 공통으로 생성된다. 전역 변수의 값이 바뀌어 에러가 발생할 수 있다. var alertNum = 10; // index.js var alertNum = 20; // page.js 전역변수 alertNum을 index.js와 page.js에서 각각 선언하여 값을 할당한 후, 해당 파일들을 script태그를 통하여 가져오면 값의 변화가 생기게 된다. page.js가 index.js 이후에 불러와..

1. package.json 파일 생성 npm init -y yarn init -y 2. 타입스크립트 설치 npm install -D typescript yarn add -D typescript 3. tsconfig.json 파일 생성 tsc --init tsconfig.json 파일이 생성되면 컴파일 옵션에 포함되어져 있는 옵션들에 대한 주석이 달려있는 파일이 생성된다. 4. tsconfig의 주요 속성 { "compilerOptions": { "outDir": "./build/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react", }, "exclude": ["node_module..

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. 모듈들을 모아주는 웹팩을 사용하는 이유는? 가장 큰 이유로는 웹 어플리케이션의 로딩속도 개선이다. 하나의 페이지에 연결된 자바스크립트 파일이 많다면 모든 자바스크립트 파일..