[✍️ Project Dev Log] 2022-01-06

오늘은 어떻게 프로젝트에 기여했나요?

• 어제 작업한 oauth테스트 코드를 현재 진행 중인 finalproject에 적용

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• promise의 남용

// ! naver
const naverUrl = `https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id=${naverClientID}&client_secret=${naverClientSecret}&code=${req.body.authorizationCode}&state=${req.body.authorizationState}`;
console.log("naverUrl:", naverUrl);
axios
  .get(naverUrl)
  .then((res) => {
    console.log(res.data);
    if (!res.data.access_token) {
      console.log("@@@ social login fail");
    } else {
      console.log("@@@ token exists");
      axios({
        method: "get",
        url: "https://openapi.naver.com/v1/nid/me",
        headers: {
          Authorization: `Bearer ${res.data.access_token}`,
        },
      }).then((res) => {
        console.log(res.data);
      });
    }
  })
  .catch((err) => {
    console.log(err);
  });

어제 oauth를 위해 테스팅한 코드는 axios요청을 두 번 연속해서 보내고 아직 작성하지는 않았지만 받아온 응답을 가공해서 회원가입을 위해 sequelize.findOrCreate을 사용하고 이어서 토큰을 만드는 과정을 진행하게 될 텐데 이 과정에서 axios에서 사용하는 비동기 처리방식인 promise를 계속해서 사용해야 할 것 같았다.

promise를 남용하게되면 promise hell이 돼서 사선 방향으로 코드가 계속해서 꼬리를 물고 이어지게 때문에 가독성이 나빠지고 가독성이 나빠지면 코드에서 에러 핸들링을 하기도 힘들어지고 이로 인해 악순환이 계속되기 때문에 어차피 테스트 코드를 project로 옮기는 김에 async await 비동기 처리 방식을 이용한 코드를 새로 작성해서 가독성을 높여보자는 판단을 했다.

module.exports = async (req, res) => {
  if (!req.body) {
    console.log("no code and state in request body");
    return res.status(401).send({ message: "no code and state" });
  }
  const naverUrl = `https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id=${naverClientID}&client_secret=${naverClientSecret}&code=${req.body.authorizationCode}&state=${req.body.authorizationState}`;

  //? 토큰발급 => 클라이언트에서 받은 code와 state를 이용해서 네이버 oauth 서버에서 token 받아오는 요청
  const tokenIssuance = await axios //
    .get(naverUrl)
    .catch((err) => console.log(err));

  if (!tokenIssuance.data) {
    console.log("no token issuance data");
    return res.status(401).send({ message: "no code and state" });
  }

  const { access_token } = tokenIssuance.data;

  //? 네이버 oauth 서버에서 받아온 token을 이용해 네이버 openapi 서버에 유저 정보를 요청
  const getData = await axios({
    method: "get",
    url: "https://openapi.naver.com/v1/nid/me",
    headers: {
      Authorization: `Bearer ${tokenIssuance.data.access_token}`,
    },
  }).catch((err) => console.log(err));
};

그래서 위처럼 async await을 사용해서 코드를 작성하니 가독성이 너무 좋고 이로 인해서 내가 필요한 data들을 변수에 담아 뒀기 때문에 따로 변수를 빼서 후처리 하기도 편했다

여러 방식의 비동기 처리 방법을 알아두었기에 적재적소에 사용할 수 있었다

앞으로도 어떤 문제에 대한 처리법이 다양할 때 한 가지 방식만 고집하는 것이 아니고,
다양한 방식을 이해하고 기록해두었다가 코드에 적합한 방식을 사용하여 문제를 해결해야겠다.

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• oauth naver 코드 api 마무리
• oauth kakao 코드 시작 ~ 마무리
• 배포파트 공부하기