[반드시 먼저 봐야할 게시글]
1) [node.js] express 기본구조 생성 : http://jinbroing.tistory.com/106
[템플릿엔진이란, 템플릿엔진을 사용하면 어디가 좋아]
- 정적인 파일만을 서비스한다면 필요없음
- 동적인 결과를 정적인 파일에 담기위해 사용함
- 풀어 설명하자면, 자바스크립트 코드로 연산된 결과를 변수에 넣고 변수를 뷰 파일에서도 사용할 수 있게끔 함
- 템플릿엔진 사용 이유 : 클라이언트 요청에 따라 웹문서 들어가는 내용(결과)이 달라질 수 있어서 정적인 부분과 동적인 부분을 따로 하기위해 사용
- app.js 내 html 코드를 쓰지않아도 됨
- 뷰 파일과 자바스크립트 코드를 한 파일에 정의하지않고 따로따로 사용할 수 있음
- 자바스크립트로 연산된 결과를 뷰 파일에 쉽게 넣을 수 있음
[템플릿엔진 종류]
1) jade
2) ejs : http://ejs.co/
- 보통 두 엔진의 차이를 분석해놓은 글들을 보면 혼자 개발할 때에는 jade, 협업할 때에는 ejs를 추천
- ejs는 기본 html 문법을 그대로 사용하기때문에 이질감을 못느낌
- 템플릿엔진은 엔진을 통해서 html 문법으로 변환시켜준다는 것 잊지말아야함
[express 웹서버에서 ejs 세팅하기]
- 1번 방법이나 2번 방법 모두 사용가능
- 처음부터 ejs를 하기로 했으면 1번 방법으로 세팅할 것(기본적으로 jade가 설정되어있어서 npm install 하기 전에도 세팅되어있어서 일일이 지워야하는 부분도 있음)
- 1번 방법과 2번 방법은 모두 ejs를 사용하기위한 방법이나 1번은 2번의 과정을 줄여주는 역할을 함 : 2번 방법도 해보는 것도 추천
1-1) express -h 를 콘솔창에 입력해볼 것 : express generator 명령어에 대한 도움말이 나옴
1-2) express 프로젝트를 생성할 때 ejs 옵션값을 붙여 생성함 : express --ejs 디렉토리명(프로젝트명)
1-3) npm install
1-4) app.js 파일 내 템플릿엔진 세팅 코드, /views 디렉토리 내 .ejs 파일 확인하기, /routes/index.js 파일 확인하기
- app.js : express 프로젝트 기본 세팅(총괄 세팅)파일
- /views : 템플릿엔진 파일을 두는 곳
- /routes/index.js : 라우팅 하는 파일(클라이언트 요청에 따라 서버가 어떤 응답하겠다 를 정해놓은 파일)
- 각각 할 일이 나뉘어져있다는 것을 알아야함 : 기본 구조를 나누어 놓음으로서 알아보기 편함(에러가 발생한다면 그 부분만 고치기 편하고, 추가할 때도 편하고)
2-1) express 구조 생성기(express generator)로 express 기본 구조 만들기 : 반드시 먼저 봐야할 게시글 참고
2-2) npm install 전 package.json 파일 dependencies 수정하기 : ejs 모듈 추가
- jade 지우기, ejs 추가
- package.json의 dependencies는 express 프로젝트에서 사용할 외부 모듈의 명과 버전을 명시하는 곳, 최초 npm install을 통해서 외부 모듈 또한 설치가 됨
- package.json은 의존 모듈 관리를 해준다고 했음, 모듈의 버전 또한 어떻게 관리하겠다라고 명시해주면 그에따라 관리를 해줌
- package.json 모듈 버전 명시를 할 때는 아래에서 하나를 골라 명시해주면 됨
- 위의 이미지에서 ejs를 추가할 때 버전을 추가한 것을 말로 풀어보자면 ejs 모듈을 사용하는데, 2.5.6부터 2.6 이전 버전까지 사용하겠다는 것
<package.json 버전 명시>
- 특정 버전, =version(완전 일치 버전)
- >version(높은 버전), >=(높거나 같은 버전)
- <(낮은 버전), <=(낮거나 같은 버전)
- ~version(버전 범위, ~0.2 라면 0.2 부터 0.3 이전까지), 1.2.x(1.2. 대의 버전)
- "latest" (최신버젼)
- "^버젼" (^4.8.6 이면 호환되는 버젼)
2-3) npm install
- ejs 설치되었는지 확인
2-4) app.js 파일 내 템플릿엔진 세팅 코드, /views 디렉토리 내 .ejs 파일 확인하기, /routes/index.js 파일 확인하기
- app.js : express 프로젝트 기본 세팅(총괄 세팅)파일
- /views : 템플릿엔진 파일을 두는 곳
- /routes/index.js : 라우팅 하는 파일(클라이언트 요청에 따라 서버가 어떤 응답하겠다 를 정해놓은 파일)
- 각각 할 일이 나뉘어져있다는 것을 알아야함 : 기본 구조를 나누어 놓음으로서 알아보기 편함(에러가 발생한다면 그 부분만 고치기 편하고, 추가할 때도 편하고)
[ejs 장점 살려서 사용해보기]
1) 뷰 파일 내에서 자바스크립트 코드 사용하기
- 정적인 문서 파일이 아닌, 연산의 결과, 연산 혹은 변수(값이 때에 따라 다를 수 있는)를 문서 내에서 나타낼 수 있는 장점
- ejs 파일(뷰) 내에서 자바스크립트 코드를 쓴다면 코드 한 줄마다 <% %> 또는 <%= %> 로 감싸면 됨
- <% %> 와 <%= %>의 차이는 변수(값이 들어간)를 사용할 때에는 <%= %> 이것을 쓰고, 일반 코딩때는 <% %>를 씀
1 2 3 4 5 6 7 | <html> <% if(name == "jinbro") { %> <%= greet_msg %> <% } else %> <%= back_msg %> <% } %> </html> | cs |
- 변수 정의는 해당 뷰 파일을 라우팅해주고(랜더링해주는) render 메서드가 있는 /routes/index.js에 정의되어있음
- 아래와 같이 render 메서드의 인수로 변수를 넘김(json 형태)
- 아래는 적용샷
2) 뷰 파일 파편화(모듈화)시킨 후 필요한 파일 불러서 사용하기
- 매번 쓰는 코드를 뷰 파일을 만들 때마다 코딩하는 것이 아니라 하나의 뷰 파일로 만들어두고 불러와서 사용할 수 있음(재사용)
- 개발자도구를 통해서 해당 뷰 파일의 코드를 본 결과 아래와 같이 코드가 include된 것을 알 수 있음
[더 알아보기]
1) npm 활용
2) package.json 내부 내용
3) ejs js 코드 넘기는 방식(내부) 및 활용
[참고자료]
1) 네이버 개인블로그, node.js html 템플릿 ejs : http://m.blog.naver.com/rwans0397/220676539841
2) ejs 공식홈페이지 : http://ejs.co/
3) 티스토리 개인블로그(이든의 생활코딩), packjson.json 의존성 모듈 버전 관련 내용 : http://devofhwb.tistory.com/53
4) codementor community, Node.js With Express And EJS : https://www.codementor.io/naeemshaikh27/node-with-express-and-ejs-du107lnk6
'nodejs' 카테고리의 다른 글
| [node.js]Supervisor로 웹서버 자동 재시작하기 (0) | 2017.05.15 |
|---|---|
| [node.js] express 로그인 정보 전달하기 (0) | 2017.05.15 |
| [node.js] express 기본구조 생성 (0) | 2017.04.30 |
| [node.js] express 라우팅, CRUD / 쿼리스트링 (0) | 2017.04.20 |
| [node.js] express, 웹어플리케이션 정적인파일 관리하기 (0) | 2017.04.19 |
댓글