Node.js 로그인 화면 만들기 1 (View,Route,Controller)

view 화면 분리하기

View Engine

화면 view를 관리 해줄 file이 저장된 폴더 이름을 set 메소드에 두번째 인자로 넘겨준다.

 

그리고 views 폴더에 생성될 html 파일들의 코드를 어떤 engine으로 해석할지 정할 수 있다.

=> ejs 사용

 

*ejs :  많이 사용되는 view engine중에 하나로, html과 굉장히 유사하다.

도메인에 url에 요청이 왔을 때 해당 하는 ejs 파일에 매칭을해주어야 한다. 이것을 res.render 메서드에 인자로 매칭할 ejs 파일과 경로를 넣음 으로써 할 수 있다.

 

npm으로 ejs를 설치하고 서버를  restart하면 url매칭된 ejs가 정삭적으로 반환되서 화면에 출력되고 있는 것을 확인할 수 있다. 

 

routing 다른 file로 분리하기

일반적으로 routes에 관련된 것은 routes폴더에 담아주는 것이 일반적이다.

 

위 그림과 같이 routes/home 경로에 index.js 파일을 생성하고, 요청 url과 ejs 파일을 매칭해준 코드들을 이 js 파일에 옮겨준다.

 

해당 js file에 app이라는  인스턴스 변수는 routes.js에 존재 하지 않기 때문에  get메소드를 사용할 수 있도록 app과 같은 역할을 해줄수 있는 router 인스턴스 변수를 생성해준다.

 

index.js에 적힌 코드로 해당 file 내부에서는 동작이 되지만, main file인 app.js 에서는 index.js가 어디있는지 조차 알지 못하기 때문에 app.js와 와 index.js 연결해 줄 필요가 있다. =>

위 코드는 router를 외부에서 사용할 수 있도록 외부로 내보내기 해주는 명령이다.

 

미들 웨어를 등록해주는 use 메서드를 사용해서 외부로 내보내기 된 router를 가져오면 된다. root 경로로 들어오면 home으로 보내준다. 하지만 현재 home이 라는 것이 제대로 명시가 되어 있지 않다. 그래서 require를 사용해서 상대적인 폴더의 경로를 명시해준다. 경로의 마지막에 home이라고 명시해주면 index.js라는 파일을 읽게 된다.