[ TIL ] Day 17 - Node.js / Express.js 초기 셋팅하기 📖 (왕 초보 기초!)

🗓️ 수업 일자 : 2025.10.20

✨ 오늘의 수업 평가 :  [ GOOD ]  배움이 팡팡 터진 날 🍿💡

 

📝  오늘 배운 내용  
- Node.js란?

- Express.js 셋팅하기

- Express.js API 서버 연동

 

---

1. Node.js란?

Node.js의 특징 

- 브라우저가 아닌 서버측에서도 JS를 사용할 수 있음

- Single Thread(단일 스레드)를 이용해 작업하며, 동시에 많은 요청을 받아도 비동기로 처리함

- Non-blocking I/O 처리가 빠름 : 작업이 끝날때 까지 기다리지 않고 다른 작업을 먼저 수행

- Event-driven Programming : 이벤트가 발생하면 콜백함수를 실행하게 됨 ⇒ 해당 방식이 Express.js에서 사용됨

- 기능 단위로 코드를 나누고, require ~ import~ 로 재사용 가능

 

 

 

2. Express.js 셋팅하기 

Express.js 바로가기 : https://expressjs.com/ko/

Express - Node.js web application framework

 

Express.js 특징

 - node.js에서 가장 많이 사용하는 웹 서버 프레임워크

 - 빠르고, 사용법이 자유롭고, 배울 문법이 적음

 - 자유도가 너무 높아 일관성이 깨지거나, 설계 능력이 많이 필요로 하는 프레임워크이므로, 최근 Nest.js가 급부상 하고 있음

 

Express.js 사용하기

1. 프로젝트 폴더에 Express.js 다운로드 : (in terminal) npm install express.js
2. 설치 확인을 위하여 app.js 파일을 만든 뒤 아래의 코드를 삽입 후 저장
3. 정상 동작 확인하기 : (in terminal) node app.js 

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

출처 : express.js 홈페이지 (https://expressjs.com/ko/starter/hello-world.html)

 

app.listen() 구문을 통해 터미널에 메세지 출력

 

app.get() 구문을 통해 localhost:3000 포트에 내용 출력

 

 

npm 모듈 : nodemon

: 일반적인 서버 작업 시, 포트를 처음 연결 할 때만 전체 파일을 읽기 때문에 변경 사항이 생기면 포트 연결을 끊었다가 다시 연결하여 새롭게 파일을 불러와야 합니다. 이러한 불편한 작업 환경을 개선하기 위하여 "nodemon"을 사용하게 됩니다. "nodemon"이 실행되면 서버 내용이 바뀔때마다 알아서 다시 접속하여 변경된 내용을 보여줍니다.

nodemon 사용 시 서버 내용이 수정되면 자동으로 서버를 재실행 하여 변경된 내용을 반영 해 줌

 

VS Code 확장 프로그램 : REST Client 

: .http 확장자로 되어 있는 파일 안에 API 요청 내용을 한번에 작성하고, 손쉽게 서버 작동을 확인하는 VS Code 확장 프로그램입니다.

 

 

 

 

+ 추가 프레임워크란?

- 코드를 작성하는 구조와 규칙이 미리 정해진 개발 틀

- 개발자가 처음부터 모든걸 만들 지 않고, 이미 정해져 있는 틀 안에서 필요한 부분을 적절히 채워 나감

- 자동차 공장에서 외부 골격을 만드는 틀(= 프레임워크)이 있고,
  그 틀에 맞춰서 사람이나 기계들이 부속품을 하나 하나 조립(=개발자의 코딩)

 

+ 추가  PORT(포트)란?

- 선박이 정박하는 항구 = PORT에서 유래된 말로, 데이터가 드나드는 "출입구"의 역할을 의미

- 하나의 컴퓨터 안에서 여러 프로그램(또는 서비스)를 실행하기 위해서 숫자로 구분한 "통신 통로 번호"  

- 동일한 포트 번호를 사용 할 수 없다 (에러 발생 후 나중에 실행한 app.js 바로 종료)

터미널 1번에서 3000번 포트를 먼저 구동

터미널 2번에서 이미 사용한 3000번 포트를 구동하자, 에러가 발생되며 종료 됨

 

+ 추가 npm 관리하기

1) 서버를 개발 할 때 필요한 npm 설치하기 : npm install --save-dev 패키지 이름

: 개발 환경에서는 필요하지만, 배포/운영 시에는 필요없는 패키지들이 있습니다. 이런 패키지를 설치 할 때에는 "--save-dev"라는 명령어를 함께 써서 설치하면 됩니다. 이렇게 설치하면, 실제 배포를 진행 할 때 패키지에서 빠지게 됩니다.

 

