[6/13 ~ 6/19] 코드스쿼드 마스터즈 23주차 회고

🥲  마지막 프로젝트 시작

벌써 마지막 프로젝트라니 진짜 말도 안 된다...ㅠ 수료까지 3주밖에 안 남았다니..

체력적으로 힘들어서 빨리 끝났으면 싶다가도 끝나고 나면 미션도 없고 중간중간하던 수업도 없고,, 혼자 덩그러니 남겨지는 기분일 것 같아서 안 끝났으면 싶기도 한 것 같다. 그래도 일단은 남은 기간 동안 집중해서 잘 마무리해보고 싶다..!

이번 프로젝트는 칸과 함께하게 됐다. 항상 랜덤으로 페어가 정해지다가 이번엔 팀 희망 조사를 받았는데, 같이 하면 재밌을 것 같다고 얘기가 나와서 신청하게 됐다. 이전까지는 평소에 잘 이야기를 나눌 일이 없던 새로운 분들과 매칭이 됐었는데 이번엔 또 색다를 것 같아서 기대도 되고 칸의 속도나 열정을 못 따라갈 것 같아서 솔직히 걱정도 좀 되는 것 같다..ㅎㅎ 비루한 체력이지만 그래도 열심히 쫓아가 봐야겠다 ^_ㅠ

 

 

⚙️  프로젝트 초기 설정

이쯤 되니까 프로젝트 초기에 어떤 얘기를 해서 어떤 걸 정해야 할지 다들 잘 알아서 금방금방 진행이 되는 것 같다. ㅋㅋㅋㅋ 위키에 간단한 프로젝트 소개나 커밋 컨벤션, 브랜치 전략 등을 적어두는데 이전 프로젝트에서 사용했던 걸 조금씩만 변경해서 사용하면 돼서 금방 끝낼 수 있었다. 그리고 각자 로그인, 이슈 리스트 페이지에서 어떤 데이터를 받으면 좋을지 정리해서 이야기해보는 시간도 가졌다. 전날 칸과 필요하다고 생각되는 데이터 형식을 타입스크립트의 인터페이스 형식으로 정리해서 갔는데, 자바를 사용하는 백엔드가 보기에 좀 더 좋지 않을까 싶은 것도 있었고 그렇게 정리하니까 좀 더 명확하게 정리할 수 있어서 좋았던 것 같다.

대강 이런 식으로 정리해갔다!

그리고 이번에는 전체 페이지가 아니라 로그인, 이슈 리스트 페이지 부분만 먼저 요구사항을 정리했다. 이 부분만 해도 칸과 계속 이야기하다보니 점점 상세해지고 많아져서 나눠서 작성하길 잘했다고 느꼈다. 점점 늘어나는 요구사항을 보면서 지난 자판기 프로젝트를 할 때의 모습과 약간 데자뷰가 느껴지기도 했다..ㅋㅋㅋ

프로젝트 환경설정은 타입스크립트로 한번 해봐서 그런지 큰 에러 없이 빠르게 끝나서 그래도 이전에 했던 삽질이 헛된 건 아니었구나 싶었다..ㅎㅎ 계속 CRA를 사용해서 이전까지는 절대경로를 설정하기 위해 craco를 사용했었는데, 버전이 업데이트된 리액트와 잘 호환이 되지 않는 문제가 있었다. peer dependency가 맞지 않아서 다른 패키지를 설치할 때마다 --force 또는 --legacy-peer-deps 옵션을 붙여주어야 했다. 그래서 이번에는 react-app-rewired를 새롭게 적용해봤는데, 적용하기 크게 어렵지도 않고 craco처럼 버전에 대한 이슈도 없어서 잘 변경한 것 같다고 생각했다.

 

 

🚧  로그인 관련 라우터 설정

이번에는 Github OAuth 기능을 가장 먼저 구현하게 됐다. 로그인 페이지가 가장 먼저 보여지기도 하고, 칸도 나도 이전 프로젝트들에서는 다른 기능들에 밀려 로그인을 한번도 구현해본 적이 없어서 먼저 해보고 싶다는 쪽으로 의견을 모았다. 다행히 백엔드 팀원인 루시드도 괜찮다고 말씀해주셔서 먼저 해보기로 했다!

우선 OAuth 기능을 제대로 구현하기 전에 라우터 설정을 먼저 해주었다.

// router/index.tsx

export const routes = [
  { path: '/', element: <RedirectRoute /> },
 ...
];

// router/RedirectRoute.tsx

const RedirectRoute = () => {
  const [accessToken] = useLocalStorage('accessToken', '');

  return accessToken ? <Navigate to={'issue-list'} replace /> : <Navigate to={'login'} replace />;
};

먼저 redirect를 위한 컴포넌트를 하나 구현했다. 로그인 페이지를 거쳐 이슈 리스트 페이지로 가는 형식이다보니 / 경로를 사용하기가 애매해서 / 경로로 접속했을 때 로그인 여부에 따라 로그인 페이지 또는 이슈 리스트 페이지로 이동시켜주도록 했다. replace 옵션은 true로 설정하면 히스토리 스택에 새 항목을 추가하지 않고 현재 항목을 대체해준다고 한다. 위의 경우에는 이슈 리스트 페이지로 이동한다고 하면 / 위에 /issue-list를 쌓는 게 아니라 대체해버려서 아마 뒤로가기를 했을 때 / 경로가 아니라 / 경로 이전의 페이지로 돌아가도록 하게 해주는 듯하다. 아직 페이지가 많지 않아서 더 구현해봐야 알 수 있을 것 같다.

 

