완전 하드 코딩으로
index.html에 html형식으로 루트페이지, 로그인의 문서를 만들자
<!DOCTYPE html>
<html lang="ko">
<!--브라우저가 언어 인식-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
여기는 루트 페이지 입니다.
</body>
</html>`그리고 이걸 app.js의 send함수에 넣어주자(문자열로)
const express = require("express");
const app = express();
app.get("/", (req, res) => {
//기능
res.send(`
<!DOCTYPE html>
<html lang="ko">
<!--브라우저가 언어 인식-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
여기는 루트 페이지 입니다.
</body>
</html>`
);
});
app.get("/login", (req, res) => {
res.send(`
<!DOCTYPE html>
<html lang="ko">
<!--브라우저가 언어 인식-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder = "아이디"><br>
<input type="text" placeholder = "비밀번호"><br>
<button>로그인</button>
</body>
</html>
`)
})
app.listen(3000, function () {
console.log("서버 가동");
});이렇게 하면, 문자열이라 수정하기도 어렵고, 에러 찾기도 어렵다
복잡하기도 하고
html(view)를 분리하자!
MVC모델 이용하기
Views 분리하기
views/home 안에 V애들을 ejs 파일로 넣어주자
app.js
const express = require("express");
const app = express();
app.set("views", "./views") // 화면에 보여지는 부분을 처리함 (화면 뷰를 관리할 파일이 저장될 곳을 지정)
app.set("view engine", "ejs") // html코드를 어떤 엔진으로 해석할껀지? , ejs는 html과 거의 똑같은 엔진이다.
app.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
app.get("/login", (req, res) => {
res.render("home/login")
})
app.listen(3000, function () {
console.log("서버 가동");
});화면에 보여지는 부분이 views이고 이 부분이 어디에 있는지 설정을 해주고
해당 문자열(html)을 어떻게 해석할지 고민해야하는데 이때는 html가 가장 유사한 엔진인 ejs엔진을 이용한다
이후 요청에 맞는 render함수를 이용해 해당 경로를 핸더링 해주면 된다.
index.ejs
<!DOCTYPE html>
<html lang="ko">
<!--브라우저가 언어 인식-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="아이디"><br>
<input type="text" placeholder="비밀번호"><br>
<button>로그인</button>
</body>
</html>분리된 ejs파일
하지만 에러!
npm install ejs -sejs엔진을 다운 받아야한다 그래야 ejs엔진으로 파싱가능해짐
잘된다
views를 분리 했으면 라우팅도 분리해보자
라우팅?
중계 역할을 해줌
바로 이부분
app.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
app.get("/login", (req, res) => {
res.render("home/login")
})이것을 따로 분리해보자
일단은 프로젝트 파일에 routers/home을 만들고
안에 index.js를 만들자
index.js
"ues strict"
const express = require("express");
const router = express.Router();
router.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
router.get("/login", (req, res) => {
res.render("home/login")
});
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄라우터 폴더의 home폴더 안에 라우팅을 하는 코드를 옮겼다
항상 use strict를 서버에서는 잘 준수 해주자
여튼 이렇게 분리를 하면 app.js에서 이 라우터를 찾을 못한다 (분리 했으니께)
그래서 어디있는지 알려주기 위해서 외부로 보낼수 있게 처리를 해주자
app.js
"use strict"
//모듈
const express = require("express");
const app = express();
const PORT = 3000;
//라우팅
const home = require("./routes/home") // home이 무엇인지 경로를 지정한다.
//맵 세팅
app.set("views", "./views") // 화면에 보여지는 부분을 처리함 (화면 뷰를 관리할 파일이 저장될 곳을 지정)
app.set("view engine", "ejs") // html코드를 어떤 엔진으로 해석할껀지? , ejs는 html과 거의 똑같은 엔진이다.
app.use("/", home); // use -> 미들 웨어를 등록해주는 메서드, 이렇게 되면 /로 url이 왔을때 hoem = 즉 index.js로 이동할수있게 된다.
app.listen(PROT, function () {
console.log("서버 가동");
});그리고 다시 돌아와서 라우티의 경로를 home이라는 변수에다 저장해주고
해당 home은 app.use를 이용해 미들웨어로 등록해주자 (라우터가 미들웨어로 등록되었다) 이렇게 한다면 잘 분리된다.
하지만 라우터에서 보여주는 reder 역할까지 한다 이러한 컨트롤러 부분을 분리하자MVC의 C 분리하기
라우터에서 컨트롤로에 해당하는 부분을 분리해보자
뷰는 지금 라우터를 이용해서 분리해줬다
라우터는 단순이 사용자에게 요청이 들어왔을때 요청을 연결해주는 부분이다
그리고 해당 요청의 기능을 하는 부분은
router/index.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl")
router.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
router.get("/login",(req, res) => {
res.render("home/logi n")
});
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄해당 부분이다 이부분이 컨트롤러이다
router/home/home.ctrl.js로 컨트롤러를 분리하자
home.ctrl.js
const hello = (req, res) => {
res.render("home/index") // views는 지정했기땨문
}
const login = (req, res) => {
res.render("home/login")
}
module.exports = {
hello, // 모듈은 키와 - 값인데, 키만 넣어도 자체적으로 같은 네임의 값을 넣어줌
login,
};컨트롤 부분을 함수로 만들어주고
router/index.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl") //모듈을 받아온다
router.get("/", ctrl.hello); //해당 함수를 사용한다.
router.get("/login", ctrl.login); // 해당 함수를 사용한다
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄이렇게 분리를 해주면
클라이언트에서 요청이 서버에 들어오면 →라우터(router/home 경로)로 → 라우터에서 요청은 ctrl에 해주면 → ctrl은 요청에 따라 페이지를 보여준다
이제 서버 실행의 시작! app.listen 도 모듈화
이것또한 함수를 이용해 어떠한 조작을 하는것이니 모듈화를 하자면
bin 폴더를 만든뒤에 www.js로 파일을 만들자
www.js
"use strict";
const app = require("../app");
const PORT = 3000;
app.listen(PORT, () => {
console.log("서버 가동");
});app.listen과 관련된 코드들을 적어주고
포트를 실행시키는 파일에서 node.js를 실행해야한다
node ./bin/www.js- 워크스페이스를 bin으로 옮겨서 걍 www.js만 해도 된다
package.json을 이용해 쉽게 구현 가능하다
package.json?
내가 만드는 소프트웨어의 설정을 초기화 함
npm init -y- -y을 하면 모두 기본으로 설정함
{
"name": "node", // 내 프로그램 이름
"version": "1.0.0", // 현재 내 프로그램 버전
"description": "", // 설명 -> 검색 가능
"main": "app.js", // 주요 파일
"bin": { //바이너리 = 실행파일이 들어감
"node": "www.js" // 실행파일이 들어감
},
"dependencies": { // 의존성, 내가 의존하는 파일들 (소프트웨어 사용시 영향)
"ejs": "^3.1.6",
"express": "^4.17.1"
},
"devDependencies": {}, // 개발 할때만 영향되는것 (웹팩, 린트등등)
"scripts": { // 명령어를 바꿀수 있음
"start" : "node ./bin/www.js" // 이렇게 설정하면 npn start만 해도 이렇게 인식함
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords" : [] // 검색시 사용될 키워드
"author": "", // 개발자
"license": "ISC" // 라인센스
"homepage" : "" // 자기 홈페이지 쓸수있음
"repository" : "" // 레포이름
"type" : "git"
"url"
}node_modules?
설치한 의존성 모듈들을 저장함, 의존성을 위한 모듈들도 저장되어있음
- 이게 없으면 소프트웨어를 실행할수가 없다
- 하지만 깃허브에 저장할때는 이 폴더까지 저장하지 않는다 왜??
⇒ package.json에 의존성 모듈을 알려주기 때문에 npm install 을 하면 한번에 깔린다
⇒ package.json은 버전등을 대충 알려주지만, package-lock.json 명확한 버전과, 관련있는 모듈 버전까지 다 알려준다.
인터벌로 가득찬