Express 모듈을 사용하여 서버 만들기
1. Express 소개
Express란?
- Node.js를 위한 가볍고 유연한 웹 애플리케이션 프레임워크.
- 빠르고 간단하게 웹 서버와 API를 개발할 수 있는 도구.
- java의 Spring, Python의 Django와 같은 역할을 함.
Express를 사용하는 이유
- 간단하고 직관적인 API
- 미들웨어를 통한 유연한 기능 확장
- 강력한 라우팅 시스템
- 큰 커뮤니티와 풍부한 생태계
2. Express 서버 만들기
- Express 설치
# 프로젝트 초기화
npm init -y
# Express 설치
npm install express- Express 서버 만들기
- get() 메서드: 해당 경로로 GET 요청이 오면 콜백 함수를 실행.
- send() 메서드: 클라이언트에 응답을 보냄.
// index.js
const express = require('express');
const app = express();
// 기본 라우트
app.get('/', (req, res) => {
res.send('Hello, Express!');
});
// 서버 실행
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});- Express 서버 실행
node index.js터미널에서 node index.js 명령어를 실행 후, 크롬의 주소창에 http://localhost:3000을 입력하면, "Hello, Express!"가 출력됩니다.
3. Express 서버에 라우트 추가하기
- post() 메서드: 해당 경로로 POST 요청이 오면 콜백 함수를 실행.
- URL 파라미터:
:를 사용하여 동적인 URL을 사용할 수 있음. - req.params: URL 파라미터를 조회할 수 있음.
// index.js
const express = require('express');
const app = express();
// 라우트 추가
app.get('/users', (req, res) => {
res.send('사용자 목록');
});
// 새 사용자 생성
// post 메서드를 사용하여 새 사용자를 생성하는 라우트를 추가
app.post('/users', (req, res) => {
res.send('새 사용자 생성');
});
// URL 파라미터 사용
app.get('/users/:id', (req, res) => {
// req.params: URL 파라미터를 조회할 수 있음.
res.send(`사용자 ID: ${req.params.id}`);
});
// 서버 실행
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});- 크롬의 주소창에
http://localhost:3000/users를 입력하면, "사용자 목록"이 출력됩니다. - 크롬의 주소창에
http://localhost:3000/users/1를 입력하면, "사용자 ID: 1"이 출력됩니다.
4. http 요청 메서드
클라이언트(프론트엔드)가 서버(백엔드)에 요청을 보낼 때 사용하는 메서드.
- GET: 데이터 얻을 때 사용
- HEAD: GET과 동일하지만 응답 본문을 포함하지 않음
- POST: 데이터 전송할 때 사용
- PUT: 데이터 업데이트할 때 사용
- PATCH: 데이터 일부 업데이트할 때 사용
- DELETE: 데이터 삭제할 때 사용
5. Express 서버에 미들웨어 추가하기
- 미들웨어란?
- 요청(req)과 응답(res) 사이에 실행되는 함수.
- 요청과 응답을 조작하거나, 요청에 대한 응답을 보내기 전에 중간 처리를 할 수 있음.
- 미들웨어 추가하기
app.use()메서드를 사용하여 미들웨어를 추가.
// index.js
const express = require('express');
const app = express();
// 미들웨어
app.use((req, res, next) => {
console.log('-------- 새로운 요청 --------');
console.log(`요청 방식: ${req.method}`);
console.log(`요청 주소: ${req.url}`);
console.log('---------------------------');
// 다음 미들웨어로 넘어가기
next();
});
// 기본 라우트
app.get('/', (req, res) => {
res.send('Hello, Express!');
});
// 서버 실행
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});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(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});<!-- 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:3000에 접속하면,public/index.html파일이 출력됨.localhost:3000/images/cat.jpg에 접속하면,public/images/cat.jpg파일이 출력됨.localhost:3000/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 |