2) 패키지를 설치 할 때에는 가능하면 전역(global, 글로벌)로 설치하지 말고, 필요 할 때마다 프로젝트 폴더에 설치하여 사용하는 것이 좋다 : 글로벌로설치 할 경우 전역 npm 폴더(global) 내에 너무 많은 패키지가 쌓이면 느려질 수 있고, 과거에 설치 한 패키지에 대해서는 버전 충돌이 일어날 수 도 있기 때문이다 

 

 

 

 

3. Express.js API 서버 연동

0) 기본 구조

const app = express() // express 프레임 워크를 사용해 app을 만들 수 있게 됨

app.메서드(패스 또는 루트 경로, (request, respons)=>{ 
   메서드를 통해 실행 될 내용
});

 

 

1) GET : 데이터 받기

[app.js] 파일

import items from './itemMockList.js';

const app = express() // express 프레임 워크를 사용해 app을 만들 수 있게 됨

app.get('/items', (req, res)=>{ 
    // 사용하는 쿼리 파라미터에 따라 내용 다름 
    // 예시 : item 정보를 가져오는 숫자를 count쿼리로 지정
    
    let newItems; 
    
    const count = Number(req.query.count); 
    // 쿼리 파라미터는 문자열로 넘어오기 때문에 숫자로 형변환
    
    if(count){
        // count 값이 있으면, 해당 값 만큼만 출력
    	newItems = items.slice(0, count);
    }else{
        // count 값이 없으면, 전체 출력
        newItems = items;
    }
    
    res.send(newItems);
});

[ tasks.http ]

GET http://localhost:3000/items?count=3

=> items 3개 출력

 

 

2) POST : 데이터 등록

[app.js] 파일

import items from './itemMockList.js';

const app = express(); // express 프레임 워크를 사용해 app을 만들 수 있게 됨
app.use(express.json()); // json 형식의 데이터를 읽을 수 있도록 셋팅

app.post('/items', (req, res)=>{ 
    const data = req.body;
    // 데이터 정보 이외에 필요한 데이터는 아래에 추가
    // 예시 : 등록일자 추가
    
    const createDate = new Date();
    
    const newItem = {
        ...data,
        createAt = createDate,
    }
    
    // 기존 items에 새로 만든 item을 넣고, 실행 결과에 대한 응답 코드로 201 사용
    items.push(newItem);
    res.status(201).send(newItem);
});

[ tasks.http ]

POST http://localhost:3000/items
Content-Type: application/json
# POST 등록 시 header에 작성했던 데이터의 타입에 대해 기재

{
    "name" : "가습기",
    "description" : "건조한 공기를 촉촉하게"
}

=> items 1개 추가

 

 

3) PATCH : 데이터 수정

[app.js] 파일

import items from './itemMockList.js';

const app = express(); // express 프레임 워크를 사용해 app을 만들 수 있게 됨
app.use(express.json()); // json 형식의 데이터를 읽을 수 있도록 셋팅

app.patch('/items/:id', (req, res)=>{ 
    // 쿼리 파라미터로 id값을 받아온 뒤 숫자형으로 변경
    const id = Number(req.params.id);
    
    // 변경한 id를 기준으로 items에서 변경할 값 찾음
    const item = items.find((item) => item.id === id);
    
    if (item) {
        // 변경 할 item이 있다면 그 item의 키를 찾아서 값을 변경함
        Object.keys(req.body).forEach((key) => {
            item[key] = req.body[key];
        });
        res.send(item);
      
    } else {
        // 변경 할 item이 없다면 아래의 에러 응답코드를 내보냄
        res.status(404).send({ message: 'Cannot find given id' });
    }
});

[ tasks.http ]

PATCH http://localhost:3000/items/3
Content-Type: application/json

{
    "name" : "선풍기"
}

=> id가 "3"인 items의 name 변경

 

 

4) DELETE : 데이터 삭제

[app.js] 파일

import items from './itemMockList.js';

const app = express(); // express 프레임 워크를 사용해 app을 만들 수 있게 됨

app.delete('/items/:id', (req, res) => {

    // 쿼리파라미터 id의 값을 찾아와 숫자로 형변환 진행
    const id = Number(req.params.id);
    
    // items에서 위의 id와 일치하는 데이터의 인덱스를 가져옴 
    const itemIdx = items.findIndex((item) => item.id === id);
    
    if (itemIdx !== -1) {
        // itemIdx의 값이 있음 = -1이 아님 
        // 그런 경우, items에서 itemIdx에 해당하는 인덱스 값을 제거함
        const [deletedItem] = items.splice(itemIdx, 1);
        
        res.send(deletedItem);
    } else {
        // // itemIdx의 값이 없는 경우, 아래의 에러 응답코드와 메세지를 내보냄
        res.status(404).send({ message: 'Cannot find given id' });
    }
});

[ tasks.http ]

DELETE http://localhost:3000/items/5

=> id가 "5"인 item 삭제

 

---

 

📃 내일은 뭘 배울까 🤔

- Express.js 여러 기능들

- 데이터베이스 연동하기