지난 시간에 Express의 쿼리 스트링 사용법과 네이밍 규칙을 알아봤습니다.
이번 시간에는 Map에 Object 데이터를 넣는 실습을 해보고, Express에 대해 더 자세히 알아보겠습니다.
추가적으로 JS의 함수도 알아보겠습니다
Map에 Object 데이터 넣어보기
간단한 실습으로 기본적으로 set 함수를 사용하면 됩니다.
let db = new Map();
let notebook = {
productName: "Notebook",
price: 2000000,
};
db.set(1, notebook);
// 객체에 id 값 추가
// 기존 추가 방법
const product = db.get(id);
product[id] = id; // or product.id = id;
res.json(product);
// ...(전개 연산자) 사용
res.json({
id: id,
...db.get(id),
});Express
npm의 express 페이지를 잘 살펴보면 Express의 공식 홈페이지가 나와있습니다. 공식 홈페이지를 보면 설명이 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다 라고 나와 있습니다.
실습
공식 홈페이지에서 제공하는 Hello World! 실행 예제를 살펴보겠습니다.
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})위 예제를 보면 지금까지 사용해왔던 부분과 크게 코드의 차이가 없는 것을 볼 수 있습니다. 유일한 차이는 listen 함수 에 콜백 함수를 넘겨줬습니다.
다음 예제를 보겠습니다. 해당 예제를 위해서는 'express-generator'를 설치해야 합니다. npm install express-generaotr -g로 전역으로 설치하고, express --view=pug myapp으로 myapp 폴더를 만들어 보겠습니다. 성공하게 되면 여러 폴더들이 생성됩니다. 이처럼 기본적인 틀을 제공해주기 때문에 프레임워크라고 부릅니다. 이를 실행하기 위해서는 필요한 모듈들을 설치해야 하기 때문에 터미널의 디렉토리를 myapp으로 바꾸고, pnpm install을 실행해 보겠습니다.
pnpm install 후 화면
여러 파일 중 app.js를 살펴보면 익숙한 코드도 있고 처음 보는 코드도 있습니다. 전반적으로 훑어보고 실행을 시켜보겠습니다. 공식 홈페이지에서는 'DEBUG를 같이 실행시켜라'라는 느낌의 명령어가 있지만 pnpm start로 간단하게 실행만 시켜보겠습니다.
 |  |
|---|
실행 후 접속 화면 & 아직 존재하지 않는 주소 접속 화면
실행시키면 위와 같은 화면이 뜹니다. 여러 파일들을 살펴보면 전에 사용했던 http 모듈도 사용되는 것을 확인할 수 있습니다.
www 훑어보기
핵심 파일 2개를 알아볼게요.
|
--|--|
bin/www 에는 express 환경 설정에 대한 코드가 있어요.
var server = http.createServer(app); 를 통해 http 모듈로 서버를 열고 있어요.
app.js 훑어보기
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');처럼 view를 셋업하는 기능도 있어요.
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));이 부분은 기본 http 말고 미들웨어를 활용하는 공간이에요.
JS의 4가지 함수
// 기본 function 키워드 사용
function name(parameters) {
// 동작들...
return
}
// 익명 함수 따로 이름이 없는 함수
let name = function (parameters) {
// 동작들...
return
}
// 화살표 함수(arrow function)
let name = (parameters) => {
// 동작들...
return
}
// 화살표 함수의 경우 파라미터가 하나인 경우 ()를 생략가능하고,
// 바로 return만 시키는 경우 {}와 return을 생략가능하다.
let name = parameter => returnSomething