[node.js] ajax, fetch, async, await, 로그인 기능 구현

0. 목차

1. 개요

2. 해결

3. 후기

1. 개요

2022.02.15 - [경일/nodejs] - [node.js] fetch(async, await)로 로그인기능 만들어보기

[node.js] fetch(async, await)로 로그인기능 만들어보기

이거 하다가 마지막에 뻘짓을 했었는데 말이지.. ㅎㅎ

해결했다.

2. 해결

app.post('/user/login', (req, res) => {
  const { userid, userpw } = req.body;
  const user = userList.filter(
    (v) => v.userid === userid && v.userpw === userpw
  );
  if (user[0] !== undefined) {
    req.session.user = user[0];
    res.render('successLogin.html', { user: user[0] });
  } else {
    res.send('로그인 실패');
  }
});

server.js

 

   async function onButtonClicked(url) {
      const userid = document.querySelector('#userid').value;
      const userpw = document.querySelector('#userpw').value;
      const content = document.querySelector('#content');

      const option = {
        method: 'post',
        headers: {
          'Content-type': 'application/json',
        },
        body: JSON.stringify({ userid, userpw }),
      };
      const response = await fetch('/user/login', option);
      const data = await response.text();
      content.innerHTML = data;
    }

fetch

 

<p>{{user.username}}님 환영합니다~</p>
<ul>
  <li><a href=""> profile </a></li>
  <li><a href=""> logout </a></li>
</ul>

successLogin.html

 

이렇게 하면 된다..

3. 후기

 

나는 텍스트를 보내주면 nunjucks구문이 알아서 동작할 줄 알았는데 아니었다.

랜더링한 결과를 res에 실어서 보내주면 data 에서 받는다.. ㅎ 

딱 한발자국이 모자랐던것 같다...