프로그래머스 데브코스 15일차 with. TS 웹 풀스택

📚요약

지난 시간에 Express의 쿼리 스트링 사용법과 네이밍 규칙을 알아봤습니다. 이번 시간에는 Map에 Object 데이터를 넣는 실습을 해보고, Express에 대해 더 자세히 알아보겠습니다. 추가적으로 JS의 함수도 알아보겠습니다.

 

📖Map에 Object 데이터 넣어보기(실습)

간단한 실습으로 기본적으로 set 함수를 사용하면 됩니다.

let db = new Map();

let notebook = {
  productName: "Notebook",
  price: 2000000,
};

db.set(1, notebook);

🍯tip! 기존에 있는 객체에 객체 안에 있는 데이터를 넣고 싶은 경우 ...(전개 연산자)를 사용하면 쉽게 할 수 있다.

// 객체에 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으로 바꾸고, `npm install`을 실행해 보겠습니다.

npm install 후 화면

여러 파일 중 app.js를 살펴보면 익숙한 코드도 있고 처음 보는 코드도 있습니다. 전반적으로 훑어보고 실행을 시켜보겠습니다. 공식 홈페이지에서는 'DEBUG를 같이 실행시켜라'라는 느낌의 명령어가 있지만 `npm start`로 간단하게 실행만 시켜보겠습니다.

실행 후 접속 화면 & 아직 존재하지 않는 주소 접속 화면

실행시키면 위와 같은 화면이 뜹니다. 아직 Express에 대해 더 배워야할 부분들이 있기 때문에 여기까지만 실습하고 다음에 다시 보겠습니다. 여러 파일들을 살펴보면 전에 사용했던 http 모듈도 사용되는 것을 확인할 수 있습니다.

 

📖JS

📄함수

// 기본 function 키워드 사용
function name(parameters) {
  // 동작들...
  return
}

// 익명 함수 따로 이름이 없는 함수
let name = function (parameters) {
  // 동작들...
  return
}

// 화살표 함수(arrow function)
let name = (parameters) => {
  // 동작들...
  return
}

// 화살표 함수의 경우 파라미터가 하나인 경우 ()를 생략가능하고,
// 바로 return만 시키는 경우 {}와 return을 생략가능하다.
let name = parameter => returnSomething

 

다음 시간에 계속...

 

출처 & 참고

김송아 강사님의 강의

전개 구문, MDN, 2024.04.26