고똘이의 IT 개발이야기

Nodejs 기반의 프로젝트를 생성할때 어떻게 프로젝트를 생성해서 기본적인 서버를 구축 할 수 있을까 조금 막막합니다. 

이번 글에서는 기본적인 Nodejs 기반의 프로젝트 생성, 서버 시작 방법, 화면 렌더링까지 간단하게 구성하는 방법에 대해서 말씀 드리겠습니다.

 

1. 기본적으로 VsCode가 설치되어 있어야 합니다.

 

2. Nodejs 프로젝트를 생성할 폴더를 하나 만듭니다.

 

3. VsCode 툴에서 프로젝트를 생성할 폴더를 선택 합니다.

 

4. 폴더를 선택 후 VsCode 터미널에서 npm init -y 명령어를 입렵 후 Enter를 눌러주세요. npm init 명령의 경우 Nodejs 프로젝트에서 기본적으로 사용할 package.json를 생성하기 위함입니다. npm init 명령어에서 -y 명령어를 붙인 이유는 기본 패키지 설정 다운로드 시 모든 질문에 동의 하겠다는 명령어 입니다.(만약에 VsCode 툴에서 터미널이 안보일때는 툴 맨 밑에 마우스 커서를 대고 위로 끌어 올리면 됩니다.)

 

5. npm init -y 명령어를 치면 폴더에 package.json 파일이 생성됩니다.

 

6. package.json 파일이 위치한 필드에 마우스를 우클릭 후 New File를 선택 후 파일명을 'index.js'로 설정 후 생성해 주세요. 그 다음 우클릭 후 New Folder를 선택 후 폴더명을 'views'로 설정 후 views 폴더 밑에 test.ejs라는 파일을 만들어 주세요. (아래 이미지대로 만들어지면 됩니다.)

7. 6번에서 만든 파일들의 경우 index.js는 기본적으로 npm를 사용하여서 서버를 시작할때 설정 소스들이 들어갈 js 파일입니다. 그리고 test.ejs는 node에서 ejs라는 view engine이 존재하는데 그 엔진 기반의 소스 코딩을하기 위해서 .ejs 확장자 기반의 파일을 생성한것입니다.

 

8. 이제 Node 프로젝트에 필요한 모듈을 두가지 받아야 합니다. 첫번째 모듈은 express 모듈 입니다. 'npm install express' 명령어를 터미널에 치신 후 Enter 두번째로는 'npm install ejs'라고 터미널에 명령어를 입력 후 enter를 쳐주시면 두개의 모듈이 설치 됩니다.

 

9. 모듈이 모두 설치가 되면 이제 index.js 파일에 아래의 소스 코드를 입력하여 주시면 기본적이 서버 소스코딩이 완료 됩니다.(아래의 소스코드에 설명을 달아 놨기 때문에 따로 소스코드 설명은 달지 않겠습니다.)

 

const express = require("express"); // express 모듈 셋팅
const ejs = require("ejs"); // 페이지 로딩을 위해 필수
const app = express();

// view 엔진을 ejs를 쓰겠다는 설정
app.set("view engine", "ejs");

// 페이지 로딩 함수
app.get("/", function(req, res){
    //console.log(res);
    res.render("test", {}); // views 폴더 밑에 있는 파일을 참조함
});

// 서버 띄울때 포트 정보 셋팅 및 처음 실행 시 필요한 기능 수행 가능
app.listen(3000, function(){
    console.log("server running");
});

 

10. 이제 서버 설정이 완료되면 간단하게 test.ejs에 아래의 소스 코드를 입력합니다.

<h3>안녕하세요.</h3>

 

11. 이제 위와 같은 모든 설정이 끝나면 터미널에 'node index.js' 명령어를 입력해 주시면 서버가 실행이 됩니다.

 

12. 서버가 실행이 된 후 브라우저에 아까 설정한 3000 포트를 입력하여 접속하시면 됩니다.

 

오늘은 간단하게 Nodejs 기반의 프로젝트 생성 방법에 대해서 알아봤는데요. 다음번에는 기본적으로 서버에서 GET/POST 요청 받는 방법에 대해서 설명해 드리겠습니다.

 

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

[Node.js] Node 기초 설명 노드의 장점  (0) 2018.06.05

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band