카테고리 없음

EJS 사용하기

수잉 2021. 10. 3. 16:23

※ EJS (Embedded JavaScript) : express에서 dynamic website(동적 웹사이트)를 만들기 위해 template로 사용되는 파일.(확장자: .ejs)

 

우선, 터미널에서 ejs package를 설치한다.

 

 

ejs를 사용하기 위해서는 다음과 같은 코드가 필요하다.

· express의 view engine에 ejs를 set하는 코드

//index.js

app.set('view engine','ejs')//템플릿 엔진

 

· query를 통해 이름을 받기 위한 코드

//index.js

app.get('/welcome', (req,res)=>{

  res.render('welcome', {name:req.query.nameQuery});

})  - req.query에 query들이 저장된다.

 

· route parameter

//index.js

app.get('/welcome/:nameParam',(req,res)=>{

  res.render('welcome', {name:req.params.nameParam});

})

 - 콜론(:) 뒤에 입력되는 텍스트가 req.params에 저장된다.

 - ejs를 사용하기 위해서는 res.render 함수를 사용해야 한다. 

   첫 번째 parameter로 ejs 이름을, 두 번째 parameter로 ejs에서 사용될 object를 전달한다.

  ※ res.render 함수는 ejs를 /views 폴더에서 찾으므로 views 폴더의 이름 변경 X

 

<!-- views/welcome.ejs -->
<html>
  <head>

  </head>
  <body>
    <h1>Hello
      <% if(name){ %>
        <span class="name"><%= name %>!</span>
      <% } else { %>
        <span class="stranger">Stranger!</span>
      <% } %>
    </h1>
  </body>
</html>

ejs는 html에 js코드가 더해진 형태이다.

-> 모든 js 코드는 <% %>에 들어가야 한다.

변수를 출력할 때는 <%=(변수명) %>을 사용한다.

 

위의 코드에서는 name이 있으면 name을 출력하고, name이 없으면 stranger!을 출력한다.

 

실습

1. http://localhost:3000/welcome 접속 시

 

2. http://localhost:3000/welcome?nameQuery=suin 접속 시 

 => nameQuery 값을 받아서 출력

3. http://localhost:3000/welcome/suin 접속 시

 => route parameter를 받아서 출력

 

 

출처 : https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/Hello-World/EJS%EB%A1%9C-Dynamic-Website-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

 

Node JS 첫걸음/Hello World!: EJS로 Dynamic Website 만들기 - A MEAN Blog

소스코드 이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실

www.a-mean-blog.com