작년 12월에 node.js 프로그래밍 책을 보면서.. 한달만에 끝내기 프로젝트를 했었는데 ..ㅋㅋㅋㅋ
그건...많이 미뤄두고.. 회사에서 새롭게 node js를 실습할 기회가 생겼다
그래서 미니 프로젝트로
todo-list 작성, weather API로 도시 검색 날씨 확인, chat 멀티채팅
이렇게 3개를 만들었는데 먼저 제일 쉽고 간단한 todo만 업로드해보려고 한다
솔직히 책으로 공부했을때는 노드 왜이렇게 어려워... 진짜 못하겠다 싶었는데
스프링에 대한 지식이 쌓이니까 실습이 훨씬 수월하게 잘됐다
또 노드를 배우면 배울수록 편리함에 빠져들었고..
특히 백엔드와 프론트엔드를 같이 짜기에 완벽한 프레임워크였다...
혹시 노드 입문 중 아무리 공부해도 이해가 안된다면 todo 정도는 따라하면서 만들고 분석해보길!
todo 만드는 걸로 엄청난 공부가 된 사람으로써 강추!!!
게시글 차례대로 따라하기!!
완성 페이지 미리보기
필요 개발 환경 : node 설치, brackets(또는 visual studio code) 설치
나는 브라켓이 편해서 브라켓으로 작성했고 비주얼 스튜디오 코드로 작성해도 무방!
순서대로만 따라하면 짱짱 쉬움!! 입문 전용 !!
1. Todo 폴더를 생성하고 메인 파일인 app.js를 생성해준다
이 때 cmd로 Todo 폴더 경로로 이동한 후 npm init를 해주면 package.json 파일이 자동으로 생성된다
Todo
└ app.js
└ package.json
package.json은 이 프로젝트를 설정하는 부분과도 같다
스프링에서 pom.xml을 작성하는 것과 유사!
그래서 의존성 주입을 여기서 해준다
{
"name": "todo",
"version": "1.0.0",
"description": "todo list",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jisu Lee",
"license": "MIT",
"dependencies": {
}
}
name, description, author을 추가해주었고 일단 이렇게 알고 넘어가자
2. npm install 로 dependency 추가
todo를 만들 때 사용할 모듈들을 미리 설치하는 작업이다
위에 package.json 파일을 보면 dependecies가 비어있는 데 저기에 여기서 사용할 모듈들을 추가할 것이다
아까 열어둔 cmd에서 npm install express body-parser ejs mongoose path moment-timezone 이라고 입력해서 설치한다 (반드시 Todo 폴더 안에서 해야함)
그러면 Todo 폴더에 node_modules 라는 폴더가 생성되고 모듈들은 그곳에 설치되었을 것이다
Todo
└ node_modules
└ [모듈들]
└ app.js
└ package.json
그리고 package.json 파일을 확인해보면 dependency가 추가된 것을 확인할 수 있다
"dependencies": {
"body-parser": "^1.19.0",
"ejs": "^3.1.6",
"express": "^4.17.1",
"mongoose": "^5.11.15",
"path": "^0.12.7",
"moment-timezone": "^0.5.33"
}(버전은 상이할 수 있음)
3. app.js에 필요한 모듈들을 import 한다
// Import Modules
const express = require("express");
const mongoose = require("mongoose");
const path = require("path");
const bodyParser = require("body-parser");이렇게 require() 메소드로 필요한 모듈들을 불러와 변수에 저장해놓고 사용하면 된다
4. 변수 app에 express 서버를 만들어준다
노드에서는 톰캣서버가 아닌 express 서버를 많이 사용하는데
편리하고 빠르기까지하다! 신세계..!!
// Make Express Servers
const app = express(); // 3000: Todo
5. app(서버) 세팅 및 디렉토리 생성
// Server Setting - View, Static Files, Body Parser
app.set("view engine", "ejs"); //express 서버에서 jsp처럼 쓰는 ejs파일을 뷰 엔진으로 설정
app.set("views", path.join(__dirname, 'views'));
app.use("/public", express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());서버와 연결 해줄 프론트 부분과 정적 파일들, 바디 파서를 설정하는 부분이다
1,2번줄
jsp와 비슷한 ejs를 view engine으로 설정해주고
ejs파일을 넣어둘 views 폴더를 views로 설정해줄건데
이때 views 폴더와 todo.ejs 파일도 같이 생성해주자
Todo
└ node_modules
└ [모듈들]
└ views
└todo.ejs
└ app.js
└ package.json
4번줄
그리고 정적 파일(fonts, images, css)를 저장할 public 폴더도 생성해주고
app.use 로 정적 파일 경로를 설정해준다
Todo
└ node_modules
└ [모듈들]
└ public
└ views
└todo.ejs
└ app.js
└ package.json
6,7번줄
json을 사용하기 위해 bodyParser 설정을 해준다
6. 라우터 설정
라우터는 스프링으로 치면 컨트롤러랑 비슷한데 url에 따라 페이지를 보여주는 내비게이션이다
app.js에서 정의할 수도 있지만 기능별로 모듈화 해두고 app.js에 불러와서 쓰는 형태가 확장성이 좋기때문에
routes 폴더를 생성해서 index.js 파일을 만들어주고 기능별 라우터를 묶어줄 것이다
좀 어려운 말일 수도 있는데... 일단 해보고 흐름을 보는게 중요할듯!
Todo
└ node_modules
└ [모듈들]
└ public
└ routes
└ index.js
└ todo.js
└ views
└todo.ejs
└ app.js
└ package.json
이렇게 만들어주고 app.js에서 라우터 설정을 해준다
// Router Setting
const router = require("./routes/index");
app.use(router);
router 변수에 아까 만든 index를 모듈처럼 가져와 사용할 수 있다
그리고 app(서버)가 사용할 수 있도록 app.use(router); 해주면 끝!
7. MongoDB 연결, 서버 오픈
// Connect to DB
/*
connect error 발생 시
mongodb://[아이디]:[비밀번호]@localhost:27017/[db이름]?authSource=[아이디] 로 변경
ex) mongodb://admin:1234@localhost:27017/node?authSource=admin
*/
mongoose.connect("mongodb://localhost:27017/node", {useNewUrlParser: true, useUnifiedTopology: true}, function(err){
if(err){
console.error("mongoDB Connection Error!", err);
}
console.log("mongoDB Connected!");
// Server Open
app.listen(3000, function(){
console.log("Server listening on port 3000!");
});
});
mongodb와의 연결은 mongoose를 사용해서 한다
코드를 보면 나는 몽고 디비에 node라는 디비를 만들어주어서 저렇게 경로를 설정했고
local 같은 경로로 해주어도 된다
그리고 디비를 연결하면 app.listen을 통해 3000 포트를 열어준다
서버쪽은 끝!
웹은 localhost:3000/ 으로 확인하면 되는데 아직 페이지를 안만들어줘서..!
아무것도 안 뜰것이다..!
총 다섯개의 게시글로 완성본이 나올듯!
(1) 서버 설정 app.js
(2) 경로 설정 routes/todo.js
(3) 모델 설정 models/todo.js
(4) 서비스 설정 controllers/todo.js
(5) 프론트 페이지 설정 views/todo.ejs, public/
일단,
완성본 디렉토리 구조는 이렇다
총 디렉토리 구조
Todo
└ node_modules
└ [모듈들]
└ controllers ---------------------서비스 영역
└ todo.js
└ models -------------------------DB 스키마 영역
└ todoTask.js
└ public ---------------------------정적 파일 영역
└ fonts
└ images
└ stylesheets
└ routes ---------------------------라우터 영역
└ index.js
└ todo.js
└ views ----------------------------웹 페이지 영역
└ todo.ejs
└ todo-edit.ejs
└ app.js ----------------------------메인 서버 (실제 구동되는 파일)
└ package.json -------------------설정
자... 이제 1끝났네..
ㅋㅋㅋㅋㅋㅋ 총 소스는 github에도 올려놨으니
링크 공유할게요
https://github.com/earth-space/NodeApp/tree/todo
earth-space/NodeApp
Nodejs Mini Project. Contribute to earth-space/NodeApp development by creating an account on GitHub.
github.com