안녕하세요. 저는 현재 자바스크립트 스터디를 끝내고 Node.js 스터디를 참여하고 있습니다. iOS와 Swift에 비해 명확하게 정리를 하지 않고 포스팅도 진행하지 않으니 이전에 했던 것들을 까먹고 계속 찾아보게 되어 이렇게 Node.js에 관해 기록을 해보려고 합니다.
포스팅의 순서를 어떤 커리큘럼을 따라 진행하기 보다는 제가 공부하면서 그때 그때 이건 좀 기록해야겠다 싶은 것들을 위주로 작성해보려 합니다. 그리고 iOS와 Swift에 비해 기본적인 자바스크립트의 문법이나 Node.js의 내용은 생략될 수 있습니다.
그럼 첫 포스팅은 Node.js의 프로젝트를 생성할 때 기본적인 틀과 패키지들을 제공해주는 Express-generator 에 대해 알아보는 시간을 갖도록 하겠습니다.
1. Express-generator 설치
저는 멋쟁이사자처럼이라는 IT 연합동아리를 활동하고 있습니다. 멋사에서는 Ruby on Rails를 사용하는데 레일즈에서 프로젝트를 생성할 때 rails new를 통해 생성해줍니다. 이렇게 생성된 프로젝트에는 웹 어플리케이션을 개발하는데 필요한 기본적인 틀을 제공합니다.
Express-generator를 통해 Node.js 프로젝트를 생성할 때 rails new 와 상당히 비슷하다는 점을 느꼈습니다. 하지만 차이점은 레일즈는 해당 명령어로만 프로젝트를 생성하고 디렉토리들의 위치와 역할이 매우 엄격한 것에 비해 Express-generator는 그냥 단순한 가이드 라인을 제시해주는 것이고 본인의 입맛에 맞게 디렉토리 구조를 바꿀 수 있습니다. 일단 Express-generator 는 Node.js로 웹 어플리케이션을 만드는데 도움을 주는 패키지에 불과합니다.
우선 설치를 먼저해보도록 하겠습니다.
기본적으로 Node.js와 express가 설치되어 있어야 합니다.
npm install express-generator -g
- 글로벌로 설치하여 (
-g) 어디서든 해당 명령어를 통해 프로젝트를 생성할 수 있게 합니다.
express -h
- 위의 명령어를 통해 프로젝트를 생성할 때 어떤 옵션을 선택할 수 있는지 확인할 수 있습니다.
그럼 바로 프로젝트를 생성해보도록 하겠습니다.
express --view=ejs tutorial1
- 템플릿 엔진을
ejs를 사용한다는 옵션을 주어tutorial1이라는 프로젝트를 생성하는 명령어입니다. 저는ejs의 문법이 레일즈의erb와 문법이 비슷하고, HTML 태그들을 직접적으로 사용하여 프론트를 담당하시는 분들과 협업을 하기 편하여ejs를 사용하였습니다. - default는
pug라는 템플릿 엔진입니다.
이제 프로젝트가 생성이 됬고 해당 프로젝트 폴더로 이동해 Express-generator 로 생성하면 기본적으로 제공되는 package.json 파일에 명시된 패키지들을 설치해주어야 합니다.
cd tutorial1
npm install
그리고 프로젝트 폴더 안에서 아래의 명령어를 통해 프로젝트를 실행시킬 수 있습니다.
set DEBUG=myapp:* & npm start
default 포트 번호는 3000번이기 때문에 http://localhost:3000을 통해 실행된 화면을 확인할 수 있습니다.
이제 프로젝트 생성과 실행을 마쳤습니다. 그럼 Express-generator 의 기본적인 디렉토리 구조와 각각의 역할을 살펴보도록 하겠습니다.
2. Express-generator 구조
/bin
먼저
/bin안에는www라는 파일이 있는 것을 확인할 수 있습니다. 이에 대한 자세한 내용은 여기서 다루지는 않겠습니다. 간단하게 설명하자면 HTTP 서버와 포트번호를 설정합니다. 또한 밑의 모듈화 된app.js의app이 넘어와 이를 실행시킬 수 있게 해줍니다.// ./bin/www /* Code */ var app = require('../app') /* Code */ var server = http.createServer(app)그리고
package.json을 확인해보시면 다음과 같은 코드를 확인하실 수 있습니다."scripts":{ "start": "node ./bin/www" }set DEBUG=myapp:* & npm start를 통해 프로젝트를 실행시킬 때./bin/www의 스크립트를 실행시켜 어플리케이션을 실행하는 것임을 알 수 있습니다.
이 부분에 대해서는 저도 아직 많은 지식이 없어 공부를 하여 추후에 다루어보도록 하겠습니다. 이에 관한 설명으로 stackoverflow를 확인해보시면 도움이 되실 것 같습니다.
/node_modules
Node.js를 통해 웹 어플리케이션을 제작할 때 필요한 기본적인 모듈들이 모여있는 폴더입니다. 모듈은 라이브러리라고 생각하시면 됩니다. 그럼 패키지는 뭐냐 하실 수 있으실텐데 패키지는 이러한 모듈들의 집합이라고 보시면 됩니다. 즉
Express-generator패키지를 활용해 프로젝트를 생성하면 기본적으로 제공되는 모듈들이 위치한 폴더라고 생각하시면 됩니다./public
/public폴더 안의 내용을 살펴보면 기본적으로/images,/javascripts,stylesheets폴더들을 확인하실 수 있습니다. 폴더의 이름을 보시면 아실 수 있듯이 웹 어플리케이션을 만들 때 필요한 요소들을 보관하는 폴더입니다./routes
라우터들을 관리해주는 폴더로
index.js와users.js파일을 확인하실 수 있습니다. 그리고index.js파일의 내용을 살펴보면 다음과 같은 코드를 확인하실 수 있습니다.var express = require('express') var router = express.Router() router.get('/', function(req, res, next){ res.render('index', {title:'Express'}) }) module.exports = router/, 즉 기본 홈 URL로 접속을 하면 해당 라우터가 처리한다는 뜻입니다. 여기서는index라는.ejs파일을 띄어주고title이라는 이름의 변수의 값으로Express를 넘겨준다는 의미입니다.users.js도 이와 마찬가지입니다./views
/views에서는 위에서 언급한index등의 뷰를 담당하는.ejs파일들을 모아놓은 폴더입니다. MVC 패턴을 위해 이렇게 디렉토리를 나누어 관리하는 것입니다.
물론
Express-generator로 생성한 프로젝트도 완벽한 MVC 패턴이라고 할 수는 없습니다. 개발자가 어느정도 폴더를 추가하고 이동시켜 만들어주어야 합니다.app.js
어플리케이션의 뼈대라고 할 수 있습니다. 서버의 설정, 미들웨어 정의, 라우트 정의 등등 여러가지 설정을 하게 되고, 서버 운영을 위한 각종 로직이 작성되는 곳입니다. 위의
/routes폴더에서 작성한.index.js와users.js를 사용하는 것도 코드로 확인해볼 수 있습니다./* Code */ var index = require('./routes/index') var users = require('./routes/users') /* Code */ app.use('/', index) app.use('/users', users)먼저
/routes폴더의index.js와users.js에서 모듈화된 라우터를app.js로 가져와서 선언합니다.app.use('/', index)는/, 즉 홈 URL로의 요청들은index라우터가 처리한다는 의미입니다. 그리고/users로 들어온 요청은users라우터가 처리한다는 의미입니다.
예를 들어
www.localhost:3000/page로의 요청이 들어오면index라우터안에서 (index.js)/page에 대한 처리를 해주는 코드를 작성해주어야 합니다. 그리고www.localhost:3000/users/mypage로의 요청이 들어오면users(users.js)안에서/mypage에 대한 처리를 해주는 코드를 작성해주어야 합니다// index.js var express = require('express') var router = express.Router() router.get('/', function(req, res, next){ res.render('index', {title:'Express'}) }) router.get('/page', function(req, res, next){ // Code }) module.exports = router// users.js var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/', function(req, res, next) { res.send('respond with a resource'); }); router.get('/mypage', function(req, res, next){ res.send("This is my page") }) module.exports = router;package.json
package.json에선 프로젝트를 배포할 때 프로젝트의 정보를 작성하는 부분입니다.배포될 프로젝트에 필요한 패키지들을dependencies에 명시하거나 합니다. 이 파일을 정확하게 설명하기에는 아직은 부족하여 이 정도에서 마치도록 하겠습니다.
이에 대한 자세한 설명은 모두 알지만 모두 모르는 package.json 와 The Basics of Package.json in Node.js and npm에 설명이 되어있습니다. 더욱 공부를 한 후 이에 대한 글을 따로 작성해보도록 하겠습니다.
마무리
이렇게 Node.js에서는 각각의 기능들을 모듈화를 하는 것이 가장 중요하고 핵심입니다. 각각의 기능들을 모듈화하고 이를 다른 파일에서 사용하는 방법에 대해서도 추후에 포스팅 해보도록 하겠습니다.
오늘은 이렇게 Express-generator와 이로 생성한 프로젝트의 디렉토리 구조와 역할을 알아보았습니다. Node.js로 만든 전체적인 프로젝트의 흐름과 실행되는 원리에 대한 지식이 아직은 부족하여 완벽한 글이 되지 못했습니다. 하지만 공부해가면서 이에 대한 내용들을 수정하고 보완해가도록 하겠습니다. 많은 피드백 부탁드리겠습니다. 감사합니다.
참고자료