코드 기어 Code Gear - 개발 강좌

이 글의 동영상 강의입니다.

https://youtu.be/mcq-cqnFJD0

* 이 글은 MDN Javascript 안내서를 참조하여 작성하였습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Introduction

Javascript 실행 방법

Javascript 코드를 만들고 실행하는 방법은 다음과 같습니다.

• test.js 파일을 만들고 test.html에서 test.js를 선언해서 사용할 수 있습니다.

<script src="./test.js"></script>

• 크롬 브라우저 개발자 도구에서 콘솔에 javascript 코드를 입력하여 실행 할 수 있습니다.
  크롬 개발자 도구는 크롬 실행 후 F12 키를 눌러 실행 시킬 수 있습니다.

• nodejs를 설치한 후 node 명령을 통해 실행할 수 있습니다.
  아래는 nodejs로 test.js를 실행하는 명령입니다.

node test

여기서는 주로 3번째 방법인 nodejs를 설치하여 테스트 하도록 하겠습니다.

문법

• 대소문자를 구분합니다.

var name = "Spider Man";
var Name = "Iron Man";

console.log(name);
console.log(Name):

• 크롬 브라우저의 개발자도구에서 실행한 결과는 다음과 같습니다.
  크롬 개발자도구는 브라우저 실행 후 F12를 누르면 나타납니다.

• 주석은 다음과 같이 사용합니다.

// 한 줄 주석

/* 이건 더 긴,
 * 여러 줄 주석입니다.
 */

/* 그러나, /* 중첩된 주석은 쓸 수 없습니다 */ SyntaxError */

• 명령문(Statement)는 세미콜론( ; )으로 구분합니다.
  한줄로 명령문이 끝날 경우에는 세미콜론을 사용하지 않아도 됩니다.
  하지만 프로그램의 가독성을 위해 저는 사용하는 것을 권합니다.

var name = "Spider Man";

선언

• Javascript는 3가지 선언 방법이 있습니다.
  • var : 변수를 선언하고 동시에 값을 초기화 함.
  • let : 블록 범위 지역변수를 선언하고, 동시에 값을 초기화 함.
  • const : 블록 범위 읽기 전용 상수를 선언함. 
• var는 scope과 hoisting 문제가 있습니다. 이로 인해 ES6 이후부터 나온 let과 const의 사용을 권합니다. 
• 아래는 scope 문제의 예입니다.

var name = "Spider Man";
if (name) {
	var name = "Iron Man";
	console.log("I am " + name);
}
console.log("I am " + name);

• if문 block에서 변경한 name의 값이 block 외부에도 영향을 미치고 있습니다.
• 다음과 같이 let과 const를 사용하면 block scope을 갖게 됩니다.

let name = "Spider Man";
if (name) {
	let name = "Iron Man";
	console.log("I am " + name);
}
console.log("I am " + name);

• 아래는 hoisting 문제의 예입니다.

console.log(name);
var name = "Iron Man";
console.log(name);

• name을 선언하지 않았지만 오류가 나지 않고 undefined라는 값을 출력했습니다.
• 아래와 같이 let과 const를 사용하면 에러가 발생하게 됩니다.

console.log(name);
let name = "Iron Man";
console.log(name);

변수

• 변수는 var와 let을 이용해 선언합니다.
• 초기값이 없을 경우 undefined 값을 갖습니다.

var a;
console.log("a 값은 " + a); // "a 값은 undefined"로 로그가 남음.

let x;
console.log('x 값은 ' + x); // x 값은 undefined​

• undefined를 갖는 변수는 if 문에서 false가 리턴됩니다.

var name;
if (name) {
	console.log("true");
}else {
   console.log("false");
}

상수

• 상수는 const를 사용하여 선언합니다.
• 상수는 초기에 설정된 값외에 다른 값으로 바꿀 수 없습니다.
• 상수는 재선언할 수 없습니다.

데이터형

Javascript는 7가지 데이터 형을 정의합니다.

• Boolean : true or false
• null : 값이 없음
• undefined : 값이 정의되지 않음
• Number : 정수 또는 실수형 숫자. 예:5 or 3.14159
• String : 문자열
• Symbol : 고유하고 불변인 데이터 형
• Object : 객체형

