23/11/23 TIL __ ejs 를 이용해 express 환경에서 설계된 내용을 보여주자

 

 

🏞️   상황

프로젝트를 진행함에 있어서 사실 보여지는 부분은 꽤나 중요하다.

내일배움캠프 같은 경우, 백엔드 과정 진행자끼리 모여서 프로젝트를 하기 때문에, 프론트와의 협업 경험이 없어 좀 걱정이였다.

이전까지는 html, css, js를 이용해 기초적인 부분을 진행했기 때문에, 크게 어려움은 없었지만,

express를 활용해 데이터를 주고 받는 상황에서 어떻게 값을 전달해야 할지 정말 막막했다.

일단 공식문서와 여러 활용 예시들을 보았다.

 

 

 

 

📷  ejs 사용하기

가장 중요한 숙제중 하나는 보여진 화면에서, 버튼을 눌렀을 경우였다.

파람스 값으로 유저 id나, post id가 전달이 되어야 하는 상황인 경우

어떻게 값을 넣어줘서 원하는 router를 실행되도록 할지 말이다. 

 

단순히 값을 보여주면서 화면을 보여주는건 데이터를 넣어주면 되는데,

보여준 화면에서 이벤트가 일어난 경우, 원하는 라우터로 와서 작동해야 했다.

 

 

일단 차근차근 다시 살펴보자.

1. 뽑은 데이터를 화면에 보여주기

 

 

라우터 함수 안에서, res.render() 를 이용해 데이터를 ejs 파일로 넘겨줄 수 있다.

res.render('넘겨줄 ejs파일명'. ,   { 보낼 데이터 이름: 보낼 데이터 값} )

res.render('modifyUserInfo', {
    userId: req.params.userId,
    data: userData,
    pwd: true,
});

 

modifyUserInfo.ejs 파일에서는 아래와 같이 사용할 수 있다.

<input  value="<%= data.description %>" />

 

넘겨받은 데이터를 만질때에는 <%= %>를 기본적으로  많이 사용한다.

 

 

2. 버튼을 누르면 params 값에 따른 router가 동작하게 하기. GET / POST

 

예를 들면 버튼을 누른 경우

api/user/modify/32 라는 주소로  post요청을 보내야 된다고 해보자.

그런데 문제는 주소값이 넘겨받아야 할 데이터였다. 

 

처음에는 버튼에 onclick 메소드를 줘서 

ejs 파일의 하단에  script 태그를 열고, 이벤트가 일어난 경우 함수가 실행되도록 적어준 후,

해당 함수 내부에 params 값을 가져오려 했다. 당연히 잘 작동할거라고 생각했다.

그런데 안된다. 불러와 지지 않았다. 

🧐

 

알고보니 ejs의 특성이 있었다.

EJS : 서버측에서 데이터를 템플릿에 넣어, 그걸 활용해 클라이언트에게 전달하는 역할을 한다. 

 

작동 순서는 이렇다. 

보여진 화면에서 사용자가 버튼을 누른다.
버튼을 누른 순간 onclick에 걸려있던 함수 saveUserInfo() 를 찾는다.
<script> 태그 내부에 있던 saveUserInfo() 함수는 클라이언트 측에서 실행된다.

 

클라이언트 측에서 실행이 되기 때문에, 템플릿에 넣은 데이터를 읽어올 수 없다.

 

그렇지만 방법은 있다. 

방법 1.  스크립트 태그에서 변수에 넣어둔 후에 실행하기.

<script>
  const userId = '<%= user.id %>'; // 클라이언트 측 JavaScript 변수에 할당
  function onclickFun(e) {
    e.preventDefault();
    location.href = '/api/user/modify/' + userId; // 할당된 변수 사용
  }
</script>

 

ejs에서 템플릿에 담은 데이터는 이벤트 리스너 안에서 작동하지 않는다.

서버측에서 실행되는게 아니라 클라이언트 측에서 리스너가 작동하기 때문이다. 

작동하게 하려면 위의 예시처럼 변수에 담아 써야한다. 

 

 

 

 

방법 2.  스크립트 태그 내부가 아닌, 버튼이나 form 태그 내부의 속성으로 적어주기.

 

<form action="/api/user/modify/<%= userId %>" method="POST">
 <button id="Sign_up_save" type="submit" class="btn btn-secondary Sign_up_btn">
  저장하기
 </button>
</form>

 

이렇게 하면 템플릿에 담은 데이터 값을 활용할 수 있다. 

또한 form 태그를 이용하면,  action에는 주소를, method에는 요청의 종류를 적어줄 수 있어서, post 요청이 가능하다. 

 

 

 

🫠  느낀점

ejs는 일반 html과 많이 비슷하게 생겼고, 짧은 팀프로젝트 기간이기에

해당 템플릿 엔진에 대한 사용법만 보고 급하게 사용하려고 했는데,

그런 부분때문에 오히려 시간이 더 많이 들어갔던 것 같다.

 

급할수록 대충 사용법 알겟으니 바로 하는것보다

사용하고자 하는 도구에 대해 좀더 파악하는게 오히려 도움이 될수도 있겠다 싶었다.

 

 

다음 포스팅에서는 post 요청이 아닌 delete 요청이나,

put 혹은 patch 같은 요청들은 어떻게 처리를 해야할지 적어보겟다.

 

 

 

 

참고한 사이트 

https://ejs.co/#docs

EJS -- Embedded JavaScript templates