[TIL25_23.2.2.] [Node] 프론트엔드와의 첫 통신 & 유저 회원가입 오류 디버깅

오늘은 크게 2가지를 했다. 프론트엔드와의 첫 통신 그리고 유저 회원가입에서 오류 디버깅이다.

프론트엔드와의 첫 통신

프론트엔드와 통신할 때, req.body에 프론트엔드 측에서 보내는 변수를 받아와야 했다. 나는 처음에 데이터베이스 스키마를 구현할 때, name, email, password, profileImage를 받아와야 했다. profileImage는 null 값이 들어가도 돼서 필수 요소는 아니었다. 그런데 name은 필수로 받아와야 하는 정보였기 때문에, 프론트에서 name을 보낼 수 있도록 logic을 추가하거나 백엔드에서 임시적으로 상수로 적용해야 했다. 우리는 name을 보내지 않는 것으로 결정했고 나는 임시적으로 상수 처리를 하려고 했는데 쉽게 되지가 않았다.

생각보다 간단했다.

⬇️ 원래 코드

const createUser = async (name, email, password, profileImage) => {
  await mysqlDataSource.query(
    `
    INSERT INTO users (
      name, 
      email, 
      password, 
      profile_image
    )
    VALUES (
      ?,
      ?, 
      ?, 
      ?
    );
    `,
    [name, email, password, profileImage]
  );
};

⬇️ 상수 처리한 코드

const createUser = async (name, email, password, profileImage) => {
  await mysqlDataSource.query(
    `
    INSERT INTO users (
      name, 
      email, 
      password, 
      profile_image
    )
    VALUES (
      ?,
      ?, 
      ?, 
      ?
    );
    `,
    ['이름', email, password, 'imgUrl']
  );
};

userDao.js 파일에서 들어오는 input 값을 상수로 변환만 해주면 됐었다. createUser 의 인자 (name, profileImage)를 삭제도 하고, controller.js 파일에서도 변경해보고 그랬었는데 그럴 필요가 없었다.

유저 회원가입 오류 디버깅

이 디버깅은 고민하는데 꽤나 시간을 오래 썼는데, 동기 분의 도움으로 생각보다 간단하게 해결했다. 유저 회원가입을 할 때, 이메일 중복 검사를 해서 이미 있는 이메일이면 오류 처리를 하는 것이었다.

⬇️ 오류 코드

const signUp = async (name, email, password, profileImage) => {
  const [userInfo] = await userDao.getUser(email);

  if (userInfo.email) {
    const err = new Error('Email Already Exists.');
    err.code = 400;
    throw err;
  }

  const saltRounds = 12;
  const hashPassword = await bcrypt.hash(password, saltRounds);
  const createUser = await userDao.createUser(
    name,
    email,
    hashPassword,
    profileImage
  );

  return createUser;
};

⬇️ 해결 코드

const signUp = async (name, email, password, profileImage) => {
  const [userInfo] = await userDao.getUser(email);

  if (userInfo) {
    const err = new Error('Email Already Exists.');
    err.code = 400;
    throw err;
  }

  const saltRounds = 12;
  const hashPassword = await bcrypt.hash(password, saltRounds);
  const createUser = await userDao.createUser(
    name,
    email,
    hashPassword,
    profileImage
  );

  return createUser;
};

문제는 If문 안에 있었다. userDao.getUser(email)로 받아온 상수 [userInfo]는 유저 이메일이 있을 때만 값을 가지게 된다. 그런데 값이 없을 때 userInfo.email을 치니까 없는 값의 배열에서 인덱스를 찾으려고 하니까 오류가 났고, 이 때문에 에러가 났던 것이다.