배열

Javascript에서 배열은 다음과 같이 []를 사용하여 선언합니다.

var coffees = ["French Roast", "Colombian", "Kona"];

Block

• Block 문은 코드의 묶음을 나타내고 중괄호 "{ }"로 표시합니다.

{
  statement_1;
  statement_2;
  .
  .
  .
  statement_n;
}

• Block 문은 일반적으로 제어문(if, for, while)과 함께 사용합니ㅏㄷ.

while (x < 10) {
  x++;
}

조건문

• 조건문은 참인 경우에 실행하는 명령의 집합입니다.
• javascript에서 조건문은 if...else와 switch 문이 있습니다.

if (condition) {
  statement_1;
} else {
  statement_2;
}

switch (expression) {
  case label_1:
    statements_1
    [break;]
  case label_2:
    statements_2
    [break;]
    ...
  default:
    statements_def
    [break;]
}

예외처리

• javascript의 예외처리는 throw와 try...catch...finally문을 사용합니다.

throw "Error2";   // String type
throw 42;         // Number type
throw true;       // Boolean type
throw {toString: function() { return "I'm an object!"; } };

try {
  writeMyFile(theData); //This may throw a error
} catch(e) {
  handleError(e); // If we got a error we handle it
} finally {
  closeMyFile(); // always close the resource
}

javascript 기초적인 문법은 반드시 알고 있어야 하므로 모르실때마다 꼭 확인하는 습관을 들이시기 바랍니다.

이 글의 동영상 강의입니다.

https://youtu.be/lwJLrv6zj04

* Nestjs 개발을 위해서는 Nodejs가 설치되어 있어야 합니다.

* Editor는 Visual Studio Code(VSCode)를 사용했습니다.

NestJS 프로젝트를 만들기 위해서는 Nestjs CLI(Command Line Interface)를 설치해야 합니다.

• 아래와 같이 Nestjs cli를 설치합니다.

npm i -g @nestjs/cli

• 설치가 완료되면 아래와 같이 CLI를 이용해 프로젝트를 만들 수 있습니다.

nest new project-name

• 생성된 프로젝트의 구조는 다음과 같습니다.
  • dist : typescript 코드를 컴파일해서 빌드한 .js 파일이 저장되는 폴더
  • node_moduels : package.json에 정의된 패키지 모듈이 설치되는 폴더
  • src : typescript 코드가 저장되는 사용자 소스 폴더
  • test : test 소스가 저장되는 폴더

• 자동생성된 프로젝트 소스 폴더의 구조는 다음과 같습니다.
  • app.controller.spec.ts : test용 소스 - controller를 테스트합니다.
  • app.controller.ts : controller 소스 - client의 request을 처리하고, response를 보냅니다. 
  • app.module.ts : module 소스 - 모듈을 정의합니다.(controller와 service 정의)
  • app.service.ts : service 소스 - controller가 요청한 비즈니스 로직을 처리합니다.
  • main.ts : 프로젝트 시작점(Entry Point)

• main.ts
  • 애플리케이션 Entry Point 즉, 시작 소스입니다.
  • 서버를 스타트하고 포트 설정, CORS 등을 정의합니다.

• package.json
  • 프로젝트의 설정 파일입니다.
  • 사용하는 모듈, 서버 실행 및 빌드등의 스크립트를 정의합니다.

프로젝트 실행

• VSCode 상단메뉴에서 터미널-새터미널을 클릭합니다.
• package.json에 정의된 실행 스크립트를 실행합니다.

npm start

• 브라우저에서 다음 URL을 입력합니다.

http://localhost:3000

• 브라우저에 다음과 같이 내용이 출력됩니다.

