Node.js – 서버 구축 – Express 프레임워크 – 1 – 템플릿 엔진
소제목: Node.js와 Express로 서버를 구축하고 템플릿 엔진을 사용해보자!
안녕하세요! Node.js와 Express 프레임워크를 사용하여 서버를 구축하고 템플릿 엔진을 활용하는 방법에 대해 알려드리겠습니다. 서버를 구축하고 웹 페이지를 동적으로 생성하기 위해 템플릿 엔진은 매우 유용합니다. 자, 그럼 시작해볼까요?
Node.js와 서버 구축
우선, Node.js는 자바스크립트로 서버를 개발할 수 있도록 도와주는 런타임 환경입니다. Node.js를 설치하고 간단한 서버를 구축해봅시다.
const http = require('http');
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, world!');
});
server.listen(3000, 'localhost', () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});위의 코드는 Node.js의 내장 모듈인 http를 사용하여 간단한 서버를 만드는 예시입니다. 서버는 localhost의 3000번 포트에서 실행됩니다. 이제 터미널에서 파일을 실행하고 웹 브라우저에서 http://localhost:3000을 열어보세요. “Hello, world!”가 표시되는 것을 확인할 수 있을 겁니다!
Express 프레임워크 사용하기
Express는 Node.js를 위한 강력한 웹 애플리케이션 프레임워크입니다. Express를 사용하면 서버 개발을 더 쉽고 효율적으로 할 수 있습니다.
먼저 Express를 설치해야 합니다. 터미널에서 다음 명령어를 실행하세요.
npm install express설치가 완료되면, Express를 사용하여 간단한 서버를 구축해봅시다.
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello, Express!');
});
app.listen(port, () => {
console.log(`서버가 http://localhost:${port} 에서 실행 중입니다.`);
});위의 코드에서는 Express를 사용하여 라우팅을 정의하고, ‘/’ 경로로 요청이 들어왔을 때 “Hello, Express!”를 응답으로 보내는 간단한 예시입니다. 터미널에서 파일을 실행하고 브라우저에서 http://localhost:3000을 열어보세요. 이전과 같이 “Hello, Express!”가 표시됩니다.
템플릿 엔진 사용하기
이제 템플릿 엔진을 사용하여 동적인 웹 페이지를 생성해봅시다. 템플릿 엔진은 서버에서 동적인 콘텐츠를 생성하기 위해 HTML과 데이터를 결합하는 역할을 합니다. 여기서는 가장 널리 사용되는 템플릿 엔진인 EJS를 사용해보도록 하겠습니다.
먼저 EJS를 설치해야 합니다. 터미널에서 다음 명령어를 실행하세요.
npm install ejs설치가 완료되면, Express 애플리케이션에 EJS를 설정해야 합니다. app.js 파일에 다음 코드를 추가하세요.
app.set('view engine', 'ejs');이제 EJS 템플릿 엔진을 사용하여 동적인 웹 페이지를 생성할 수 있습니다. 예를 들어, views 폴더에 hello.ejs라는 파일을 생성하고 다음 내용을 작성해보겠습니다.
<h1>Hello, <%= name %>!</h1>위의 코드에서 <%= name %>은 EJS의 문법으로, name 변수의 값을 동적으로 삽입하는 역할을 합니다.
다음으로, Express 애플리케이션에 라우트를 추가하고 EJS 템플릿을 렌더링하는 코드를 작성해보겠습니다. app.js 파일에 다음 코드를 추가하세요.
app.get('/hello', (req, res) => {
res.render('hello', { name: 'Alice' });
});위의 코드에서 /hello 경로로 요청이 들어왔을 때, hello.ejs 템플릿을 렌더링하고 name 변수에 ‘Alice’ 값을 전달합니다.
이제 터미널에서 파일을 실행하고 브라우저에서 http://localhost:3000/hello를 열어보세요. “Hello, Alice!”라는 메시지가 표시됩니다. 여기서 name 변수의 값을 변경하여 다른 메시지를 출력할 수도 있습니다.
주의해야할 점
- 서버 구축 시, 적절한 보안 조치를 취해야 합니다. 외부에서의 악의적인 요청에 대비하기 위해 입력 데이터의 검증과 이상한 요청에 대한 처리 등을 신경써야 합니다.
- 템플릿 엔진에서 사용자로부터의 입력을 적절하게 처리해야 합니다. 입력 값을 신뢰하지 않고 항상 검증하여 XSS(Cross-Site Scripting) 공격 등을 방지해야 합니다.
- 성능에 주의해야 합니다. 템플릿 엔진은 서버 측에서 처리되므로 많은 동시 요청이 발생할 경우 서버 성능에 영향을 줄 수 있습니다. 캐싱 등의 방법을 고려하여 성능을 최적화해야 합니다.
- Express 프레임워크 외에도 다른 템플릿 엔진과의 호환성을 고려해야 합니다. 서버 환경이 바뀔 경우, 템플릿 엔진을 대체해야 할 수도 있습니다.
이제 여러분은 Node.js와 Express를 사용하여 서버를 구축하고 템플릿 엔진을 활용하는 방법에 대해 알게 되었습니다. 이러한 기술을 응용하여 동적이고 멋진 웹 애플리케이션을 개발해보세요! 질문이 있으시다면 언제든지 물어보세요. 즐거운 코딩 되세요!