Front/Node.js

Express 모듈을 사용하여 서버 만들기

oodada 2024. 12. 9. 22:51

Express 모듈을 사용하여 서버 만들기

1. Express 란?

http, url, fs 등 Node.js의 기본 모듈을 사용하여 서버를 만들 수 있지만, Express 모듈을 사용하면 더 쉽고 강력한 서버를 만들 수 있습니다.
자바의 Spring, Python의 Django와 같이 Node.js의 대표적인 웹 프레임워크로 Request, Response 객체를 사용하여 HTTP 요청을 처리할 수 있습니다.

- Express를 사용하는 이유

간단하고 직관적인 API
미들웨어를 통한 유연한 기능 확장
강력한 라우팅 시스템
큰 커뮤니티와 풍부한 생태계

- 참조

프레임워크란 개발자가 웹 개발에 필요한 기능을 미리 구현해 놓은 것으로, 개발자가 필요한 기능을 사용하기만 하면 되기 때문에 개발 시간을 단축할 수 있습니다. 웹을 만드는 회사는 대부분 프레임워크를 사용하여 개발합니다.

라이브러리란 개발자가 필요한 기능을 직접 구현해야 하는 것으로, 개발자가 직접 구현해야 하기 때문에 개발 시간이 더 오래 걸릴 수 있습니다.

자바스크립트의 클라이언트 사이드 프레임워크: React, Vue, Angular
자바스크립트의 서버 사이드 프레임워크: Express, Koa, Nest.js

2. Express 설치와 사용

- Express 설치

# 프로젝트 초기화
npm init -y

# Express 설치
npm install express

- nodemon 설치

nodemon은 파일이 수정될 때마다 서버를 자동으로 재시작해주는 패키지로 개발 시간을 단축할 수 있음.

# nodemon 설치
npm install -g nodemon

- package.json 수정