// router/index.tsx

export const routes = [
  ...
  {
    element: <ProtectedRoute />,
    children: [{ path: '/issue-list', element: <IssueList /> }],
  },
];

// router/ProtectedRoute.tsx

const ProtectedRoute = () => {
  const [accessToken] = useLocalStorage('accessToken', '');

  return accessToken ? <Outlet /> : <Navigate to={'login'} replace />;
};

그리고 로그인이 필요한 페이지의 경우 따로 구분해서 로그인 되어있는지 여부를 체크해줘야겠다고 생각했다. 스택오버플로우 글을 참고해서 구현했는데 element에 ProtectedRoute 컴포넌트를 지정하고, 로그인 검증이 필요한 페이지들을 children에 넣어주었다. 그리고 ProtectedRoute를 위처럼 구현하면 로그인되어있을 때는 해당 경로와 일치하는 라우트에 지정된 컴포넌트를 보여주고, 그렇지 않다면 로그인 페이지로 이동시키게 된다. Outlet이 부모 엘리먼트에서 자식 엘리먼트를 렌더링할 때 사용되는데, 중첩된 라우트에서 부모 라우트가 일치하면 자식 엘리먼트를 렌더링하게 된다. 위의 경우 path가 따로 지정되어 있지 않으므로 부모 라우트가 항상 일치한다고 봐서, 해당하는 경로에 대한 라우트가 있다면 렌더링해주는 구조인 것 같다고 이해했다.

 

 

💡  Github OAuth 구현

출처 : 루시드 👍👍

주어진 페이지에는 깃허브를 사용해서 로그인하는 방법과 직접 회원가입을 한 후 생성한 아이디와 패스워드를 사용해 로그인하는 방법 두 가지가 가능하도록 되어있었는데, 회원가입 페이지가 따로 디자인이 없어서 일단은 깃허브를 사용한 로그인만 가능하도록 구현해보기로 했다.

우리는 OAuth 구현이 처음이고 루시드는 다른 프로젝트에서 해본 경험이 있으셔서, 처음에 대략적으로 설명해주시고 생활코딩 강의도 추천해주셨다. 👍

Github OAuth 관련해서는 나중에 따로 정리해볼까 싶다. 대략적인 로직은 다음과 같다.

 

1. 사용자가 로그인 버튼을 누르면 깃허브 로그인을 할 수 있는 페이지로 이동시킨다.

2. 사용자가 로그인했을 때 반환되는 Authorization Code를 지정된 콜백 URL에 매칭되는 컴포넌트에서 받는다.

3. Code를 포함해서 토큰을 요청하는 request를 보낸다.

4. 응답받은 access 토큰과 refresh 토큰을 로컬스토리지에 저장한다.

 

구현 중간에 code를 받기 위한 콜백 URL로 이동했을 때, 코드를 보내지 않아도 토큰이 바로 응답되는 상황이 발생했다. 알고 보니 클라이언트를 등록할 때 지정했던 콜백 URL과 토큰을 요청하는 API가 동일해서 발생한 일이었다. 루시드에게 둘을 서로 다르게 지정해달라고 말씀드려서 해결할 수 있었다.

예전에 호눅스 수업에서 OAuth 설명을 들을 때는 어려워서 이해하는 데에도 오래 걸렸었는데, 코드로 직접 구현해보니 더 잘 와닿았던 것 같다.

 

 

📚  타입스크립트 스터디 - 제네릭

이번주에는 총 2번의 스터디를 진행했다. 원래는 일요일마다 하는데 다른 분들이 이번 주제인 제네릭이 어려우니 좀 더 공부해보고 싶다고 하셔서 지난주 스터디를 하루 늦추게 됐다. 그리고 이번주부터는 쥬도 참여하게 돼서 문제 수가 꽤 많아지는 바람에 2주에 걸쳐서 문제풀이를 하기로 했다.

나는 이번에 총 3문제를 냈는데, 제네릭 내용 자체가 많지는 않아서 어떻게 문제를 낼지 고민이 많이 됐다. 그렇다고 뻔한 문제를 내고 싶지는 않아서 이터러블의 타입을 지정하는 응용 문제나 프로젝트를 진행하며 겪었던 제네릭 관련 문제에 관한 내용을 공유하기 위한 문제 등을 냈다. 이터러블 같은 경우에는 나도 타입 지정을 못해서 문제내는 데 시간이 좀 오래 걸렸는데, 그래도 그 과정에서 더 배우기도 했다. 다른 분들도 갈수록 열심히 문제를 만드셔서 이번 스터디를 하면서 제네릭에 대해 더 익숙해질 수 있었던 것 같다. 프로젝트에서도 재사용 가능한 함수, 컴포넌트를 만드는 경우에 제네릭을 많이 사용하게 되는데 이번에 제네릭을 공부한 후 사용하니 훨씬 수월했고, 에러가 발생해도 이전보다 빨리 해결할 수 있게 된 것 같았다. 앞으로도 스터디 열심히 해야겠다! (๑•̀ㅂ•́)و✧