MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.
- 뷰는 사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 온다.
- 뷰는 화면단, 사용자 인터페이스와 같이 보여지는 화면 부분을 의미한다.
1. 뷰 분리 전
const express = require('express');
const app = express()
app.get("/", (req, res) => {
res.send(`
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="아이디"><br>
<input type="text" placehodler="비밀번호"><br>
<button>로그인</button>
</body>
</html>`)
})
app.listen(3000, function () {
console.log("서버 가동 ");
})
2. 뷰 분리 후
1. 뷰 폴더를 따로 분리해준다.
폴더 views > 폴더 home > 파일 index.ejs, login.ejs 생성
-> 이때 ejs는 안에 html코드를 어떤 엔진으로 해석할지 정하는 것
2. index.ejs 파일에는 루트 경로의 코드를 옮기고 , login.ejs 파일에는 로그인 경로의 코드를 옮긴다.
3. 앱세팅 : 화면 뷰를 위한 뷰엔진 세팅하기
const express = require('express');
const app = express()
//앱세팅
app.set("views", "./views");
app.set("view engine", "ejs");
app.get("/", (req, res) => {
res.render("home/index");
});
app.get("/login", (req, res) => {
res.render("home/login");
})
app.listen(3000, function () {
console.log("서버 가동 ");
})
render 함수를 사용해 도메인에 들어왔을 때 ejs 코드들로 이동할 수 있게 연결해준다.
'Bakend > Node.js' 카테고리의 다른 글
| npm 백엔드 1탄 (0) | 2023.09.01 |
|---|