{
  "name": "my-express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index.js" // nodemon으로 서버 실행
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

3. Express 서버 만들기

- Express 서버 만들기

get() 메서드: 해당 경로로 GET 요청이 오면 콜백 함수를 실행.
send() 메서드: 클라이언트에 응답을 보냄.

// index.js
const express = require('express');
const app = express();

// 기본 라우트에 GET 요청이 오면 콜백 함수 실행
app.get('/', (req, res) => {
  // send() 메서드: 클라이언트에 응답을 보냄.
  // send() 메서드 하나로 응답을 보내고 종료하는 것까지 가능
  res.send('Hello, Express!');
});

// 서버 실행
app.listen(8080, () => {
  console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

- Express 서버 실행

nodemon index.js

터미널에서 nodemon index.js 명령어를 실행 후, 크롬의 주소창에 http://localhost:8080을 입력하면, "Hello, Express!"가 출력됩니다.

- Express 서버 파일 읽어오기

$ touch index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Express Server</title>
</head>
<body>
  <h1>Express Server</h1>
  <p>파일을 읽어와 응답하는 서버</p>
</body>
</html>

// index.js
const express = require('express');

const app = express();
// 서버가 실행될 포트 설정
// 클라우드 배포에 환경변수의 PORT 사용하거나 로컬 서버 사용
app.set('port', process.env.PORT || 8080);

// 데이터를 get 요청으로 받아올 때
// '/' 경로로 GET 요청이 오면 index.html 파일을 응답으로 보냄
app.get('/', (req, res) => {
  // sendFile() 메서드: 파일을 응답 본문으로 보냄
  res.sendFile(__dirname + '/index.html');
});

// 서버 실행
// app.get('port')로 설정한 포트에서 서버 실행
app.listen(app.get('port'), () => {
  console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

3. http 요청 메서드

클라이언트(프론트엔드)가 서버(백엔드)에 요청을 보낼 때 사용하는 메서드로 요청의 목적을 명시하기 위해 사용됨.

GET: 데이터 가져올 때 사용
HEAD: 문서 정보를 가져올 때 사용
POST: 데이터 전송할 때 사용
PUT: 데이터 업데이트할 때 사용
PATCH: 데이터 일부 업데이트할 때 사용
DELETE: 데이터 삭제할 때 사용

4. Express 서버에 라우트 추가하기

post() 메서드: 해당 경로로 POST 요청이 오면 콜백 함수를 실행.
URL 파라미터: :를 사용하여 동적인 URL을 사용할 수 있음.
req.params: URL 파라미터를 조회할 수 있음.

// index.js
const express = require('express');
const app = express();

app.set('port', process.env.PORT || 8080);

// 전체 게시글 목록 조회
app.get('/posts', (req, res) => {
   res.send('전체 게시글 목록');
});

// 새 게시글 작성
app.post('/posts', (req, res) => {
   res.send('새 게시글이 작성되었습니다.');
});

// 특정 게시글 조회
app.get('/posts/:id', (req, res) => {
   res.send(`${req.params.id}번 게시글 내용`);
});

// 특정 게시글 수정
app.put('/posts/:id', (req, res) => {
   res.send(`${req.params.id}번 게시글이 수정되었습니다.`);
});

// 특정 게시글 삭제
app.delete('/posts/:id', (req, res) => {
   res.send(`${req.params.id}번 게시글이 삭제되었습니다.`);
});

// 서버 실행
app.listen(app.get('port'), () => {
   console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

전체 게시글 목록 보기 : GET http://localhost:8080/posts
특정 게시글 보기 : GET http://localhost:8080/posts/1
새 게시글 작성 : POST http://localhost:8080/posts
게시글 수정 : PUT http://localhost:8080/posts/1
게시글 삭제 : DELETE http://localhost:8080/posts/1

5. Express 서버에 미들웨어 추가하기

- 미들웨어란?

요청(req)과 응답(res) 사이에 실행되는 함수.
요청과 응답을 조작하거나, 요청에 대한 응답을 보내기 전에 중간 처리를 할 수 있음.

- 미들웨어 추가하기

app.use() 메서드를 사용하여 미들웨어를 추가.

// index.js
const express = require('express');
const app = express();

app.set('port', process.env.PORT || 8080);

// 1. 로깅 미들웨어 - 어떤 요청이 왔는지 확인
app.use((req, res, next) => {
    console.log('-------------------');
    console.log('새로운 요청이 왔어요!');
    console.log('요청 종류:', req.method);
    console.log('요청 주소:', req.url);
    console.log('-------------------');
    next(); // 
});

// 게시글 목록 조회
app.get('/posts', (req, res) => {
    res.send('전체 게시글 목록');
});

// 게시글 작성
app.post('/posts', (req, res) => {
    console.log('작성된 글:', req.body);  // JSON 미들웨어 덕분에 사용 가능
    res.send('게시글이 작성되었습니다.');
});

app.listen(app.get('port'), () => {
    console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

localhost:3000에 접속하면, 콘솔에 요청 방식(GET)과 요청 주소(/)가 출력됨.
localhost:3000/users에 접속하면, 콘솔에 요청 방식(GET)과 요청 주소(/users)가 출력됨.

6. Express 서버에 정적 파일 제공하기

- 정적 파일이란?

서버에서 변경 없이 그대로 클라이언트에 전달되는 파일.

html 내부에 이미지를 띄우려면 이미지 파일을 서버에서 클라이언트로 전달해야 함.
html은 이미지 파일이 있는 경로를 참조하여 이미지를 띄움.
HTML, CSS, JavaScript, 이미지, 폰트 등.

- 정적 파일 제공하기

public 폴더에 cat.jpg 파일을 생성.

my-express-app/
├── public/                # 정적 파일들이 위치할 폴더
│   ├── images/           # 이미지 파일들
│   │   └── cat.jpg
│   ├── css/             # CSS 파일들
│   │   └── style.css
│   └── index.html       # 메인 HTML 파일
└── index.js             # 서버 파일

// index.js
const express = require('express');
const app = express();

// 정적 파일 제공
app.use(express.static('public'));

// 서버 실행
app.listen(8080, () => {
  console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Express Static</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <h1>Express Static</h1>
  <img src="/images/cat.jpg" alt="Cat">
</body>
</html>

localhost:8080에 접속하면, public/index.html 파일이 출력됨.
localhost:8080/images/cat.jpg에 접속하면, public/images/cat.jpg 파일이 출력됨.
localhost:8080/css/style.css에 접속하면, public/css/style.css 파일이 출력됨.

저작자표시 비영리 동일조건

'Front > Node.js' 카테고리의 다른 글

next.js로 CRUD API 서버 만들기 (1)	2024.12.09
node.js로 API 통신 구현하기 (0)	2024.12.09
node.js로 서버 만들기 (0)	2024.12.09
Node.js 기본 개념과 특징 (0)	2024.12.09
대한민국 공공데이터 포털 사용 가이드 (0)	2024.11.20

현재글Express 모듈을 사용하여 서버 만들기

odada