Nodejs mvc view 분리하기 (1-3)

const { response } = require("express");
const express  = require("express");    //express 모듈 다운받기
const { request } = require("http");
const app = express();                 //app 변수에 express 실행


//앱 세팅
app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/",(request, response)=>{
    response.render("home/index")
});

app.get("/login", (request, response)=>{
    response.render("home/login")
});

app.listen(3000, function(){

    console.log("서버 가동");
});

const { response } = require("express");
const express  = require("express");    //express 모듈 다운받기
const { request } = require("http");
const app = express();                 //app 변수에 express 실행


//앱 세팅
app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/",(request, response)=>{
    response.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>`);     //localhost:3000에 반환값 보내기
});

app.get("/login", (request, response)=>{
    response.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>`
    );    //localhost:3000/login  **/login 슬래시 꼭 넣기
});

app.listen(3000, function(){

    console.log("서버 가동");
});

섞여진 코들를 view 폴더를 만들어 따로 분리할 것이다.

login-lecture > views/home > login.ejs 파일만들기

login-lecture > views/home > index.ejs 파일 만들고 똑같이 html만 잘라서 붙여넣기

여기서 중요한 부분: 들여쓰기 단축키 , 앞으로 들여쓰기 : tab , 뒤로 들여쓰기 : shift + tab

잘라낸 apps.js 코드 , 비어있는 response.send 부분을 지워버리고 새로 만든다.

render 라는 기능을 사용해서 views/home에 분리된 html코드들을 불러오기

앱을 세팅할때 ./views를 했기때문에 로출할때 ex) home/index, home/login 으로 가능했다.

터미널에서 node apps.js 입력해서 서버 가동하고 코드가 잘 분리되어 있는지 확인!

node app.js 다시 가동하고 localhost:3000에 접근해보니 위처럼 잘 나옴!

view 뷴리전 코드 vs view 분리후 코드

const { response } = require("express");
const express  = require("express");    //express 모듈 다운받기
const { request } = require("http");
const app = express();                 //app 변수에 express 실행


//앱 세팅
app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/",(request, response)=>{
    response.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>`);     //localhost:3000에 반환값 보내기
});

app.get("/login", (request, response)=>{
    response.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>`
    );    //localhost:3000/login  **/login 슬래시 꼭 넣기
});

app.listen(3000, function(){

    console.log("서버 가동");
});

const { response } = require("express");
const express  = require("express");    //express 모듈 다운받기
const { request } = require("http");
const app = express();                 //app 변수에 express 실행


//앱 세팅
app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/",(request, response)=>{
    response.render("home/index")
});

app.get("/login", (request, response)=>{
    response.render("home/login")
});

app.listen(3000, function(){

    console.log("서버 가동");
});

훨씬 깔끔하지 않나요? ㅎㅎㅎ 그럼 오늘은 여기까지....

https://piaocanyi.tistory.com/186

Nodejs Routing 분리(1-4)

index.js에서 express를 사용할수 있도록 require해준다. 라우터를 사용할려면 express.Router()해야 한다. 그리고 const를 router로 하고 원래 있던 app.get > router.get으로 변경해 준다. 하지만 한가지 문제..

piaocanyi.tistory.com

Canyi's Tstory

Nodejs mvc view 분리하기 (1-3)

티스토리툴바