Node.js - Express Framework
안녕하세요, 야심차운 프로그래머 되고자 하는 분들! 오늘 우리는 Node.js와 Express 프레임워크의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 모험을 안내해 드리는 것을 기쁜 마음으로 생각합니다. 코드를 한 줄도 적어보지 않았다면 걱정하지 마세요 - 우리는 가장 기초적인 부분부터 함께 공부해 나갈 테니까요.
Express는 무엇인가요?
들어보기 전에, Express가 정말 무엇인지 이야기해 보겠습니다. 집을 짓는 것을 생각해 보세요. 당신은 스스로 벽돌을 만들고 나무를 자를 수도 있지만, 이미 만들어진 재료를 사용하여 더 쉽고 빠르게 일을 처리할 수도 있습니다. Express는 이러한 이미 만들어진 재료와 같은 것이지만, 웹 애플리케이션을 위한 것입니다. Express는 Node.js와 함께 웹 및 모바일 애플리케이션을 더 쉽고 빠르게 만들 수 있도록 다양한 강력한 기능을 제공하는 프레임워크입니다.
Express 설치
먼저 Express를 설치해 보겠습니다. Node.js가 컴퓨터에 설치되어 있는지 확인하세요. 설치되어 있지 않다면, 공식 Node.js 웹사이트로 이동하여 다운로드하세요.
Node.js가 설치되면, 터미널(Windows에서는 명령 프롬프트)을 엽니다 그런 다음 다음 명령어를 입력하세요:
npm install express이 명령어는 npm(Node Package Manager)를 사용하여 Express를 설치합니다. npm은 우리의 Node.js 프로젝트에서 사용할 수 있는 다양한 유용한 도구(패키지라고 부릅니다)를 포함한 마법의 도구 상자입니다.
Hello World 예제
이제 Express가 설치되었으므로, 우리의 첫 번째 Express 애플리케이션을 만들어 보겠습니다. 고전적인 "Hello, World!" 예제로 시작하겠습니다.
새로운 파일 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 at http://localhost:${port}`);
});이를 설명해 보겠습니다:
- Express 모듈을 가져와 Express 애플리케이션을 생성합니다.
- 포트 번호를 정의합니다 (이 경우 3000입니다).
- 루트 URL ('/')에 대한 라우트를 설정하여 "Hello, World!"를 응답합니다.
- 애플리케이션이 지정된 포트에서 연결을 기다리게 합니다.
이 애플리케이션을 실행하려면 터미널로 이동하여 app.js가 포함된 디렉토리로 이동한 후 다음 명령어를 실행하세요:
node app.js이제 웹 브라우저를 엽니다 http://localhost:3000에 간다면 "Hello, World!"가 표시되는 것을 볼 수 있습니다. 축하합니다! 여러분은 첫 번째 Express 애플리케이션을 만들었습니다!
Application 객체
이전 예제에서 우리는 Express 애플리케이션 객체를 생성했습니다:
const app = express();이 app 객체는 Express를 사용하는 데 매우 중요합니다. HTTP 요청 라우팅, 미들웨어 구성, HTML 뷰 렌더링, 템플릿 엔진 등록 등 다양한 메서드를 제공합니다.
app 객체의 가장 흔히 사용되는 메서드 몇 가지는 다음과 같습니다:
| 메서드 | 설명 |
|---|---|
| app.get() | 지정된 경로로 HTTP GET 요청을 라우팅하고 지정된 콜백 함수를 호출합니다 |
| app.post() | 지정된 경로로 HTTP POST 요청을 라우팅하고 지정된 콜백 함수를 호출합니다 |
| app.use() | 지정된 경로에서 지정된 미들웨어 함수나 함수들을 등록합니다 |
| app.listen() | 지정된 호스트와 포트에서 연결을 기다립니다 |
기본 라우팅
라우팅은 특정 엔드포인트(URI 또는 경로)에 대한 클라이언트 요청에 애플리케이션이 어떻게 응답하는지 결정하는 것을 의미합니다.
우리의 애플리케이션을 확장하여 더 많은 라우트를 추가해 보겠습니다:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.get('/about', (req, res) => {
res.send('This is the about page');
});
app.post('/submit', (req, res) => {
res.send('Got a POST request');
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});이 예제에서 우리는 두 개의 새로운 라우트를 추가했습니다:
- '/about'에 대한 GET 라우트로 "This is the about page"를 반환합니다
- '/submit'에 대한 POST 라우트로 "Got a POST request"를 반환합니다
POST 라우트를 테스트하려면 Postman과 같은 도구를 사용하거나, 해당 라우트에 제출하는 HTML 폼을 만들 수 있습니다.
정적 파일 서비스
자주 정적 파일(이미지, CSS 파일, JavaScript 파일 등)을 서비스하고 싶을 때가 있습니다. Express는 이러한 목적으로 내장된 미들웨어 함수 express.static을 제공합니다.
우리의 프로젝트 폴더에 public 디렉토리를 생성하고, 그 안에 이미지 파일(cat.jpg라고 가정해 봅시다)을 넣습니다. 그런 다음 app.js를 다음과 같이 수정합니다:
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
app.use(express.static('public'));
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});이 예제에서 우리는 두 가지 작업을 수행했습니다:
-
app.use(express.static('public'))를 사용하여 'public' 디렉토리에서 정적 파일을 서비스합니다. - '/cat'에 대한 새로운 라우트를 추가하여
cat.jpg파일을 응답합니다.
이제 http://localhost:3000/cat.jpg에서 직접 고양이 이미지에 접근할 수 있거나, 정의한 '/cat' 라우트를 통해 접근할 수 있습니다.
이제 우리는 Express의 기본적인 내용을 다루었습니다. 설치에서 정적 파일 서비스까지. 기억하시라, 코드를 배우는 것은 새로운 언어를 배우는 것과 같아 - 연습과 인내가 필요합니다. 모든 것을 바로 이해하지 못한다면 낙담하지 마세요. 계속 실험하고, 계속 만들고, 가장 중요한 것은 즐겁게 코드를 작성하자!
다음 강의에서는 Express 미들웨어와 더 복잡한 라우팅 기술에 대해 더 깊이 탐구하겠습니다. 그때까지, 즐거운 코딩 시간 되세요!
Credits: Image by storyset