0918 Express - 객체 생성해서 전달 / express-generator 사용법

thinktank911 2025. 9. 18. 09:07

map object

map에 객체 담기

let db = new Map()

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

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

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

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

// map에 객체 담기
db.set(1, notebook)
db.set(2, cup)
db.set(3, chair)
db.set(4, poster);

express에서 객체로 REST API 설계 하여 전달

db map에 id 객체를 추가하는 방법
- product에 db.get(id)를 넣고 product.id 에 id를 대입한다.
- 또는 product["id"]에 id를 대입한다.

app.get('/:id', (req, res) => {
    let {id} = req.params;
    // id를 데이터 타입 숫자로 표현
    id = parseInt(id);

    // 예외처리 필요
    if(db.get(id) === undefined){
        res.json({
            message : "없는 상품입니다."
        })    
    }else{
        // 자바스크립트 객체 추가
        product = db.get(id);
        // product.id = id;
        product["id"] = id;

        res.json(product)
    }
})

express + map + 객체 추가 실습 : 유튜버

1. express 모듈을 셋팅한다

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

2. 데이터를 map 형태로 셋팅한다.

// 데이터 셋팅
let youtuber1 = {
    channelTitle : "KoreanCryingGuy",
    sub : "168만명",
    videoNum : "573개"
}

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

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

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

3. REST API 설계를 한다.

예외 처리

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

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

express 구조 이해해보기

웹 프레임워크 = 내가 만들고 싶은 웹 서비스를 구현하는 데 필요한 모든 일을 틀 안에서 할 수 있는 것
사이트 참조 : https://expressjs.com/
Express 애플리케이션 생성기
- 애플리케이션의 골격을 신속하게 작성하려면 애플리케이션 생성기 도구인 express를 사용
- 생성기 설치 : npm install -g express-generator
- 생성기 실행 : express

generator 실행하기

express-generator는 Express.js에서 제공하는 프로젝트 생성기로, express-generator를 사용하면 프로젝트의 기본 구조를 자동으로 생성해준다. 따라서 초심자가 빠르게 프로젝트를 시작하기에 좋은 방법이며, express-generator를 이용해 생성된 프로젝트는 npm start 명령어를 이용해 실행할 수 있다.

※ index.js 실행하기

<이슈>

1) express 모듈이 설치되어 있지 않다는 에러 떠서 npm install express 해서 설치해준다. 전역으로 express를 설치하지 않아서 생긴 문제

2) 그래도 실행되지 않아서 package.json 디펜던시에 있는 모듈을 다 설치하기 위해 npm install을 한다. express-generator를 통해서 프로젝트 기본구조를 생성할 때 디펜던시 모듈은 자동으로 깔리지 않는 모양이다.
3) 실행방법 변경 : 코드러너를 통해 실행을 하려고 했는데 안되서 터미널에서 npm start로 실행하니 잘 되었다.

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

화살표 함수를 한 번 더 되짚어 보았다.

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

// 모듈화 방법
let add2 = function(x,y){
    return x + y
}
// 화살표 함수 (arrow function)
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));

express를 통해 웹서버를 구동하는 간단한 방법에 대해 배웠는데 이것만으로는 큰 프로젝트 개발을 하기엔 부족하지 않을까 라는 생각을 막연하게 했었는데, express-generator로 큰 프로젝트 진행 시 필요한 기본 폴더 구조와 개발환경을 빠르게 셋팅할 수 있다는 걸 배웠다. express의 기본 구조인 '서버실행 - 미들웨어 - 라우팅 - 모듈화 - 에러처리' 를 구체적으로 어떤 폴더에서 포함하고 있는지, 추가된 기능은 어떤 부분인지 express-generator를 통해 만들어 준 폴더 구조를 뜯어보면 찬찬히 공부해야겠다.

추후 프로젝트를 진행할 때 적용하는 데 도움이 될 것 같다.

더불어 nestJs와의 차이는 무엇인지 비교해 볼 예정이다.