지난 포스팅에서 개발을 위해 필요한 구성을 간략히 세팅하였고, welcom to Express 페이지도 띄워보았다.
이제 내가 원하는 게시판을 위한 개발을 해야하는데...
먼저 yo 를 통해 자동으로 생성된 package(?) 구조부터 살펴보도록 하자.
대충 이름만 보면 느낌이 화..악...올 것만 같은데, 그래도 한번 정리해보자.
먼저 public은 하위 폴더들을 보아하니 front-end에 필요한 resource 파일과 js 파일(+라이브러리) 등을 담고 있어야 할 것 같다.
routes는 말 그대로 express server로 들어온 요청들을 어디로 보내줄지 설정하는 라우트 파일들을 지정하는 곳이다.
views 폴더는 역시 하위 파일들을 보니 front-end에 제공될 정적 페이지를 담고 있는 공간인 것 같다.
이렇게 필수적인 구성은 잡혀있는데 좀 더 추가될 내용은 없을까?
우선 나중에 mongo DB를 활용할 때 정의가 필요한 모델들을 담고 있는 곳이 필요하다. - models 폴더
그리고 고작 게시판 주제에 rest한 서비스를 위해 API 구현은 따로 빼내어 작업하도록 하자. - api 폴더
또, 뭐가될지 모르지만 이것저것 설정 정보를 담고 있을 폴더도 필요하다. - config 폴더
일단 이정도만 고민했지만 정답도 아니고....구성은 개취!!
구성이 완료 되었으면 이제 진짜로 시작해보자.
뭘 먼저할까...하다가 우선 눈에 보이는 것 부터 하는게 신기하고 재미있을테니 간단한 화면과 그 화면으로 이동하는 부분을 만들어보자.
위에서 살펴봤던 것 처럼 화면을 구성할 정적 페이지는 views 폴더에 만들면된다.
근데 자동으로 생성된 파일들은 ejs 파일이다.
ejs 는 동적으로 HTML 페이지를 생성하는 일종의 템플릿 엔진이다. jsp와 비슷하게 생각하면 되겠다.
가장 기본적인 부분을 잠깐 살펴본다면, ejs에서 html로 변환하면서 서버에서 구동되어 할당된 값들이 함께 사용된다.
ejs가 주는 아니지만 잠깐 살펴보고 가보자.
views 폴더에 자동으로 생성되어 있는 index.ejs 파일이다.
이전 포스팅에서 봤던 우리를 환영해주던 그 welcome 페이지이다.
내용을 살펴보면 익숙한 태그가 몇개 있고, Welome to 라는 문장 그리고 '<%' 와 '%>' 감싸져 있는 부분으로 이루어져있다.
익숙한 언어인 jsp와 비슷하게 생각해보면 <% %> 태그 안의 logic 이 server에서 실행되어 html 파일을 렌더링 할 때 결과를 넣어주는 내용일 것이다.
include 는 해당 부분에 다른 페이지를 넣어주는 키워드이고, 변수값을 표현할 때에는 '<%- 변수 %>' 과 같이 사용한다.
위 내용이 렌더링 된 welcome 페이지의 소스코드를 한번 확인해보자.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Express</title> <link rel="stylesheet" href="/css/style.css"> <script src="http://localhost:35729/livereload.js"></script> </head> <body> <h1>Express</h1> <p>Welcome to Express</p> </body> </html>
|
파란색으로 되어 있는 부분이 include 키워드를 통해서 삽입된 부분이고, 빨간색으로 표시된 부분이 변수 값이 할당되고 대치되어 나타난 부분이다.
include는 그냥 위 아래에 덧붙혔다치고, title이라는 값에는 어떻게 값이 할당되었는지 node 서버의 내용도 확인해보자.
routes 폴더 아래의 index.js 파일의 내용이다.
자세한 내용은 익숙해지면 파악되겠지만, res라는 응답객체의 render 함수를 통해 title 변수에 값을 넣어주고 있다.
저렇게 페이지를 렌더링 하면서 값을 전달해주면, html페이지가 생성될 때 해당 값을 대치 해준다.
여기까지 보니 html 페이지를 사용하면서 어떤 값이 필요한 경우 서버에서 넘겨주면서 사용하면 될 것 같다.
여기에서는 확장자를 ejs가 아닌 html로 사용하도록 하겠다. (보기에 익숙해서...ㅎ)
html을 사용하기 위해서 view engine을 세팅하는 부분을 바꿔보자.
친절하게 view engine 을 setup하는 부분이라고 주석이 되어있다.
다음과 같이 변경해보자.
내용은 간단하다. engine으로 html을 쓰겠다는 설정.
html 페이지가 잘 나타나는지 확인해 보기 위해서 우선 views폴더에 있는 *.ejs 파일을 *.html 파일로 변경하자.
그리고 index.html 내용은 다음과 같이 약간 수정해준다.
Welcome 페이지가 정상적으로 나타나는 것을 확인할 수 있다.
'Javascript > NodeJS' 카테고리의 다른 글
| Node.js로 뭔가 만들어보자 - 4. Mongoose를 통해 MongoDB 데이터 다뤄보기 (0) | 2016.07.17 |
|---|---|
| Node.js로 뭔가 만들어보자 - 3. express router 로 라우팅하기 (0) | 2016.07.16 |
| Node.js로 뭔가 만들어보자 - 1. 개발환경 구성하기 (0) | 2016.07.02 |
| Node.js 로 뭔가 만들어보자 - 프롤로그 (0) | 2016.07.02 |
