개발 과정 리뷰 -3-

#1 express Controller에서 HTML 출력하는 세가지 방법

첫번째는 Controller에서 send 함수 내부에 HTML코드를 직접 넣는 방식인데, 사용하지 않을 것 같다.

두번째는 HTML 파일을 리턴하는 것이다.

res.sendFile(dirname, 'index.html')

 

위와 같은 방법으로 반환하나, 이는 정적인 화면을 반환하게 된다.

 

세번째는 HTML 헬퍼들을 쓰는 방법이다.

pug, ejs등 여러가지 템플릿 엔진이 있는데 이들 모두 MVC 패턴 기준으로, view를 만들어주는 역할을 한다.

 

어찌 되었건 server는 pug코드나 ejs코드를 HTML 파일로 먼저 컴파일 한 후, 이를 Client 쪽으로 보내주기 때문에, 

변수등의 동적인 기능을 사용함과 동시에 SSR을 유지할 수 있다.

 

어쨋든 이런 템플릿 엔진을 express에 적용하려면, app을 만들 때, view engine을 설정하여서 사용한다.

cosnt app = express();

app.set("view engine", "ejs");

위와 같은 방법으로 설정한다.

 

다만 pug는 문법이 html 문법과는 다르다. ejs엔진을 사용하게 되면 거의 일치하게 되기 때문에 러시아어 프로젝트에서는 ejs 엔진을 사용하기로 했다.

 

ejs파일은 따로 express가 검사하는 views 폴더를 생성하여 넣어주어야 한다.

 

이후 res에서 반환해주면 된다.

//확장자를 붙일 필요가 없다. 위에서 이미 어떤 엔진을 쓸 것인지 알려줬기 때문.
//views 폴더 안에 filename.ejs 폴더가 있다고 가정한다.
return res.render("filename")

 

 

+오류 추가

express에서 기본으로 설정되어 있는 view 저장 장소는 프로젝트 폴더 바로 한단계 아래인, project/views

그러나 내가 프로젝트의 정리를 위해 project/src/views로 만들면 당연하게도 인식하지 못한다.

따라서 경로를 수정할 방법을 알아야 한다.

//cwd는 current working directory의 줄임이다
process.cwd()

위 메소드로 현재 프로젝트의 주소를 확인해 볼 수 있고, 기준은 nodeJS를 시작하며 따라서 서버를 실행하는 package.json이 있는 위치이다.

 

여기에 +/views를 더한게 express가 view를 감시하는 기본 주소.

 

위 기본 경로를 변경하는 건, view엔진을 설정해주는 것 처럼 app.set으로 할 수 있다.

app.set("views", process.cwd() + "/src/views");

 

 

#2 코드 리팩토링 - 특정 폴더 안에 모든 파일을 import 하는 자동화 코드

추후 상술

https://github.com/cbnusw/sw-judger/blob/main/judger-backend/judger-api/routes/api/index.js

 

 

 

#3 HTML 엔진들 간단한 사용 방법

1. JS 연동

 

ejs : <% 내부에 js 코드 사용 %>

다만 ejs코드의 경우 중간에 태그가 들어가면 <% %> 안에 모든 js를 담을 수 없어 끊어서 여러번 써야하는게 시각적으로 좋지 않다는 단점이 있다.

 

pug : #{내부에 js 코드 사용}

 

 

2. 코드의 재사용

ejs: 공식 문서 https://www.npmjs.com/package/ejs/v/3.1.5

ejs

include 를 사용한다.

//공식 문서 예제
<%- include('user/show', {user: user}) %>

//간단하게 보면
<%-include('header.ejs') %>

 

pug 역시 마찬가지.

'include 경로명' 을 사용한다.

 

pug는 이외에도 extend - block이라는 개념을 사용하여 html 구조를 통째로 상속하는 기능이 있지만

개인적으로는 가독성이 떨어지고 유연성이 부족한 것 같아 사용하지 않을 것 같다.

 

 

3. 변수의 사용.

먼저 변수를 어디서 부터 받는지를 생각해야한다.

Controller의 render 함수에서 받게 되는데, 첫번째 인자로는 이전에 기술한대로 render할 파일명을 받고, 두번째 인자로 변수들을 모두 받는다. object내부의 key-value 형태로 받는다.

res.render("home", {title: "home"})

 

ejs에서는 먼저 변수를 사용할 때 기본적으로 <%= %> 이나 <%- %>를 사용한다.

이렇게 되면 직접 만든 변수나 위 예시처럼 서버에서 넘겨진 변수 모두 사용할 수 있다.

<%= title %>

 

#4 HTML 엔진의 추가 기능

1. 조건문

2. 반복문(iteration)

3. Mixin : 인자가 많은 component라고 보면 된다. pug에 있음