[내배캠 TIL ] 10주차 금요일 ::node.js 와 ejs 의 차이

javascript를 통해 브라우저를 연결하는것과 ejs 라는 템플릿을 이용해 브라우저를 띄우는것에 대해 고민을 하던 와중 

도대체 두개는 무슨 차이가 있을까? 라는 고민이 생겨 알아보았다.

우선 내가 알고있는 상황은 javascript를 통해 브라우저를 띄우기 위해서는 fetch문을 통해 api를 연결해주고, 

ejs 같은 경우는 render를 통한 방식으로 브라우저에 api를 연결해준다.

 

그리고 검색을 하면서 node.js를 통해 브라우저를 띄우는 방법고 ejs를 통해 브라우저를 띄우는 방법에 대한 차이는 

우선 크게 다르지는 않는것 같은데 실무에서는 ejs를 잘 쓰지 않는다고 하는 것 같다. 

하지만 혼자 개발을 할 때에는 node.js , jade가 편리하고 팀단위로 개발을 할 때에는 ejs를 추천한다고 한다.

 

# node.js를 통해 브라우저를 연결할때는 fetch 와 html에 < script>태그를 통해 연결을 하면 되고 

# ejs를 사용하기 위해서는 셋팅과정이 필요하다.

ejs를 사용하기 위해 우선 터미널에서 템플릿을 설치해야한다. npm i ejs

그리고 나서 app.js와 views 파일과 index.js 파일을 나누어 정리를 해야한다.

- app.js 파일 내 템플릿엔진 세팅 코드, /views 디렉토리 내 .ejs 파일 확인하기, /routes/index.js 파일 확인하기

- app.js : express 프로젝트 기본 세팅(총괄 세팅)파일

- /views : 템플릿엔진 파일을 두는 곳

- /routes/index.js : 라우팅 하는 파일(클라이언트 요청에 따라 서버가 어떤 응답하겠다 를 정해놓은 파일)

- 각각 할 일이 나뉘어져있다는 것을 알아야함 : 기본 구조를 나누어 놓음으로서 알아보기 편함(에러가 발생한다면 그 부분만 고치기 편하고, 추가할 때도 편함)

 

나도  현재 ejs 템플릿을 한번밖에 사용해보지 않아서 많은 경험과 지식이 없지만 검색을 해본 결과 이런 정보들이 있었다.

# 뷰 파일 내에서 자바스크립트 코드 사용하기

- 정적인 문서 파일이 아닌, 연산의 결과, 연산 혹은 변수(값이 때에 따라 다를 수 있는)를 문서 내에서 나타낼 수 있는 장점

- ejs 파일(뷰) 내에서 자바스크립트 코드를 쓴다면 코드 한 줄마다 <% %> 또는 <%= %> 로 감싸면 됨

- <% %> 와 <%= %>의 차이는 변수(값이 들어간)를 사용할 때에는 <%= %> 이것을 쓰고, 일반 코딩때는 <% %>를 씀

- 변수 정의는 해당 뷰 파일을 라우팅해주고(랜더링해주는) render 메서드가 있는 /routes/index.js에 정의되어있음

-  render 메서드의 인수로 변수를 넘김(json 형태)

 

render를 통해 브라우저로 연결한다는것은 알고 있어서 ejs 또한 다시 써보고 싶긴 하지만 , 실무에서는 많이 쓰지 않는다고 하여서, 만약 궁금하다면 여유가 있을때 검색하면서 한번씩 보는것도 좋을 것  같다.