사실 처음에 이 모듈을 알게되고 문서를 찾기 전에 사용했을 때에는, 인터넷에서 어디서 주운 코드를 갖다가 적용했는데
Credential이라는 값이 나와서 그거를 백엔드에 넘겼는데 그 값에 대해 알아보니 구글의 어떤 주소로 Credential 값을 갖다주면 그냥 내 개인 정보를 프론트에서도 확인할 수 있어서 찜찜했다.
그래서 이것저것 검색해보다가, 매니저님이 말씀했던게 생각났는데 그걸 어떻게 백엔드에 설명할 자신이 없어서 그냥 OAuth에 관해 이것저것 블로그 글들을 읽어보았다.
그래서 더 많은 고민에 빠지게 되었다.
인터넷에서는 죄다 리액트에서 구글 OAuth 구현을 하는데 'react-google-login' 모듈을 썻는데, 그럼 이 사람들은 전부 다 잘못 쓰고 있는 건가? 라는 생각도 들고, 특히나 그림 설명들이 나를 더 헷갈리게 만들었다.
이걸로 한 2일 넘게 계속해서 검색해보고, 고민해봤던 것 같다. 토요일에는 멘토님에게도 관련하여 질문을 했지만 어느쪽으로 해도 상관 없다 라는 답변을 받아 '왜?'라는 생각을 계속 했다.
그런데 그 답변과 같이 결과적인 나의 결론으로는, '상관 없다'라고 결론을 내리게 되었다.
프론트에서 OAuth 요청을 해도, 백엔드에서 요청을 해도 사용자 정보를 받을 수 있다면 어디서 처리하든 상관이 없지 않을까라는 생각이 문득 들었다.
그리고 지금 우리는 보안 일을 하는 것도 아니기도 한데 보안을 그렇게까지 신경써야 하나 생각도 들고,,,,
내가 듣기로는 백엔드로 일하는 친구는 작성한 코드를 보안 업체에 맡겨서 검증을 받기도 한다고 들었다. (그렇다면 지금 당장은 구현 하는데만 집중하면 되지 않을까?)
물론 나름대로 신경을 써서 코드를 작성하면 좋겠지만, 이런 사소한 걸로 몇일이나 고민하며 시간을 괜히 날린 것 같아 뭔가 조금 안타깝다.
특히 내가 백엔드를 자세히 알지 못하기 때문에 서로 소통하면서 자꾸 바꿔나가는 것도 힘이 든다,,,
그냥 내 코드나 열심히 봐서 코드 최적화 하고 더 많은 기능을 큰 버그 없이 완벽에 가깝게 구현하는게 좋지 않을까라는 생각이 든다.
우리는 위에 올린 링크에서 위 이미지와 같은 방법으로 구현했다.
프론트에서는 구글에 요청하여 인가코드를 발급받고, 이걸 백엔드로 AXIOS를 통해 넘겨서 백엔드에서 그 인가코드와 clientId, secretKey를 통해 토큰와 사용자 정보를 발급받고 그걸로 새 토큰을 만들어 프론트에 지급하는 구조이다.
다른 조에서 한걸 보면 그냥 백엔드에서 준 링크 달고 a태그로 접속만 하면 끝나는 방식으로 구현하기도 했던데, 그 방법이 정답이 아닐까 고민도 해봤는데 솔직히 별 의미 없는 고민이었던 것 같다. 취업하기 전까지는 그냥 그런 두가지 방법이 있구나... 정도만 알아두고 회사에서 그냥 만들라는 대로 만들면 되겠다고 생각했다.
3. 스타일 작업
목요일쯤에 대략적인 와이어프레임 디자인이 나왔는데, 역시 디자인 실력이 훌륭하신 디자이너님이라 단점이 없는 와이어 프레임이었다.
디자이너님이 너무 바쁘셔서 그냥 엄청 대충 만들어 주실수도 있겠다고 생각했는데 그래도 약속하신 일정대로 맞춰서 훌륭한 디자인으로 뽑아오니 그래도 꽤 만족스러운 것 같다.
프론트 세명이서 페이지를 나눠서 스타일 작업을 진행했고, 기획 회의에서 몇개 페이지는 갈아 엎어지기로 해서 일단 보류했다.
그리고 디자이너님이 반응형에도 흥미가 있으셨는지 반응형으로 만들어 보자는 얘기도 나왔다.
뭔가 기획이 이것저것 많아져서 남은 기간 안에 훌륭하게 만들어 낼 수 있을지 걱정 반 기대 반인데 내가 시간을 갈아서 완성해내면 되지 않을까 싶다.
4. 다음 주 목표
우선, 일요일인 오늘은 리액트 강의를 조금 들을 것 같다.
우선 다음주에는 이번주 목표였던 로그인, CRUD에서 로그인을 좀 더 가다듬고 (현재 리프레시 토큰에 관한 코드 처리가 미완 상태임)
나는 파일 드래그&드롭과 태그 드래그&드롭에 대해서 2~3일정도 자료 조사, 코드 분석을 할 생각이다.
그 이후에는 다음주에 구현되는 API에 대한 기능을 구현하면서 드래그&드롭을 붙여보지 않을까 싶다.
드래그&드롭 기능은 한번도 해본 적 없고 우리가 기획한 거에서는 그걸 자유자재로 활용해야 하는데 그게 가능할지 좀 미지수이다.