* 본 문서는 nestjs 홈페이지(https://docs.nestjs.com/)를 참조하였습니다.

* nestjs 한글 홈페이지 주소 : https://docs.nestjs.kr/

이 글의 동영상 강의입니다.

https://youtu.be/QniEcuwvLSU

Nest(NestJS)의 특징

• Nest는 nodejs 서버 애플리케이션을 구축하기 위한 프레임워크입니다.
• Nest는 서버 애플리케이션 개발시 필요한 많은 부분들을 기본적으로 제공하고 있습니다.
• Nest는 Express 기반으로 만들어졌습니다.
• Nest는Typescript를 사용합니다. javascript도 코딩이 가능합니다.
• Nest는 다음 요소를 포함합니다.
  • OOP - 객체지향 프로그래밍
  • FP - Functional 프로그래밍
  • FRP - Functional React 프로그래밍
• Nest는 외부 모듈을 자유롭게 이용할 수 있습니다.
• Nest는 unit 테스트와 e2e 테스트를 할 수 있는 툴을 제공합니다.

Nest의 탄생배경

• 최근 Nodejs로 인해 javascript를 이용한 풀스택(클라이언트+서버) 개발이 활발해졌습니다.
• javascript라는 한가지 언어로 개발을 하기 때문에 생산성을 향상시키고 빠른 개발이 가능해졌습니다.
• 그러나 Node.js의 높은 자유도로 인해 Architecture 구성이 어렵고 효과적이지 못했습니다.
• 이를 해결하기 위해 Angular의 아키텍처 사상을 기반으로 Nest가 만들어졌습니다.

Nest를 사용하면 좋은 점

• Nest는 Java의 Spring과 같이 규칙을 제공합니다. 
  이로 인해 개발자들이 아키텍처의 구성에 대해 고민해야 할 부분이 많이 줄어듭니다.
• 기본적으로 제공하는 라우팅, 보안등의 기능이 많이 탑재되어 있어 편리합니다.
• 외부모듈을 통한 확장이 얼마든지 가능합니다.
• Java+Spring 사용자라면 아키텍처 구조가 비슷해서 쉽게 배울 수 있습니다.
• Angular 사용자라면 기본적인 사용법이 동일하므로 쉽게 배울 수 있습니다.

이 글의 동영상 강의 입니다.

https://youtu.be/wb4qGjfocwI

Express에서 라우팅을 별도의 파일로 분리할 수 있습니다.

한개의 파일로 분리하는 경우

• 다음과 같이 router.js 파일을 만듭니다.

const express = require('express');
var router = express.Router();

router.get('/', function (req, res) {
  res.send('Express Server!');
});

module.exports = router;

• index.js 파일에서 router.js를 사용하도록 코드를 추가합니다.

const express = require('express');
const app = express();
 
app.listen(3000);

app.use(require('./router'));

여러개의 파일로 분리하는 경우

• user-router.js 파일을 만들고 다음 코드를 추가합니다.

const express = require('express');
var router = express.Router();

router.get('/', function (req, res) {
  res.send('This is user-router!');
});

module.exports = router;

• board-router.js 파일을 만들고 다음 코드를 추가합니다.

const express = require('express');
var router = express.Router();

router.get('/', function (req, res) {
  res.send('This is board-router!');
});

module.exports = router;

• index.js를 다음과 같이 수정합니다.

const express = require('express');
const app = express();
 
app.listen(3000);

app.use('/', require('./router'));
app.use('/user', require('./user-router'));
app.use('/board', require('./board-router'));

아래는 이 글의 동영상 강의입니다.

https://youtu.be/ceNqxXQMuKw

* 본 문서는 아래 사이트를 참고하여 작성하였습니다.
https://expressjs.com/ko/guide/using-middleware.html

Express는 client의 요청을 받아 처리할때 미들웨어라는 개념을 사용합니다.

Express 애플리케이션은 기본적으로 일련의 미들웨어 함수 호출입니다.

Express에는 다음과 같은 유형의 미들웨어가 있습니다.

• 애플리케이션 레벨 미들웨어
• 라우터 레벨 미들웨어
• 오류 처리 미들웨어
• 기본 제공 미들웨어
• 써드파티 미들웨어

애플리케이션 레벨 미들웨어

• 애플리케이션 미들웨어는 다음과 같이 사용할 수 있습니다.
• app.use(미들웨어);
• app.use(미들웨어1, 미들웨어2...);
• app.use에서 선언된 function이 미들웨어 입니다.

const express = require('express');
const app = express();
app.listen(3000);

app.use(function(req, res){
  res.send('Express Server!!!');
});

• 한개의 요청을 여러개의 미들웨어가 처리할 수 있습니다.
  • 요청 경로(path)가 포함되지 않은 요청은 항상 실행됩니다.
  • function에서 next 인자를 처리하면 하위 스택을 처리하게 됩니다.

app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

• client의 요청 경로(path)가 포함된 경우는 다음과 같이 처리합니다.
  • app.use(path, 미들웨어함수);

app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

• 다음은 라우트를 사용하는 방법입니다.
  라우트는 client의 요청을 http method별로 처리할 수 있습니다.
  • app.메소드(path, 미들웨어);

app.get('/user/:id', function (req, res, next) {
  res.send('USER');
});

• next를 사용해서 미들웨어를 여러개 실행할 수도 있습니다.

app.use('/user/:id', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

• 라우트 핸들러는 하나의 경로에 여러개의 라우트를 정의할 수 있습니다. 하지만 동일한 메소드를 2개 이상 만들고 앞에서 response를 처리하면 다음 메소드는 실행되지 않습니다.

app.get('/user/:id', function (req, res, next) {
  console.log('ID:', req.params.id);
  next();
}, function (req, res, next) {
  res.send('User Info');
});

// handler for the /user/:id path, which prints the user ID
app.get('/user/:id', function (req, res, next) {
  res.end(req.params.id);
});

라우터레벨 미들웨어

• express.Router()를 사용하면 라우터 레벨의 미들웨어를 사용할 수 있습니다.

var app = express();
var router = express.Router();

• 위 선언으로 라우터레벨 미들웨어를 다음과 같이 사용할 수 있습니다.
  라우터에서도 use와 method를 사용합니다.

// a middleware function with no mount path. This code is executed for every request to the router
router.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// a middleware sub-stack shows request info for any type of HTTP request to the /user/:id path
router.use('/user/:id', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// a middleware sub-stack that handles GET requests to the /user/:id path
router.get('/user/:id', function (req, res, next) {
  // if the user ID is 0, skip to the next router
  if (req.params.id == 0) next('route');
  // otherwise pass control to the next middleware function in this stack
  else next(); //
}, function (req, res, next) {
  // render a regular page
  res.render('regular');
});

// handler for the /user/:id path, which renders a special page
router.get('/user/:id', function (req, res, next) {
  console.log(req.params.id);
  res.render('special');
});

// mount the router on the app
app.use('/', router);

오류 처리 미들웨어

• 오류 처리 미들웨어는 function의 parameter 첫번째 인자로 error를 받아 처리합니다.

app.use(function(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

기본 제공 미들웨어

• express에서 기본적으로 제공하는 미들웨어가 있습니다.
• 다음은 기본제공 미들웨어 중 정적 모듈을 처리하는 static 미들웨어의 예제입니다.

app.use(express.static(__dirname+'/public'))

• static으로 html 처리
  • http://localhost:3000/index.html 로 요청이 올경우 /public/index.html을 찾아 응답하게 됩니다.
• static으로 이미지 처리
  • http://localhost:3000/logo.png 로 요청이 올경우 /public/logo.png를 찾아 응답하게 됩니다.

• index.html 처리하기
  • http://localhost:3000 을 응답하는 코드는 다음과 같습니다.

app.get('/', function(req, res) {
  res.sendFile(__dirname+'/public/index.html')
});

써드 파티 미들웨어

• express에서는 다양한 써드파티 미들웨어를 사용할 수 있습니다.
• 필요한 기능에 따라 npm install을 사용하여 모듈을 설치하여 사용합니다.
• 아래는 쿠키 구문 분석 미들웨어인 cookie-parser의 사용 방법 입니다.
• 우선 cookie-parser 설치합니다.

npm install cookie-parser

• 사용법은 다음과 같습니다.

var express = require('express');
var app = express();
var cookieParser = require('cookie-parser');

// load the cookie-parsing middleware
app.use(cookieParser());

• 써드파티 미들웨어는 다음 링크에서 확인할 수 있습니다.

https://expressjs.com/ko/resources/middleware.html

이상으로 express의 미들웨어에 대해 알아보았습니다.