[Node.js] { form 태그 : req.query, let : 스코프 }

NomadCoders - 유튜브 챌린지 진행 중 막힌 부분

// pug 파일
extends index.pug
include mixins/movies.pug

block contents
  form(action='/filter')
    input(name='year' type='number' placeholder='Filter by year')
    input(name='ratings' type='number' placeholder='Filter by rating')
    input(type='submit' value='Search')
  ul
    each movie in movies
      +movies(movie)

위 pug파일 내의 form태그를 통해 (year || ratings) input을 쿼리스트링으로 받고, 아래 moviecontroller에서 조건에 맞는 영화를 가지고 와서 리스트로 보여주는 형태의 Get API 설계가 과제 중 하나였다.

export const filterMovie = (req, res) => {
  let titleStr = '';
  let movies = {};
  
  if (!req.query.year) {
    titleStr = req.query.ratings;
    movies = getMovieByMinimumRating(Number(req.query.ratings));
  } else {
    titleStr = req.query.year;
    movies = getMovieByMinimumYear(Number(req.query.year));
  }
  return res.render("filter", {
    pageTitle: `Searching by Ratings : ${titleStr}`,
    movies: movies
  });
};

삽질 1) req.body === undefined 현상

🚨req.body.year, req.body 가 전부 undefined로 출력이 되어 구글링을 통해 이리해보고 저리해봐도 아무것도 되는것이 없더라. 결국 알아낸 해결책은 query로 받는 것

사실 과제에 쿼리스트링으로 받는것이라고 예시 화면을 통해 보여주고 있었고, form태그를 통해 받을 때도 get method로 받는거라 쿼리스트링으로 받는다는걸 이론적으론 당연히 알고 있는 부분이었다. 하지만 실제로 바텀업으로 구현한 적은 이번이 처음이라 그런가 req.query로 받으면 되는 쉬운걸 놓치고 한참을 헤매었다.

머리로 이해한 것과 실제로 아는것은 다르다는걸 다시 한번 느꼈다. 직접 만들어봐야 진짜 아는것이다.

삽질 2) if 문 안에 let titleStr = ; 선언

🚨var의 스코프는 함수단위이고, let, const의 스코프는 중괄호 단위라는걸 이론적으로 알고 있었다. 하지만 IDE에서 밑줄이 그어지고 이거 이상하다고 고치라고 나와 있는데도 "분명히 변수 선언하고 값도 대입해줬는데 왜 defined 되어 있지 않다는거지?" 라는 생각을 하며 한참을 헤매었다.

이것도 마찬가지로 개발 경험이 부족해서 이론적으로 당연한 이야기를 가지고 한참을 헤맨 것이라 볼수 있겠다. 역시 알고 넘어가는것과 실제로 스스로 개발하면서 삽질을 해보아 알게 되는것은 질적으로 차이가 있는 것 같다.

이제 다음 부터는 위 2가지와 비슷한 에러가 생기면 훨씬 빠른 시간 내에 직관적으로 문제를 찾아 낼 수 있을것 같다.