개발일기

{ "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" } --..

0. package.json이란? package.json이란 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일이다. { "name": "tutorial", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 이름처럼 JSON 포맷으로 이루어져 있다. 1. 생성방법 npm init // 프로젝트명, 설명 등 작성할 내용이 있을 경우 npm init -y // 입력할 내용없이 package.json 생성 yarn i..

1. JWT (JSON Web Token) 토큰이란? aaa.bbb.ccc 방식으로 점을 기준으로 각각에 값들이 저장되어 있고 이를 활용하여 인증하고 활용하는 토큰을 뜻한다. 필자는 이 토큰을 통하여 사용자인증을 진행하기 위해 활용하였다. JWT토큰 안에 사용자의 id등의 정보를 담고 토큰이 검증됬을 때에만 페이지 이동이 가능 및 포함되어져 있는 정보들을 사용할 수 있도록 하기 위해 활용하였다. 먼저 첫 번째 부분인 aaa에는 헤더에 관한 내용들이 들어가게 된다. 암호화된 알고리즘이 무슨 타입으로 지정되어 있는지, 이 토큰은 어떤 토큰인지에 대한 내용을 담고 있다. { alg: '알고리즘 타입' typ : '토큰 타입' } 두 번째 부분인 bbb에는 토큰에 담은 내용이 들어가 있다. 예를 들어 이메일주소..

0. 먼저 Express 웹서버를 띄울 곳에 폴더를 만든다. mkdir express-server-tutorial cd express-server-tutorial 1. 패키지 매니저를 통한 express 설치 npm install express -d 2. express.js 파일을 생성한 후, 방금 설치한 express 모듈을 require를 통해 불러온다. const express = require('express'); const app = express(); require는 import와 같은 역할을 한다. require가 사용하기 어색하여(?) import 를 쓰고자 한다면 babel을 설치한 후, 추가적인 설정을 한 후, 사용하면 된다. import express from 'express'; //..

Javascript의 변수 선언 방법은 var, let, const가 있다. 변수의 선언 방식 var test1 = "변수1"; let test2 = "변수2"; const test3 = "변수3"; var var test1 = "테스트변수1"; console.log(test1); // 테스트변수1 var test1 = "다른 테스트변수1"; console.log(test1); // 다른 테스트변수1 var는 같은 변수명으로 변수를 한 번 더 선언하게 되면 에러없이 다른 변수값이 출력된다. 보기에는 편해보일지라도, 나중에 자바스크립트 소스 코드의 양이 많아지게 되면 변수의 값이 의도치 않은 곳에서 변수값이 바뀌거나, 적절한 곳에 변수를 사용했을 때, 다른 값이 나온느 등의 문제점이 발생할 수 있다. le..