Embedded JavaScript → html에 js를 내장하는 파일

• 이를 통해 페이지를 동적으로 짜는 것이 수월
• 서버에서 보낸 변수를 가져와 사용하는 용도로 쓰임

기본

• <% %> 코드를 내장
• <%= %> or <%- %> 변수를 내장
• 변수 넘겨줘서 사용하기

members = [{name: "test"}, ...]
router.get('/', (req, res) => {
		res.render('index', {members})
})

<% members.map(member => { %>
	<div>
			<p> <%= member.name %> </p>
	</div>
<% }).join("") %>

• 주 의
  1. 개발자 모드에서 볼 수 없다
  2. <% %> 무조건 한 줄씩
  3. 변수 선언은 각 <% %> 마다 독립적인 스코프

• 꿀 팁
  1. 일단 작성하고 변수부분만 <% %> 씌운다

심화

1. CSS 파일 link 시키기

   ejs는 동적 페이지여서 그냥 디렉토리로 link하면 안된다 app.js 에서 정적 리소스를 명시하고 public 기준으로 css파일을 가져오면 된다

   app.use(express.static(__dirname + '/public'))
   

   <link rel="stylesheet" type="text/css" href="/index.css">
   

2. GET, POST

   방법 1. 일반적으로 body를 통해 데이터 전달하기

   <form action="/add" method="POST">
   		<input name="name" type="text">
       <input name="phone" type="text">
       <input type="submit" value="submit">
   </form>
   

   router.post('/add', async (req, res) => {
   		const newMembers = {
   				name: req.body.name
   				phone: req.body.phone
   		}
       await dbMembers.add(newMembers)
       res.redirect('/')
   })
   

   방법 2. query로 데이터 전달하기

   <form action="/delete?id=<%= member.id%>" method="POST">
   	  <button type="submit"> 삭제 </button>
   </form>
   

   router.post('/delete', async (req, res) => {
       await dbMembers.doc(req.query.id).delete()
       res.redirect('/')
   })
   

   방법 3. js에서 axios로 요청하기

   ⭐ post에서 body를 파싱하려면 body-parser 가 필요하다.. yarn add 하자..

   express-generator 사용했으면 cookie-parser 있는데 무난히 될듯?