그동안, 저는 주로 닷넷과 자바를 이용해서 많은 웹사이트를 개발하였습니다.
첫 개발자 생활 때 ASP로 시작해서, ASP.NET, Java, Spring Framework로 이어져 왔습니다.
이러한 서버 프로그래밍 언어가 변경할 때마다 프론트, 즉 웹 브라우저에서 늘 사용하는 언어는 JavaScript이었죠~
그런데, JavaScript 언어를 어디서나 실행할 수 있도록 하는 게 Node.js 죠~
앞으로 조금씩 Node.js를 학습하면서 웹사이트 구축, 채팅, API 등등을 개발해보고자 합니다.
오늘은 첫 번째 학습으로 Node.js를 이용해서 간단한 웹사이트를 개발하려고 합니다.
프로젝트 준비하기
저는 Node.js를 개발할 때 개발 IDE를 WebStorm으로 선택하였습니다.
스프링 프레임워크를 개발할때 사용하는 IDE가 인텔리제이라 그런지, 자연스럽게 같은 개발사에서 만든 WebStorm이 익숙하더라고요~
그럼, WebStorm 실행하여 New Project - Node.js 프로젝트를 선택하고 경로를 설정합니다.
저는 my-website로 하였습니다.
그럼 아래처럼 폴더가 생성 후 package.json 파일이 생성된 것을 확인할 수 있습니다.
여기서 Package.json 파일이 무엇인지와 어떤 역할을 하는지 간략히 확인해 보겠습니다.
Package.json 파일이란?
Node.js 프로젝트에서 프로젝트의 설정과 의존성을 관리하는 데 사용하는 중요한 파일입니다.
이 파일은 프로젝트의 메타데이터를 담고 있으며, 프로젝트를 다른 개발자와 협업하거나 배포할 때 중요한 역할을 합니다.
package.json의 주요 역할
- 프로젝트 정보 제공
- 프로젝트의 이름(name), 버전(version), 설명(description), 저작권자(author) 등의 정보를 담고 있습니다.
- 의존성 관리
- 프로젝트에서 사용하는 외부 패키지(라이브러리)를 관리합니다.
- 스크립트 관리
- 자주 사용하는 명령어를 scripts에 정의하여 간단히 실행할 수 있습니다.
- 버전 관리
- 패키지의 버전을 관리하고, 호환 가능한 범위를 지정할 수 있습니다.
- 예 : ^1.0.0 : 1.x.x 버전과 호환, ~1.0.0 : 1.0.x 버전과 호환, 1.0.0 : 정확히 1.0.0 버전만 사용
- 환경 설정 및 기타 속성
- 프로젝트의 기본 진입점(main), 라이선스(license), 리포지토리 정보(repository) 등을 설정합니다.
package.json이 필요한 이유
- 프로젝트를 다른 사람과 공유하거나 배포할 때, package.json만 있으면 npm install 명령어로 모든 의존성을 설치할 수 있습니다.
- 프로젝트 관리와 자동화 작업이 간편해집니다.
- 개발 환경에서의 일관성을 유지하는 도움을 줍니다.
필요한 패키지 설치하기
그럼 웹사이트 개발에 필요한 라이브러리인 Express와 EJS를 설치해 보겠습니다.
- express Node.js에서 가장 널리 사용되는 웹 프레임워크로, 간단하고 유연하게 서버를 구축할 수 있도록 도와줍니다.
- ejs : HTML 템플릿을 동적으로 렌더링 하는데 도움을 주는 템플릿 엔진
npm install express ejs
설치가 끝나면 node_modules 폴더가 생성된 것을 확인할 수 있고, package.json 파일에도 dependencies에 라이브러리가 추가된 것을 확인할 수 있습니다.
Express 서버 만들기
프로젝트에서 app.js 파일을 생성해서 아래의 코드를 작성해 보겠습니다.
const express = require('express');
const app = express();
// EJS 설정
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
// 정적 파일 제공
app.use(express.static('public'));
// 라우트 설정
app.get('/', (req, res) => {
res.render('index', { title: '홈페이지', message: '환영합니다!' });
});
// 서버 실행
const PORT = 3000;
app.listen(PORT, () => {
console.log(`서버가 http://localhost:${PORT} 에서 실행 중입니다!`);
});
- express 모듈을 가져와서 웹서버를 생성할 준비를 합니다.
- app 객체는 express 모듈을 이용해 생성한 앱 인스턴스며, 이 객체를 통해 서버 설정과 라우트를 정의합니다.
- 템플릿 엔진은 ejs를 사용하도록 설정하였습니다.
- 템플릿 파일이 위치한 디렉터리는 현재 파일 위치 기준으로 views 디렉터리를 사용하도록 설정하였습니다.
- public 폴더는 정적 파일(이미지, CSS, Javascript 등)의 루트 디렉터리로 설정하였습니다. 이를 통해 클라이언트가 정적 파일을 요청할 때 별도의 라우트 없이도 접근할 수 있습니다.
- / 경로로 GET 방식의 요청이 들어오면 실행되는 핸들러를 정의하였습니다.
- res.render는 index.ejs 파일을 렌더링 하고, title : 홈페이지, message : 환영합니다 객체를 템플릿에 전달하였습니다.
- 지정된 포트 3000에서 서버를 실행하며, 서버 실행 시 설정한 문구를 콘솔에 출력하도록 하였습니다.
그럼, 한번 실행해 보도록 하겠습니다.
node app.js
Node.js가 설치되어 있다면 node 파일명을 터미널에 입력해 실행할 수 있습니다.
또는 package.json 에 scripts 섹션을 수정해서 간단히 실행하게끔 설정할 수 있습니다.
터미널에서 npm run start 실행 시 start 명칭으로 설정한 스크립트를 실행하게 됩니다.
EJS 템플릿 작성하기
views 폴더를 생성하고, 그 안에 index.ejs 파일을 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%=title%></title>
</head>
<body>
<h1><%=message%></h1>
</body>
</html>
서버에서 설정한 title, message 템플릿 변수를 브라우저에 동적인 콘텐츠를 표시하게 됩니다.
EJS의 문법에 대해서는 나중에 자세히 작성하도록 하며, 간략하게는 아래와 같습니다.
- <%= name %> 출력 : name 변수에 저장된 값을 출력합니다.
- <%- htmlContent %> HTML 출력 : HTML 태그를 포함한 데이터를 출력할 때 사용합니다.
서버 실행하기
모든 설정이 끝났고, 다시 한번 서버를 실행해 보도록 하겠습니다.
웹 서버가 정상적으로 실행되었고, 브라우저에서 localhost:3000으로 접속해 보도록 하겠습니다.
결론
다른 언어 및 프레임워크에 비해서 Node.js로 웹서버를 실행하는 것은 보시는 데로 너무나 간편하고 가벼워 보입니다.
단, 몇 줄이면 웹 서버를 생성하고 실행할 수 있다니 말이죠!!
그럼 다음번에는 조금 더 심화된 내용으로 글을 작성해 보도록 하겠습니다.
감사합니다.
'Node.js' 카테고리의 다른 글
| Node.js 크롤링 따라하기 (1) | 2025.01.23 |
|---|---|
| Node.js EJS 문법과 활용한 샘플 코드 (1) | 2025.01.21 |
| Node.js를 Mac에 쉽게 설치하기 (0) | 2025.01.15 |
