백엔드 기초: map object, 함수

date/ 24.09.03.

 /* 공부하며 정리한 내용이니 정확하지 않을 수 있습니다. 잘못된 내용은 댓글로 알려주세요!*/

 

 

📌

어제까지만 하더라도 우리는 string만 db에 담아 화면에 뿌려보았습니다. 음... 저는 싫어요. 다른 것도 담고 싶다면 어떻게 하면 좋을까요?

const express = require('express')
const app = express()
app.listen(1234)

app.get('/:id', function(req, res) {
	let {id} = req.params
    id = parseInt(id)
    
    if (db.get(id) == undefined) {
    	res.json({
        	message : "없는 상품입니다."
        })
    } else {
    	res.json({
        	id: id,
            productName: db.get(id)
        })
    }
})

let db = new Map()

let notebook = {
	productName : "Notebook",
    price : 200000
}

let cup = {
	productName : "Cup",
    price : 3000
}

let chair = {
	productName : "Chair",
    price : 100000
}

let poster = {
	productName : "Poster",
    price : 20000
}

db.set(1, notebook)
db.set(2, cup)
db.set(3, chair)
db.set(4, poster)

console.log(db)

 

이렇게 코드를 작성해 주었습니다.

 

제가 작성한 대로 콘솔에 잘 찍히는군요.

 

 

브라우저에서도 정상적으로 출력되는 것을 볼 수 있습니다. 그럼 객체를 API를 통해 뽑아보겠습니다.

 

📌

const express = require('express')
const app = express()
app.listen(1234)

app.get('/:id',function(req, res) {
    let {id} = req.params
    id = parseInt(id)

    if (db.get(id) == undefined) {
        res.json({
            message : "없는 상품입니다."
        })
    } else {
        product = db.get(id)
        product.id = id //일케 쓰면 아이디가 추가되어서 나옴

        res.json(product)
    }
})

 

자바스크립트이기 때문에 간단하게 아이디를 추가해서 출력할 수 있었습니다.

 

그럼 어제 만들었던 유튜버 페이지에도 적용해 express + map + 객체를 실습해 보겠습니다.

 

 

📌

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

app.listen(1020)

//REST API 설계
app.get('/youtuber/:id', function(req, res) {
	let id = req.params.id
    id = parseInt(id)
    const youtuber = db.get(id)
    
    if (youtuber === undefined) {
    	res.json({
        	message : "유튜버 정보를 찾을 수 없습니다."
        })
    } else {
    	res.json(youtuber)
    }
})

//데이터 셋팅
let youtuber1 = {
	channelTitle : "heavytalker",
    subscriber : "59.7만명",
    videos : "957개"
}

let youtuber2 = {
    channelTitle : "로미인디요",
    subscriber : "102만명",
    videos : "5992개"
}

let youtuber3 = {
    channelTitle : "romiwaves",
    subscriber : "39만명",
    videos : "8개"
}

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

 

 

제대로 작동하는군요. 다행입니다. 야호!

 

 

📌

express의 구조를 이해해 봅시다.

 

express는 웹 프레임워크입니다. 웹 프레임워크는 내가 만들고 싶은 웹 서비스를 구현하는데 필요한 모든 일을 틀 안에서 할 수 있도록 합니다. 그 구조를 몇 가지 주요 개념으로 나누어 살펴보겠습니다.

 

애플리케이션

Express 애플리케이션은 express() 함수를 호출해서 만듭니다. 새로운 Express 애플리케이션 객체를 반환하며, 객체를 사용해 서버 설정, 라우트 정의, 미들웨어 추가가 가능합니다.

 

미들웨어

Express 애플리케이션의 요청-응답 사이에 동작하는 함수입니다. request와 response에 접근하거나, 다음 미들웨어로 제어를 넘길 수 있습니다.

 

• 애플리케이션 수준 미들웨어: 애플리케이션 전체에서 동작하는 미들웨어입니다.
• 라우터 수준 미들웨어: 특정 라우트에서만 동작하는 미들웨어입니다.
• 기본 제공 미들웨어: Express에 내장된 미들웨어로, 예를 들어 express.json()은 JSON 형식의 요청 본문을 해석합니다.
• 서드파티 미들웨어: 외부 라이브러리에서 제공하는 미들웨어입니다. 예를 들어, body-parser, cookie-parser 등이 있습니다.

 

라우터

 

라우터는 특정 URL 패턴과 HTTP 메서드(GET, POST 등)에 따라 요청을 처리하는 방법을 정의합니다. 경로(path)와 그 경로에 대한 처리 함수(handler)로 구성되어 있습니다.

 

Request, response

Request에는 클라이언트의 요청에 대한 정보가 담겨 있습니다. 예를 들어, URL, 요청 본문, HTTP 헤더 등을 포함합니다. 반면 response에서는 서버가 클라이언트에게 보내는 응답을 관리합니다. 예를 들어, 응답 상태 코드 설정, JSON 데이터 전송 등을 할 수 있습니다.

 

 

www와 app.js 파일도 훑어보겠습니다.

 

www

//모듈 가져오기
var app = require('../app'); //app.js 가져옴
var debug = require('debug')('express-base:server');
var http = require('http');

//포트 설정 - 3000이 기본값, 그렇지만 설정을 바꿔 줄 수 있음
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

//우리가 createServer하던걸 알아서 해주고 있었음
var server = http.createServer(app);

 

 

 

 

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express(); //우리가 손으로 적던거 알아서 해주네?

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
//미들웨어: http 외 다른 모듈들도 사용중
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')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app; //이 app.js를 다른 곳에서 모듈처럼 활용할 수 있도록 모듈화

 

 

📌

자바스크립트에서 사용할 수 있는 4가지 종류의 함수를 살펴보겠습니다.

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

//2
let add2 = function (x,y) {
    return x + y
}

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

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

 

점차 간단해지는 게 개발자들답다 싶네요(

 

 

 

 

 

 

 

/*사족입니다*/

• 이... 이게 뭐지... ㅋㅋㅋㅋ 역대급 혼란의 도가니탕~~~ 그래도 저번에 한 번 했다고 객체를 활용하는 것까진 제대로 이해했다. 문제는 express 구조... 랑 generator 파트. 쩝. 아무래도 한 번 더 강의를 들어야겠다...