1. Hines[House in decades]

작명이 기가막혔던 2차 프로젝트의 대상은 '오늘의 집' 이다. 1차 프로젝트를 했던 경험을 토대로 재빨리 사이트 스캔과 모델링 작업에 돌입했다.

• 사이트가 생각보다 거대했다. 커뮤니티 탭과 커머스 탭이 동시에 존재하는 사이트. 팀원들과 논의 끝에 커뮤니티의 기능중 몇가지만 가져와서 커머스 기능쪽에 합쳐 보는 것으로 플랜을 짰다.

• 필수 기능 : 커머스 관련 기능(소셜로그인, 상품 리스트, 장바구니, 주문페이지, 상세페이지 등)

• 추가 기능 : 할인 상품, 검색 기능, 구매 상품 리뷰 포스팅(사진 포함) 그 중 내가 맡은 기능은 소셜로그인과 주문페이지(orders)였다.

초기 모델링

멘토님 리뷰 후 수정된 모델링

• 수정사항
  • 이번 기획에 맞춰 oder_items_status 를 order_status에 병합시켰다.
  • 불필요한 created_at, updated_at 필드를 삭제했다.
  • 재고관리를 할 것이 아니기 때문에 products의 quantity 필드를 삭제했다.

2. 소셜로그인(kakao)

1차에서 모델링에 거의 1주일을 소비했다면, 2차에서는 소셜로그인 기능에 1주일을 소비했다. 중간 중간 Unitest를 새로 적용하느라 더 늦어진 점도 있지만, 2, 3일만에 해내는 다른 동기들을 보면서 조급함과 부담감이 스멀스멀 퍼지는 것을 참느라 더 힘들었다. 공식문서를 빠짐없이 읽어보고 요청값과 결과값들을 메모해가며 살펴봤지만, 가장 핵심이 되는 기능은 다른 곳에서 찾을 수 있었다.(가끔은 오타가 큰 일을 해내기도)

• 먼저 소셜로그인 방식에는 1)REST API, 2)Javascript SDK, 3)Android, 4)iOS 이렇게 4가지 방식이 있다.

• 또한, 시작하기에 앞서 '앱 등록'이 선행 되어야 하는데, 팀에서 한 명이 대표로 등록하고 거기서 발급된 API Key로만 하길 권장한다. 자세한 등록 방법은 아래를 참조하자.
  <카카오 소셜로그인 설정 방법>
  
  

소셜로그인(REST API 방식) Flow

• 소셜로그인의 전체적인 flow를 살펴보되, 소셜로그인의 총 4가지 방식중 이번에 사용한 것은 REST API 를 이용한 방식이다.
  <이미지 출처>

1) 인가코드 요청

• 요청 시 코드를 받아 올 'redirect URI'를 같이 보내야 함

2) 인가코드 발급

• 카카오 서버에서 인가코드를 발급해 'redirect URI'로 보냄

3, 4) 인가코드로 토큰 요청

• 받아 온 인가 코드와 'redirect URI'를 다시 카카오 서버로 보내면서 '카카오 token'을 요청한다.
• 여기서 URI를 다시 보내는 이유는 카카오측에서 우리가 처음 보낸 URI와 대조해보기 위함이다.

5) 카카오에서 URI확인 한 뒤, 일치하면 token을 보내준다.

• 이때의 token은 절대 저장하거나 로그인 용도로 사용해서는 안된다. Never

5-1) token을 카카오API중 '사용자 정보 요청'용 API 주소로 보내면서 원하는 사용자 정보를 받아 온다.

• 사용자 정보를 요청하려면 해당 API 주소로 요청을 보내야 하는데, 각 API별 url을 정리해 놓은 카카오의 공식 문서를 참고하면 된다.
  <카카오API 레퍼런스>
  6) 받아온 token에서 필요한 사용자 정보만 추출한 뒤 token은 저장하지 않고 버리면 된다. 추출한 사용자 정보를 DB에 저장하여 다음 로그인 시, 중복 유저가 생성되지 않도록 하는 로직을 구현하고, '우리 token'으로 jwt를 이용, 재가공한다.
• token을 버리는데에 특별한 로직이나 코드는 필요가 없다.

7) 프론트로 '우리token'을 보내면서 로그인을 성공했다는 메세지로 응답한다.

8) 프론트는 백엔드로 부터 받은 '우리token'을 저장하여 사용하면서 유저에게 로그인 완료 페이지를 송출한다.

잘 모를 땐 공식문서, 좀 더 들여다보자

처음 공식문서를 읽었을 땐 물음표가 1개 였고, 두 번째 읽었을 땐 3개가 되었으며 다섯 번째 들여다봤을 땐 물음표 24개가 생기는 기이한 현상을 겪었다. 하지만 우린 천재가 아니니 당연한 현상이고 하나 하나 뜯어먹어보면 언젠가 소화가 되리라.
카카오 소셜로그인 공식문서 - 이해하기

