Node.js - 13 Express.js를 통한 사이트 개선

그 전에 그냥 node.js랑 router, utils만 가지고 구현해놨던 Confetti Cuisine 캡스톤 프로젝트를

express.js를 이용한 프로젝트로 바꿔봤다.

 

먼저 최종 프로젝트의 구조는 이렇게 된다.

 

 

 

1. 애플리케이션 초기화

 

여태 해왔던 것과 같이 npm init 명령으로 package.json을 초기화 한다.

시작 포인트는 main.js 로 한다.

 

npm install 명령어로 express, ejs, express-ejs-layouts, http-status-codes 패키지를 설치한다.

 

그렇게 완성된 package.json 파일을 열어서 script영역에

"start": "node main.js"를 추가한다.

 

최종적으로 package.json 파일은

 

이런 모양이 된다.

 

눈여겨 봐야할 부분에만 빨강색으로 표시했다.

 

왜인진 모르겠지만, http-status-codes 패키지를 연속 두번 설치했더니 버전이 다른 두개가 설치됐고, 

layouts도 express-ejs-layouts을 설치해야 되는데 그냥 layouts을 설치해서 저렇게 됐다..^^

 

암튼 이렇게 애플리케이션 초기화를 마쳤다.

 

 

 

2. 애플리케이션 제작

 

이제 애플리케이션은 초기화를 거쳐서 Express.js 버전으로 준비가 됐고,

main.js 파일을 만들 차례다.

 

 

먼저 이렇게 필요한 상수들을 모조리 정의한다.

port 번호를 저장하고, http, http-status-codes, content-types(사실 필요없음), express, express-ejs-layouts 패키지들을 가져오고,

선언한 homeController, errorController를 가져온다.

 

그리고 app 상수를 express 객체로 초기화한다.

 

 

그리고 이제 app 세팅을 한다.

(12행은 뭔지 모르겠음 걍 파라미터 오고가는 post 요청 받아들일 세팅인감....?)

 

ejs를 사용하기 위해 view engine을 세팅하고, layouts 사용을 세팅하고, 에셋 사용을 위한 static 함수도 세팅한다.

 

** 여기서 static 함수를 사용해서 미리 경로를 적어 놓는게 좋은 점이, 에셋들이 추가될 때마다 예전처럼

 app.get("/scripts.js", (req, res) => {
  res.writeHead(httpStatus.OK, contentTypes.js);
  utils.getFile("public/js/scripts.js", res);
 });

이렇게 라우터를 하나하나 적어서 처리하는 과정이 필요했다. (router.js, utils.js 파일들도 필요했음)

근데

app.use(express.static("public"));

저거 한 줄만 적어놓으면 html 파일 혹은 ejs 파일에서 저 경로를 중심으로 상대경로만 적으면 모든 에셋을 사용할 수 있게 된다.

 

 

그리고 17행~23행에서 보이는 것 처럼 유입 요청 데이터를 파싱할 준비를 하기 위해 body-parser를 추가한다. 

이것은 URL 인코드와 JSON 파라미터 처리를 위한 코드이다.

 

 

 

3. 라우트의 추가

 

저기까지 다 했으면 이제 페이지를 왔다 갔다 하기 위한 라우트를 추가한다.

 

먼저 그 전에 그 과정을 처리해줄 controller를 작성했다.

 

homeController.js

 

이건 homeController.js이다. 요청된 라우트에 ejs 파일을 이용해 응답한다.

 

첫번째  showIndex라는 함수는 책에는 없는데 홈화면으로 갈 때 필요할 것 같아서 그냥 내가 추가했다.

그리고 두번째 showCourses 함수에서 ejs 파일에 courses라는 객체 파라미터를 함께 전달해주기 때문에 저렇게 선언했다.

 

 

그다음은 errorController이다.

 

errorController.js

 

404 에러와 500에러에 대비하는 함수들을 정의했다.

404 에러일 때는 error코드와 함께 error.ejs 뷰 페이지로 넘어가게 된다.

 

 

 

4. 뷰로 라우팅 (레이아웃 사용)

 

현재까지 이 캡스톤 웹애플리케이션에서 필요한 view의 목록은 이렇다. (책 참고함)

 

파일명	목적
layouts.ejs	애플리케이션의 메인 스타일링과 기본 탐색 기능 수행
index.ejs	홈페이지 콘텐츠를 만들어냄
courses.ejs	코스 콘텐츠의 디스플레이
contact.ejs	연락처 양식의 디스플레이
thanks.ejs	양식 제출 후 감사 메시지 디스플레이
error.ejs	페이지를 찾을 수 없는 경우 디스플레이

 

그래서 이 6가지의 뷰를 생성한다.

 

먼저 헤더랑 Navigation bar, Footer 부분이 늘 반복되는데 이제 그걸 layouts을 이용하면 깔끔하게 할 수 있게 된다.

 

layout.ejs

 

이렇게 layout을 정의해놓으면 새로운 뷰가 렌더링 됐을 때 layout.ejs 파일을 거쳐서 <%- body%> 부분이 렌더링 된 타겟 콘텐츠로 대체 된다.

 

 

그럼 다른 뷰파일들은

 

contact.ejs

이렇게 body안의 내용, 내용이 바뀌는 section 부분만 적어놓으면 된다.

 

 

 

5. 뷰에 콘텐츠 전달

 

나중에 DB를 사용하면 정보를 출력하기 위해 리스트 형태로 파라미터가 들어올 것이기 때문에 그때 사용하는 방식과 비슷하게 forEach문을 사용하여 배열 객체를 전달해서 뷰에 출력하는 걸 해봤다.

 

먼저 일단 DB가 없기 때문에 출력할 콘텐츠들을 homeController 안에서 배열 객체를 임의로 생성했다.

나중에는 컨트롤러에서 DB에 접근해 데이터를 가져올 것 같다.

 

 

이렇게 리스트의 각 요소가 title, cost를 갖게 courses라는 이름으로 배열 객체를 선언한다.

 

그리고 "/courses" 요청을 처리하는 함수 showCourses 함수에

res.render("course", {offeredCourses : courses});

코드를 추가하여 offeredCourses 라는 이름으로 객체를 뷰에 전달한다.

 

 

이렇게 하면 뷰에서 offeredCourses로 배열에 접근하여 정보를 출력할 수 있게 된다.

 

이렇게

 

 

 

이렇게 하면 Express.js 웹 프레임 기반으로 캡스톤 프로젝트를 수정하는 건 끝이 난다.

 

그래서 완성된 웹 어플리케이션 뷰는 이렇다.

 

 

home 화면 (index.ejs)

 

courses를 배열객체를 이용해 출력한것 (course.ejs)

 

contact.ejs

 

404 error 화면