각종 후기/우아한테크코스

[우아한 테크코스 3기] LEVEL 2 회고 (100일차)

제이온 (Jayon) 2021. 5. 12.

안녕하세요? 제이온입니다.

 

오늘은 새로운 미션을 배정받은 날이었고, 수업이나 특강등 이것저것 바쁘게 지냈던 것 같습니다.

 

 

지하철 경로 조회 / 로그인 미션 소개

앞서 말했듯이, 수업이나 특강에서도 인상 깊었던 내용이 있지만 지금 시간이 늦었고 굉장히 피곤해서 페어 프로그래밍을 위주로 기록하려고 합니다.

 

 

 

 

이번 미션도 총 3단계로 구성되어 있으며, 2단계까지는 로그인, 3단계는 경로 조회를 구현해야 합니다. JWT 라이브러리를 활용하여 토근을 발급하고, 해당 API를 호출하는 프론트엔드 코드를 작성하는 것이 1단계 목표였습니다.

 

 

 

 

2단계는 로그인 이후, 회원 정보를 수정하거나 삭제하는 등의 기능을 구현해야 합니다. 이때, 토큰을 통한 인증을 해야하는데, @AuthenticationPrincipal과 AuthenticationPrincipalArgumentResolver라는 것을 활용한다고 나와 있습니다. 이후에는 3단계 내용이므로 나중에 구현할 때 소개하겠습니다.

 

 

페어 프로그래밍

이번 미션의 페어는 '시드'였습니다. 시드는 비전공자였지만, 약 1년간 개발을 굉장히 열심히 해서 우테코에 들어온 능력자였습니다. 표현은 제대로 안했지만, 그 기간동안 얼마나 노력했을 지는 보지 않아도 알 것만 같았습니다. 1시간 가량은 아이스 브레이킹을 하면서 서로에 대해 알아가는 시간을 가졌고, 이후에는 Commit Convention이나 서로의 코딩 스타일을 이야기했습니다.

 

저와는 다르게 스프링 경험을 하신 적이 있어서 그런지 Spring auth 부분은 꽤 알고 계신 듯했습니다. 그래서 토큰을 발급하고, 해당 토큰이 유효한지 검증하고, 특정 로그인이 유효한지 판단하는 @AuthenticationPrincipal과 AuthenticationPrincipalArgumentResolver 부분을 시드에게 배워 나갔습니다. 약간의 감은 익혔지만, 아무래도 세션, 쿠키, 토큰 및 인증과 인가 과정이 아예 처음이다보니까 추가 학습의 필요성을 절실히 느꼈습니다. 그렇다 하더라도, 잘하는 사람한테 도움을 받아서 다행이라는 생각이 들었습니다.

 

 

이후에는 브라운이 원본 저장소에서 수정 사항이 있다고 해서, 제 저장소와 동기화할 일이 있었습니다. 원본 저장소를 remote로 추가하고 아무 생각 없이 fetch를 해 버렸더니, 제가 원하지 않는 branch들이 다량으로 들어와 버렸습니다. 이를 어떻게 하나 고민하고 있을 때, 시드가 "rm $(ls | grep -v master | grep -v pjy1368)"라는 명령어를 알려 주었습니다. 요약하자면, 괄호에 있는 master와 pjy1368 branch말고는 싹다 지워버리는 것이었죠. 덕분에 손쉽게 원하는 branch만 남겨둘 수 있었습니다.

 

 

그 외에, 프로덕션 코드는 시간이 조금 걸렸지만, 별로 막히는 부분 없이 척척 잘 했습니다. 다만, 로그인 관련 API 프론트엔드 코드를 짤 때 한 가지 문제점이 생겼습니다.

 

 

  async onLogin() {
      try {
        // 액세스 토큰 얻어오는 과정
        const accessToken = await response.text();
        
        option = {
          method: 'GET',
          headers: {
            "Authorization": "Bearer " + accessToken
          }
        }
        response = await fetch("http://localhost:8080/members/me", option)

        const member = await response.json();

        await this.$router.replace(`/`);

        if (!member.ok) {
          // this.showSnackbar(SNACKBAR_MESSAGES.LOGIN.FAIL);
          // return;
          // 위 코드 대신 아래와 비슷한 코드를 사용하고 싶음.
          throw new Error();
        }
        this.setMember(member);
        this.showSnackbar(SNACKBAR_MESSAGES.LOGIN.SUCCESS);
      } catch (e) {
        this.showSnackbar(SNACKBAR_MESSAGES.LOGIN.FAIL);
        throw new Error(e);
      }
    },
  },

 

 

저와 시드는 주석 처리한 부분처럼, 정상 응답이 아닐 때 로그인 실패 메시지를 출력하려고 하였으나, 중복된 코드가 발생하는 것이 싫었습니다. 그래서 try문 안에서 throw문을 발생시키고, 하단에 catch문에서 이 에러를 잡아내자는 발상을 하게되었습니다. 다만, 이렇게 코드를 짜니까 첫 번째 throw문에서 "throw of exception caught locally"이라는 경고가 발생했습니다. 이 부분은 나름대로 구글링을 해 보았지만, 뾰족한 수를 찾지 못하기도 했고 시간이 너무 늦어서 내일 해결하기로 했습니다.

 

 

정리

미션 요구 사항은 많이 구현했지만, 제 스스로 많은 것이 부족하다고 느낀 하루였습니다. 그래도 차근 차근 해 나가면 잘할 수 있다는 마음가짐으로, 일단 시드가 알려 준 인증과 인가에 대한 강의 영상을 보고 자려고 합니다. 내일은 프론트 엔드 코드를 전부 작성하고, 시간이 남으면 3단계도 시도하고 싶습니다.

댓글

추천 글