백엔드도 요청(requests) 할 수 있다.

• REST API 방식으로 하게 된다면, redirect URI 를 만들줄 아는 백엔드 혼자서 카카오 서버와 주고 받고, 북 치고 장구치고 다 할 수 있다고 한다. 그리고 이것을 가능하게 해주는 또 하나의 파이썬 라이브러리 도우미가 있었으니, 바로 requests 되시겠다.
  requests 사용법 정리
• 프론트에서 벡엔드에게 요청을 하듯, 백엔드도 requests 로 http url 에 요청을 보낼 수 있다. 그래야 위에서 설명한 방법대로 인증 코드부터 사용자 정보까지 받아 올 수 있는 것이다.

프론트와 협력하기

• 프론트는 백엔드와 달리 할 수 있는 부분에 한계가 있다. 해당 개발자의 능력을 말하는게 아니라, 프,백의 영역에 관한 의미이다.
• 사용자 정보를 받아오더라도 jwt로 재가공하고 사용자의 정보를 DB에 저장하는 것은 백엔드의 역할. 문제는 프론트 팀원이 어디까지 해줄 수 있는가 인데, 이건 당연히 협의를 통해 결정해야 하는 문제다.
• 내가 공식문서와 싸우고 있는 사이, 소셜로그인을 맡은 프론트 팀원이 살며시 오더니, 'token 받았는데 어떻게 해야하나요?' 라고 물어봐주셨다.(5번까지 혼자 하셨다는 뜻).
• 덕분에 나는 5-1번인 사용자 정보를 요청해서 받아오는 부분만 해결하면 되었고, 고심 끝에 다음과 같은 code를 만들었다.

class KakaoLoginView(View):
   def post(self, request):
        try:
            response = requests.get('https://kapi.kakao.com/v2/user/me', 
            			     headers = {'Authorization' : f'Bearer ${access_token}'}
            kakao_user = response.json()
            kakao_id   = kakao_user['id']
            user_name  = kakao_user['kakao_account']['name']
            user_email = kakao_user['kakao_account']['email']

            user = User.objects.create(
                kakao_id  = kakao_id,
                name      = user_name,
                email     = user_email
            )

            hines_token = jwt.encode({'id' : user.id}, SECRET_KEY, ALGORITHM)

            return JsonResponse({'message':'SUCCESS', 'Authorization' : hines_token}, status=201)

        except KeyError:
            return JsonResponse({'message':'KeyError'}, status=400)

• requests 라이브러리를 찾는데 오래 걸렸는데, 찾아서 적용하고 보니 카카오 공식문서에 적힌 코드가 조금씩 눈에 들어오기 시작했다.
  
• 원하는 정보만 가려서 받을 수도 있겠지만, 일단 잘모르면 다 가져와보자.
• -H는 header 를 의미한다.
  
• 공식문서에서 확인할 수 있겠지만, 위와 같이 다량의 정보들을 dict 형태로 보내준다. profile 같은 경우는 dict[dict] 와 같은 형태로 되어있기 때문에 nickname을 꺼내려고 한다면, kakao_user['kakao_account']['name'] 와 같은 형태여야 한다.
• 이후 멘토님의 리뷰를 받고 상당한 수정 사항이 발생했다. 수정 항목에 대해선 다음 포스팅에 남기도록 하겠다.

3. Review

• 일단, 공식문서가 불친절 하다. 아니, 그냥 내 지식이 짧았던 거였다. curl 사용법을 알아보려고 허우적 대다가 redirect URI 에 막혀서 .json 에 html 에 프론트까지 갈 뻔 했다. 저기에 "파이썬 유저는 requests 라이브러리 이용" 한 문장만 적어줬어도 하루는 더 빠르게 접근 하지 않았을까 하는 아쉬움은 든다. 하지만 이것도 공식문서를 읽는 훈련이고, 또 덕분에 이것저것 맛볼 수 있어서 괜찮았다.

• 방법이 다양한 만큼 다른 사람의 코드를 무턱대고 따라 하기도 쉬운데, 절대 그러지 않았으면 좋겠다. 단순히 코드만 다른것이 아니라 그 사람의 환경변수 혹은 환경설정 및 세팅이 나와는 전혀 다르기 때문에 코드만 따라 했다간 결국 막혀서 돌아나올 뿐이다.

• 이번 소셜로그인 기능 구현으로 정말 많은 것을 알게 되었다. 그리고 카카오가 얼마나 거대한 기업인지도 피부로 느낄 수 있었다. 로그인이 안되면 그야말로 입구컷 인데, 그 로그인조차 쉽지 않으니, 얼마나 유능하고 많은 개발자들이 저기에 있는건지..

• 대기업을 꿈꿀 수 있는 처지는 아니지만, 저런 대기업이 운용하는 프로그램들의 허점을 찾아내고 그걸 보완하거나, 개선할 수 있는 방법을 제시할 수 있는 개발자가 되고 싶다는 생각이 어렴풋이 들었다.