인프런 커뮤니티 질문&답변

프로필 수정 기능을 구현하기 위한 profileUpdate.html

{% extends 'layout.html' %} {% block content %}
<div class="timeline">
  <form id="profile-update-form">
    <!-- <div class="input-group">
      <label for="join-email">이메일</label>
      <input id="join-email" type="email" name="email" />
    </div> -->
    <div class="input-group">
      <label for="join-nick">닉네임</label>
      <input id="join-nick" type="text" name="nick" />
    </div>
    <div class="input-group">
      <label for="join-password">비밀번호</label>
      <input id="join-password" type="password" name="password" />
    </div>
    <button id="join-btn" type="submit" class="btn">수정</button>
  </form>
</div>
{% endblock %} {% block script %}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  window.onload = () => {
    const errorParam = new URL(location.href).searchParams.get('error');
    if (errorParam) {
      alert(errorParam);
    }
  };

  if (document.getElementById('profile-update-form')) {
    document.addEventListener('submit', async (event) => {
      event.preventDefault();

      const formData = new FormData(event.target);
      const config = {
        headers: {
          'content-type': 'application/json',
        },
      };

      axios
        .put('/profile/update', formData, config)
        .then((res) => {
          alert('프로필 정보가 수정되었습니다.');
          window.location.href = '/profile';
        })
        .catch((error) => {
          alert(error);
        });
    });
  }
</script>
{% endblock %}

그리고 controller/page.js

exports.renderProfileUpdate = (req, res, next) => {
  res.render('profileUpdate', { title: '내 정보 수정 - NodeBird' });
};

exports.profileUpdate = async (req, res, next) => {
  try {
    const { nick, password } = req.body;
    const id = req.user.id;
    const exUser = await User.findOne({ where: { id } });
    if (!exUser) {
      throw new Error('존재하지 않는 사용자입니다.');
      // res.status(404).send('no user');
    }
    const sameNickUser = await User.findOne({
      where: {
        nick,
        id: {
          [Op.ne]: exUser.id,
        },
      },
    });
    if (sameNickUser) {
      throw new Error('중복된 닉네임입니다.');
      // res.status(501).send('중복된 닉네임입니다.');
    }

    const hash = await bcrypt.hash(password, 12);

    exUser.set({
      nick,
      password: hash,
    });
    await exUser.save();

    res.status(201).send();
  } catch (error) {
    console.error(error);
    next(error);
  }
};

app.js의 에러처리 미들웨어

app.use((err, req, res, next) => {
  // 404 다음은 에러처리 미들웨어
  console.error('에러는 ', err.message);
  res.locals.message = err.message;
  res.locals.error = process.env.NODE_ENV !== 'production' ? err : {}; // 보안상 위험(오히려 배포 시 사용자 화면에 에러를 숨김) // 에러를 로깅 서비스에 넘김
  res.status(err.status | 500);
  res.render('error'); // views/error.html
});

일부러 중복된 닉네임을 넣어 라우터에서 에러를 발생시켰을 때,

에러처리미들웨어의 console.error('에러는 ', err.message); 부분에서 "Error: 중복된 닉네임입니다.

at exports.profileUpdate (/nodestudy/nodebird/controllers/page.js:31:13)

at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

에러는 중복된 닉네임입니다.

PUT /profile/update 500 10.568 ms - 1862" 로 에러 메시지가 정상적으로 찍히는 것을 확인하였습니다.

preview 탭에선 정상적으로 나오는 것 같은데, 실제 브라우저 화면에선

위와 같이 뜨면서 제가 원하는 에러 메시지('중복된 닉네임입니다')가 alert 창에 뜨지 않으며, error.html이 렌더링도 되지 않고 있습니다.

구글링해봐도 제가 잘 못한건지 이유를 못찾겠습니다🥲 제가 뭘 놓친걸까요?