Node.js - 9 캡스톤 프로젝트: 첫번째 웹

첫번째 기본적인 웹 사이트를 만드는데, 전제 설정은 이렇다.

지역 요리 학교 Confetti Cuisine에서 자신들이 제공하는 코스와 레시피 그리고 예비 학생들이 등록할 수 있는 공간이 있는 랜딩 페이지를 갖고 사이트를 구축해줄 것을 의뢰한 설정.

 

이 애플리케이션을 만들기 위해 다음과 같은 단계를 거친다.

 

• 애플리케이션 package.json의 초기화
• 프로젝트 디렉터리 구조 셋업
• main.js에 애플리케이션 로직 만들기
• view (html) 생성 -> Index, Course, Contact, Thanks, Error
• 에셋의 추가
• 애플리케이션 라우트 구성
• 애플리케이션 에러 처리
• 애플리케이션 실행

 

1. 애플리케이션의 초기화

 

우선 npm을 사용해 package.json 파일을 초기화 한다.

그리고 npm install http-status-codes --save 명령어로 종속 패키지를 설치한다.

 

앞에서 해봤던 내용이라 생략.

 

 

 

2. 애플리케이션 디렉터리 구조

 

프로젝트 디렉터리 구조를 다음과 같이 만들었다.

 

views 안에 있는 html 파일로 서버가 응답하고, 이 파일들을 지원하는 에셋은 public 폴더 밑에 있다.

 

 

 

3. router.js 및 main.js 파일의 생성

 

먼저 main.js의 1행부터 6행까지만 살펴보면 이렇게 포트 번호 3000을 지정하고, http, http-status-codes 모듈을 할당한다.

그리고 밑에 router, content-types, utils 모듈도 할당했다.

 

이렇게

 

 

여기서 content-types 랑 utils 파일은

content-types.js

 

utils.js

 

이렇게 작성하였다. 이 두가지 모듈은 main.js 내에 있는 변수들의 구조화를 위한 것이다.

content-types.js 에서는 콘텐츠 타입 매핑 객체를 익스포트 하여 파일 타입을 매핑하고, 

utils.js에서는 제공된 위치의 파일을 찾아 반환하고, 찾는 파일이 없으면 에러메시지를 출력한다.

 

 

그리고 router.js 파일은 이렇게 정의된다.

이 파일은 http-status-codes와 앞에서 정의한 content-types, utils가 필요하다.

 

먼저 5행에 보면 routes 객체를 정의했다. 

routes 객체는 키-값 쌍으로 get 함수를 통한 GET 요청, post 함수를 통한 POST 요청을 매핑한다.

 

그리고 10행의 handle 함수는 main.js에서 createServer의 콜백 함수로 간주된다. 

 

19행과 23행의 get과 post 함수는 콜백 함수와 URL을 취하며 routes 객체에서 서로 매핑한다.

handle 함수에서 try-catch 구문 안의 알고리즘은 라우트를 찾지 못한다면 utils 모듈 내 사용자 정의 함수 getFile 함수를 사용해 에러 메시지를 표시한다.

 

 

 

4. 뷰 페이지 생성

 

나는

https://startbootstrap.com/themes

Free Bootstrap Themes & Templates - Start Bootstrap

여기에서 무료 부트스트랩 템플릿을 사용하여 뷰페이지를 생성하였다.

여기서 템플릿을 다운받고 해당 css, js, images 파일들을 가져와서 쓰면 된다.

 

이거는 학교다닐때 웹 개발하면서 많이 했던거라 패스.

 

근데 적용하는 방식이 뭔가 좀 달라서 헤맸었는데 그건 나중에 그 부분 나오면 적겠음.

 

 

 

5. 라우트 생성

 

라우트들을 핸들링하기 위해 router.js 파일은 이미 만들었다. 이제 이걸 등록을 해야한다. 

등록이라는 말의 의미는 url 및 http 메소드들에 따라 router.get, router.post 함수로 보낸다는 의미이다.

 

라우트 등록을 정리하면 다음과 같다.

 

• 요청이 GET인가 POST 인가
• URL 라우트
• 돌려줄 파일 이름
• HTTP 상태 코드
• 돌려줄 파일 타입 (Content Type)

 

각 콜백 함수에서 응답을 보낼 콘텐츠 타입을 지정해야 하며, fs 모듈을 사용해 뷰 페이지와 에셋을 응답 콘텐츠로 읽어들여야 한다. 

 

이렇게 등록, 정의한다.

 

여기서는 프로젝트에서 파일로 보일 에셋(이미지, js, css 파일)에 대한 라우트만 만든다.

 

이부분이 중요했다....

앞에서 좀 헤맸다고 한게 여기 때문이었다.

 

 

index.html 파일을 보면

 

이렇게 favicon이랑 스타일시트를 적용시키 위해 경로를 입력하는 부분이 있다.

 

여기서 나는 프로젝트 구조를 보고 그대로 상대경로로

그니까 여기서 이 html 파일은 views 폴더에 있으니까 ../로 상위폴더로 옮겨가서

../public/images/favicon.ico 처럼 입력했었는데, 실행시키면 자꾸 css파일이 적용되지 않았었다.

 

근데 알고보니 이게 이제 저 main.js 파일에서 router.get으로 경로를 등록해줘야 했던 것이다!

 

그래서 저 위에 main.js 코드를 다시 보면 

 

router.get("/styles.css", (req, res) => {
  res.writeHead(httpStatus.OK, contentTypes.css);
  utils.getFile("public/css/styles.css", res);
});

 

이렇게 "/styles.css"로 경로를 등록해주고, utils에서 파일을 알아서 찾아주는 것이다.

 

 

 

그렇게 해서 스타일이 다 적용되고 서버에 

 

 

 

이렇게 잘 뜬다 ^____^