[Node.js] View 분리

·MVC는 사용자 인터페이스나 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴

 -M(Model): 데이터와 비즈니스 로직을 관리

 -V(View): 레이아웃과 화면을 처리

 -C(Controller): 명령을 모델과 뷰 부분으로 라우팅, 앱 사용자의 입력에 대한 응답으로 모델과 뷰를 업데이트

 

·app.js에서 '여기는 루트입니다.'화면과 로그인 화면을 작성한 부분을 따로 분리해주기

 1) app.set 설정

// 화면 뷰를 저장하고 관리해줄 파일을 ./views로 지정
app.set('views', './views');

// views 폴더 안에 생성될 html코드들을 어떤 엔진으로 해석할지 결정('ejs', 그냥 html이랑 비슷)
app.set('view engine', 'ejs');

 

 2) res.send 내에 적어놨던 html 코드를 ejs 파일로 각각 분리

   -작업하던 폴더 > views > home 폴더를 생성

   -home 폴더 내에 index.ejs, login.ejs 파일을 생성하여 각각 '이곳은 루트입니다.'와 로그인화면의 html 코드를 붙여넣기

 

 3) app.js파일에서 원래 res.send로 넣어놨던 html코드는 지우고 ejs파일을 받아줄 코드 작성

app.get('/',(req, res)=>{
    // ejs파일이 이 파일 내에 들어왔을 때 이동할 곳 지정
    // app.set에서 views 파일은 지정해놓았으므로 views 폴더 내의 경로만 지정하면 됨
    res.render('home/index');
});

app.get('/login', (req,res)=>{
    res.render('home/login');
});

 

 4) 서버 가동 시 ejs 모듈을 찾을 수 없다는 에러가 뜨므로 ejs 모듈 설치

 

   -모듈 설치는 터미널에 npm install ejs -s

 

 5) 결과: 각 루트 별 화면의 html코드를 분리하였고 서버 화면은 원래와 똑같이 구현