[First Project] 회원탈퇴 구현하기(DELETE userInfo)

1. 회원탈퇴 flow 정리

1) 마이페이지에 있는 회원탈퇴 버튼을 누르면
2) 데이터베이스에서 해당 회원이 맞는지 검색하고
3) active 값을 false로 바꾼다.

이번 이슈에서는 flow를 정리할 때부터 혼란이 시작됐다. SR 때 작성했던 API 문서를 자세히 기억하지 못하고 있었기 때문이다. 아래의 API 문서와 같이 보자면

2. API

• Method: DELETE
• URI: http://localhost/users/edit/delete
• Request

[BODY] active : false

• Response
  200: OK

{active: false}

500: Internal Server Error

err

body에 넣어서 요청하기로 한 active는 서버에서 delete 메소드를 사용하는 게 자칫 위험할 수 있다는 판단 하에, 로그인 여부를 확인하기 위한 방편으로 데이터베이스 user 테이블에 추가한 값이다. 로그인되어있는 모든 회원의 active는 true이며, 탈퇴 요청 시에 false로 바꾸어주면 다른 GET 요청에서도 탈퇴한 회원의 정보는 가지고 오지 않게 된다. 즉, 우리 팀의 회원탈퇴는 실질적인 데이터베이스 삭제가 아니라 active 값만 바꾸어주는 '임의의 삭제 처리' 개념이다.
그러나 기억이 가물가물해져버린 나는 왜 req에 active만 들어있는지, 그럼 flow는 'DB 검색-> active: false 반환-> DB 삭제'가 맞는지, 로그아웃에서도 destroy를 썼는데 탈퇴 시에도 같은 메소드를 쓰면 뭐라 다른건지 모든 과정이 헷갈리기 시작했다. 게다가 프로젝트의 와이어프레임에서 보여지는 회원탈퇴 버튼의 위치와 API에 작성된 URL이 달라 더더욱 혼돈에 빠졌다. SR 문서는 팀원들과 협의해 수정한 뒤, 우선 얼기설기 코드의 틀이라도 잡아보자는 생각으로 아래의 코드를 작성했다.

3. 코드 작성 과정

SERVER/controller/users/deleteUserInfo.js

const { users } = require('../../../models');

module.exports = {
  post: (req, res) => {
    const { active } = req.body;

    const delUser = delUser.findOne({
      where: {
        useremail: useremail,
        password: password,
        githubId: githubId,
        active: true,
      },
    });
    if (delUser !== null) {
      delUser.destroy({
        truncate: true,
      });
      res.status(200).send('안전하게 탈퇴되었습니다.');
    } else {
      res.status(500).send('err');
    }
  },
};

3-1. 참고한 고마운 글들

1) 회원탈퇴 시 데이터 처리
https://velog.io/@gyu716625/TIL20.07.28%ED%99%94

2) sequelize delete query
https://sequelize.org/master/manual/model-querying-basics.html#simple-delete-queries

3) sequelize 예제
https://jongmin92.github.io/2017/04/08/Node/sequelize/#9

4. 회원탈퇴 구현 회고

전반적으로 너무 정신이 없고 실수가 많았다. 변수나 키값 등 자잘한 코드 수정을 많이 해서 완전히 기록했는지도 확신이 없다. 첫 스텝이 꼬이면 다시 풀면 된다. 모르겠으면 함께 얘기해보면 된다. 조급해지지만 않으면 뭐든 괜찮다.

*에러와 수정

1) 코드 수정
1차 코드를 PR한 이후 팀원의 조언에 따라 몇몇 부분을 수정했다.

const session = require('express-session');
const { users } = require('../../../models');

module.exports = {
  delete: (req, res) => {
    const session = req.session; //이전처럼 active값을 찾으면 로그인된 모든 회원의 데이터를 불러 올 수도 있다!
    const delUser = delUser.findOne({
          where: {
        id: session.userid,
      },
    });
    if (delUser !== null) {
      delUser.destroy({
        truncate: true,
      });
      res.status(200).send('안전하게 탈퇴처리되었습니다.');
    } else {
      res.status(500).send('err');
    }
  },
};

그리고 클라이언트 파트에서 위 코드를 구동해본 뒤, 오류를 찾아 아래와 같이 최종 수정했다.

const session = require('express-session');
const { users } = require('../../../models');

module.exports = {
  delete: (req, res) => {
  console.log('session userid:', req.session.userid);
    users
      .destroy({
        where: {
          id: req.session.userid,
        },
      })
      .then(() => {
        //session 정보도 지워줘야함.
        req.session.destroy((err) => {
          if (err) {
            res.status(400).send('you are currently not logined');
          } else {
            res.status(200).send('안전하게 탈퇴처리되었습니다.');
          }
        });
      })
      .catch((err) => {
        res.status(500).send('err');
      });
    },
  };

미처 파악하지 못했던 큰 실수는 이 프로젝트에서 처음으로 delete를 사용하면서도 cors 메소드에 추가해주지 않았다는 점이었다. 난데없이 cors에러에 시달리던 클라이언트쪽 팀원분이 찾아내주셨다(정신차려!!).
그리고 req.session에 담긴 userid를 기준으로 users 테이블에서 삭제할 정보를 찾게끔 코드를 정리했다(delUser 변수 삭제).
마지막으로 destroy 후 응답을 받은 클라이언트에서 alert 창을 띄우면, 사용자가 확인 버튼을 눌러야 main으로 리다이렉트 되도록 했다. 이전에는 session이 삭제되지 않아 로그인된 main 페이지로 리다이렉트 되었다고 한다.

SERVER/index.js

app.use(cookieParser());
app.use(bodyParser.json());
app.use(express.urlencoded({ extended: false }));

app.use(
  cors({
    origin: true,
    methods: ['GET', 'POST', 'OPTION', 'PUT', 'DELETE'],
    credentials: true,
  }),
);

//이하는 생략합니다.

2) git 사용
심호흡해가면서 신중하게 commit한 후에 쌩뚱맞게 $ git push origin Dev를 했다. PR하려고 보니 깃헙이 텅텅 비어 있어 그제야 깨달았다. Feature로 push했어야 하는데... 하하하 다시 push, pr하고 나니 commit이 딸려오긴 했지만 다음부턴 심호흡을 두 번씩 해야겠다.

다음에는
1. git과 함께할 때는 심호흡 두 번씩
2. 일단 코드를 짜보는 것도 도움이 된다. 틀리는 것보다 모르고 지나가는 게 더 큰일이니.
3. 소통은 과해도 좋을 것 같다.
4. 코드 작성 만큼이나 수정도 중요한 능력이다. 잘 고쳐나가는 연습을 하자.

➤계속 공부하고 있습니다. 더 나은 의견과 질문이 있으시다면 언제든, 어떤 경로로든 이야기해주세요.