TIL Programmers - express, Map

map Object

Key(Id)	Value (Productname)
1	“Notebook”, 20000,
2	“Cup”, 7000
3	“Chair”, 100000
4	“Poster”, 20000

• 위의 표를 기반으로 새로운 Map 을 작성한다.
• Map 안의 Value로 Object 도 가능함을 알 수 있다.

/** map-demo.js */
const db = new Map();

const generateProduct = (productName, price) => {
  return {
    productName,
    price,
  };
};

db.set(1, generateProduct("Notebook", 20000));
db.set(2, generateProduct("Cup", 7000));
db.set(3, generateProduct("Chiar", 100000));
db.set(4, generateProduct("Poster", 35000));

exports.db = db

Map 과 express 연동

• 위에서 작성한 map-demo를 모듈로써 사용

/** app.js */
const {db} = require("./map-demo");

const express = require("express");
const port = 3000;

// express 객체 사용 선언
const app = express();

app.get("/:id", (req, res) => {
  let { id } = req.params;
  id = +id;
  if (db.get(id) === undefined) {
    res.json({
      message: "없는 메세지 입니다.",
    });
  } else {
    const product = { ...db.get(id) };
    product.id = id;
    res.json(product);
  }
});

app.listen(3000);

• localhost:3000/3 접속 결과

 {
  "productName": "Chair",
  "price": 100000,
  "id": 3
	}

Express 구조 이해하기

Express - Node.js web application framework

express 생성기를 사용한 프로젝트 생성

$ npm i express-generator -g
$ express

• express-generator 를 설치하면 터미널에서 express 명령어로 프로젝트 구조를 자동으로 생성할 수 있다.

|-- ./app.js
|-- ./bin
|   `-- ./bin/www
|-- ./package.json
|-- ./public
|   |-- ./public/images
|   |-- ./public/javascripts
|   `-- ./public/stylesheets
|       `-- ./public/stylesheets/style.css
|-- ./routes
|   |-- ./routes/index.js
|   `-- ./routes/users.js
`-- ./views
    |-- ./views/error.jade
    |-- ./views/index.jade
    `-- ./views/layout.jade

• tree -L 3 -f 명령어로 확인한 프로젝트 구조이다.
• app.use 는 사용을 의미
• 구조 및 파일내의 코드들들 보면 알수 있는 것은, 라우팅 과 비즈니스 로직이 분리 되어있음을 알 수 있다.
• 정확한 구조 파악은 express 좀 더 익히고 나서!

JS의 함수

• JS 에서 함수는 일급객체 이다.
  • 값으로 전달이 가능하다는 것!

// 함수 선언식
// 함수선언식은 '호이스팅' 에 의해 소스코드 내부 어느 위치에 있든 항상 최상단 선언된다.
function add1(x,y) {
	return x+y;
	}

// 함수 표현식
// 실행 흐름이 함수 표현식에 까지 와서야 함수를 사용할 수 있다.
const add2 = function(x,y) {
	return x+y;
	}
	
// 화살표 함수
const add3 = (x,y) => x+y;

• 화살표함수 또한 함수 표현식과 같이 실행흐름이 함수까지 오지 않는 한 사용이 불가능하다.
• function 과 arrow function 의 가장 중요한 차이점은 this 의 바인딩에 있다.