백엔드(6)-express(3)

map 에 객체 저장하기

//express 모듈 셋팅
const express = require('express')
const app = express() 
app.listen(1234)

// 데이터 셋팅
let youtuber1= {
  channelTitle: "십오야",
  sub: "593만명",
  videoNum: "993개"
}

let youtuber2= {
  channelTitle: "침착맨",
  sub: "227만명",
  videoNum: "6600개"
}

let youtuber3= {
  channelTitle: "테오",
  sub: "54.8만명",
  videoNum: "726개"
}

let db=new Map()
db.set(1,youtuber1)
db.set(2,youtuber2)
db.set(3,youtuber3)

// REST API 설계
app.get('/youtuber/:id', function (req, res) {
  let {id} = req.params
  id=parseInt(id)

  const youtuber = db.get(id)
  if(youtuber==undefined) {
    res.json({
      message: "유튜버 정보를 찾을 수 없습니다."
    })
  }
  else
    res.json(youtuber)
})

1️⃣ 모듈 셋팅

2️⃣ 객체에 데이터 저장 (유튜버 객체: 채널 이름, 구독자 수, 비디오 수)

3️⃣ map 에 key는 숫자로, value는 객체로 저장

4️⃣ url 에 입력한 id 값대로 객체 불러오기 

/youtuber/1 을 입력했을 때

/youtuber/2 를 입력했을 때

저장되지 않은 id 의 객체를 불러오려 할 때

---

Express 구조

express : 웹 프레임 워크, 내가 만들고 싶은 웹 서비스를 구현하는 데 필요한 모든 일을 틀 안에서 할 수 있는 것

➡️ express를 시작하는 방식은 두 가지가 있다. 첫 번째는 express-generator를 사용하여 기초 구조를 다 잡는 방식이 있고, 두 번째는 직접 구조를 잡는 방식이 있다. 

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}`)
})

앱은 서버를 시작하며 3000번 포트에서 연결을 청취한다. 앱은 루트 URL(/) 또는 라우트에 대한 요청에 “Hello World!”로 응답하고 다른 모든 경로에 대해서는 404 Not Found로 응답한다.

 

generator 사용하기

 

bin > www 

var app = require('../app');
var debug = require('debug')('express-base:server'); //콘솔창에 log 찍음
var http = require('http');

모듈 가져오기

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

포트 설정, 3000 이 기본 값

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

서버 생성

 

app.js

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

프로젝트 셋팅

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 외의 다른 모듈) 연결

module.exports = app;

모듈화

---

번외

자바스크립트 함수 4가지 종류

function add1(x,y){
  return x + y
}

let add2 = function(x,y) { // 모듈화
  return x + y
}

const add3= (x,y) => { // 화살표 함수 
  return x + y
}

var add4 = (x,y) => x+y

console.log(add1(1,2))
console.log(add2(1,2))
console.log(add3(1,2))
console.log(add4(1,2))

➡️함수의 모양은 다르나 모두 같은 기능을 수행하고 있음을 확인할 수 있다. 

---

🌟 배운 점

오늘은 map 에 객체를 저장하는 법을 배웠는데, 이제 객체와 익숙해지고 map 도 원래 알던 것이었기 때문에 어려운 점은 없었다. 근데 express-generator 실습하는 부분에서 이게 뭐지? 싶어서 좀 당황했다. 설명을 들어보니, 그냥 express 를 시작하는 방법 중에 하나라고 한다. 프로젝트의 규모가 크면 일일이 설정을 하는 것이 번거로우니 보통 generator를 사용한다고 한다. 아직 좀 낯설고 무슨 역할을 하는지 잘 모르겠지만 차차 공부를 해봐야겠다.