2020.11.02 회의록

회의록

오전 (~12:00)

• 주말동안 한 것을 간단히 설명하였다(잡담 + 공부한 것들??)
• 일주일동안 진행할 백로그를 작성하였다.

오후 (13:00 ~ 14:00)

• 마스터님께서 git에 관련된 강의를 진행해주셨다.
• gitlab, git-flow, github flow에 대한 보다 구체적인 설명을 진행해주셨다.

오후 (14:30 ~ 17:00)

• 백로그 작성을 중단하고, github oauth를 이용한 login을 진행하였다.

저녁 (17:05 ~ 19:30)

• github callback에서 CORS 문제가 발생해 OAuth flow를 server-side로 변경하고 jwt를 cookie로 전달한 후에 localstorage에 token을 담는 방법을 이용하였다.
  • stack overflow 관련링크
  • 구글링 결과, front에서 cross-origin request를 보내고 있으나 github으로부터 전달받는 response의 header에는 Access-Control-Allow-Origin 이 포함되어 있지 않아 발생한 오류라는 것을 알게 되었다.
  • Github prevents you from implementing the OAuth Web Application Flow on a client-side only application.
  • 요약하자면 이는 front, back에서 코드를 수정함으로써 고칠 수 없고 GitHub에서 해결할 수 있는 문제라는 것이다.
  • 링크의 답변에는 이 문제를 해결하기 위한 방식이 2가지 제시되어 있으나(ex. browser에서 GitHub API를 사용하게끔 하는 tool? 인 Gatekeeper),
  • 기존의 axios.get 요청이 아닌 GitHub 로그인 페이지로 연결하는 방식으로 해결하게 되었다.
  • OAuth 인증요청 flow가 client-side가 아닌 server-side에서 이뤄짐으로써 CORS 문제가 사라졌다.
  • 대신 req에 임시로 cookie를 넣은 뒤 원래 login page로 redirect 시켜주는 코드로 수정하게 되었다.
• GitHub 인증 후 /issues 페이지로 redirect 하기 직전에 useEffect를 사용했을 때는 로그인 form이 잠깐 화면에 보이는 문제가 있었다.
  • 공식문서 - useLayoutEffect
  • useEffect : 화면이 완전히 바뀌고 난 후 발생
  • useLayoutEffect: 화면 바뀌기 전 발생(화면바뀌는 것을 감지)
  • 로그인 form이 화면에 render 되기 전에 /issues 라우터 페이지로 이동시킴으로써 해당문제 해결
• 이슈 화면에서 컴포넌트를 어떻게 나누고, 구상할지에 대해서 고민하는 시간을 가졌다.