[TIL] 210703

어제 강의를 다듣고 난뒤 오늘은 새로운 프로젝트 뼈대를 다 만들었다. 이번에는 저번과는 다르게 assets폴더에 프론트들을 넣어줬다. 강의에서 ejs를 사용안하길래 사용안했다. 기본 뼈대는 월요일날 항해99에서 제공해준다는데 난 기초 프로젝트와 똑같이 (시간이 된다면) 내가 원하는 다른 기능들을 한번 넣어보고싶어서 프론트쪽도 같이 해줬다. 일단 기초뼈대와 회원가입기능 + 회원가입 validation기능을 구현했다.

-------🖥️ Frontend-------

📂회원가입

프론트쪽에는 기존과 똑같이 jQuery식으로 데이터를 보내줬다 나중에 시간이 나면 axios식으로 다 바꿔보려고 한다.

function signUp() {
        const nickname = $('#nickname').val();
        const id = $('#id').val();
        const password1 = $('#password1').val();
        const password2 = $('#password2').val();

        $.ajax({
          type: 'POST',
          url: '/api/users',
          data: {
            nickname: nickname,
            id: id,
            password: password1,
            password2: password2,
          },
          success: function (response) {
            alert('회원가입을 축하드립니다!', function () {
              window.location.replace('/login.html');
            });
          },
          error: function (error) {
            alert(error.responseJSON.errorMessage);
          },
        });
      }

-------⚙️ Backend-------

📂회원가입

router.post('/users', async (req, res) => {
    const { nickname, id, password, password2 } = req.body;
    const idValidation = /^(?=.*[a-zA-z])(?=.*[0-9]).{3,}$/;
    const pwValidation = /^(?=.*[a-zA-z0-9]).{4,}$/;
  
    if (!idValidation.test(id)) {
      res.status(400).send({
        errorMessage: '아이디가 조건에 맞지않습니다.',
      });
      return;
    }
  
    if (!pwValidation.test(password)) {
      res.status(400).send({
        errorMessage: '비밀번호가 조건에 맞지않습니다.',
      });
      return;
    }
  
    if (password.search(id) > -1) {
      res.status(400).send({
        errorMessage: '비밀번호에 아이디가 포함되어있습니다.',
      });
      return;
    }
  
    if (password !== password2) {
      res.status(400).send({
        errorMessage: '패스워드가 일치하지 않습니다.',
      });
      return;
    }
  
    if (nickname == '') {
      res.status(400).send({
        errorMessage: '닉네임을 입력해주세요.',
      });
      return;
    }
  
    const existUsers = await User.find({
      $or: [{ id }, { nickname }],
    });
    if (existUsers.length) {
      res.status(400).send({
        errorMessage: '이미 가입된 ID나 닉네임이 있습니다.',
      });
      return;
    }
  
    const user = new User({ id, nickname, password });
    await user.save();
  
    res.status(201).send();
  });