1. Team Ajeom

클론 사이트: Brunch
진행기간: 4월 18일 - 4월 30일
front-end : 아점프론트깃허브
back-end: 아점백깃허브
시연영상: 아점시영영상

• Front
  • Header
  • Nav
  • Footer
  • 메인
  • List (포스트글 목록)
  • Detail (포스트)
  • 로그인/회원가입 (카카오 소셜 로그인)
  • 글쓰기 에디터
  • 북브런치 에디터
  • 작가의 서랍
  • 작가 신청
  • 마이프로필/ 작가프로필
• Backend
  • 유저
  • 리스트
  • 북
  • 포스트
  • 키워드
  • write

브런치를 선택하게 된 이유?

• 깔끔한 UI
• 1차보다는 도전하자

브런치를 선택하게 된 이유는 간단했다. 깔끔한 UI였다. 팀원들 각자 하고 싶은 사이트를 2개씩 골라와 결정하기로 했다. 내 마음은 원래 중고 판매사이트 Kream이였지만, 세련된 브런치 UI를 보고 마음을 바꿨다.

내가 맡은 부분

• 로그인 (카카오 소셜로그인)
• 마이프로필/작가프로필

공유하고 싶은 코드 (카카오 소셜로그인)

내가 이 코드를 공유하고 싶은 이유는 그냥 처음해봐서여다. 엄청 잘 짠 코드도 아니다. 하지만 나름의 도전이었기에 공유하고 싶다.

login.js

<div className={styles.kakaologinBox}>
    <Button href={KAKAO_AUTH_URL} kakao>
      <img
        src={process.env.PUBLIC_URL + '/image/kakaotalk.png'}
        alt=""
      />
      카카오로 계정 시작하기
    </Button>
</div>

Auth.js

const code = new URL(window.location.href).searchParams.get('code');
  const bodyData = {
    grant_type: 'authorization_code',
    client_id: REST_API_KEY,
    redirect_uri: REDIRECT_URI,
    code: code,
    client_secret: CLIENT_SECRET,
  };

  const queryStringBody = Object.keys(bodyData)
    .map(k => encodeURIComponent(k) + '=' + encodeURI(bodyData[k]))
    .join('&');

  useEffect(() => {
    fetch('https://kauth.kakao.com/oauth/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
      },
      body: queryStringBody,
    })
      .then(res => res.json())
      .then(data => {
        Kakao.init(KAKAOINIT);
        sendData(data);
      });
  }, [Kakao, queryStringBody]);

1. 인가코드 받기

카카오톡 소셜 로그인을 하기로 했다면, 인가코드를 가장 먼저 받아야한다. 사이트 내에서 카카오톡 로그인 후, 내 애플리케이션에서 Rest-api-key와 redirect_uri 키를 받아 볼 수 있다. 그 다음 카카오톡에게 인가코드를 달라고 요청을 해야한다. Auth.js의 제일 상단 const code가 바로 인가코드이다.

2. 카카오로부터 액세스 토큰 받기

   카카오 개발자 문서에서 인가코드는 시작일뿐, 액세스 토큰을 받고 넘겨줘야 로그인을 할 수 있다는 글이 적혀있었다. 프론트, 카카오, 백엔드 사이에서 무엇이 오고가야하는지 이해가 제대로 되지 않은 상태에서 시작하다보니, 나는 무엇을 받고 넘겨줘야하는지 헷갈렸고, 긴 삽질의 시간을 가졌다.

내가 이해한 바는 바로 아래와 같다.

“카카오야! 클라이언트가 우리사이트에서 카카오로 로그인 했거든! 니네 카카오에 해당 클라이언트 정보 있니? 인증해줘! 내가 너한테, Client_id, redirect_uri, code, client_secret를 post 형식으로 request 날릴게!

클라이언트 인증되면 너는 res로 access token 주렴!안되면 error로 날려!”

access-token을 받는 과정도 순탄치 않았다. 나는 계속해서, parameter를 json형태로 보내고 있었고, 카카오문서에서는 분명 type=string으로 보내라고 했는데, 그 부분을 제대로 인지하지 못했다... 왜 자꾸 invalid_client KOE010 에러만 보내주는거지? ...아...json (이 부분을 캐치하고 함께 고쳐준 팀원분들께 ㅜㅜ넘나 감사해요) 다시 string 형태로 보내주자 카카오로부터 access token을 받을 수 있었다. 감격의 눈물!!!

3. 카카오로부터 받은 access token을 backend 보내주기

const sendData = async data => {
    await fetch('http://localhost:8000/user/login', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })
      .then(res => res.json())
      .then(res => {
        if (!res.token) return;
        localStorage.setItem('token', res.token);
        navigate('/');
        window.scrollTo(0, 0);
      });
  };

프론트에서 access token을 백에게 보내주면서 req를 날린다. (백엔드, access-token 줄테니까 아점 토큰만들어서 줘요!)
이후는 백엔드의 영역이다. 백엔드는 다시 한번 카카오에게 요청을 날린다.

“카카오!  프론트한테 access-token 받았다. 이제 우리가 원하는 해당 클라이언트 정보 보내줘!!!” 

백엔드는 카카오에서 받은 정보를 API로 만든다. 프론트가 요청한 Token을 res로 보내주면 끝!

아쉬웠던 점

• 숲을 보는 능력: 내가 맡은 부분은 프론트엔드이다. 그렇다고 하더라도 백엔드가 어떻게 돌아가는 지는 인지하고 있었어야 했는데, 그부분을 놓치고 간거 같았다. 예를 들어서 , 백엔드에 req를 날리고, 정확히 어떤 res를 받아야하는지 알려줬어야 했는데, 백엔드 분에게 그부분을 잘 이해시키지 못했다는 점이 조금 아쉬웠다.
• 체력적인 문제 : 사실 프로젝트 시작부터 몸이 좋지 않았다. 이전까지는 나름 운동을 꾸준히 하고 있었는데, 1,2차 프로젝트를 시작하면서 운동을 거의 하지 못했다. 2주동안의 짧은 프로젝트 때문에 그렇긴 했지만, 앞으로 회사 다니면 장기전으로 갈텐데 운동을 해야겠다는 생각이 들었고, 건강관리 필수. 눈관리 필수
• styled-components과 modules.scss를 함께 쓴 나. 다음에는 하나만 써보는 걸로 해보겠습니다.

회고

• 1차 프로젝트 때도 말한 바 있지만 나는 이번에도 좋은 팀원들을 만났다. 본받고 싶은 점을 간략하게 적어봐야겠다
  • 미친 성장속도 - 2차도 함께한 1차 프로젝트 팀원. 우리코드에만 한정하지 않고, 다른 프로젝트도 보면서 이것저것 시도해 보는 모습. 또 좋은 코드가 있으면 본인 코드에 활용하는 모습에 보기 좋았다. 또 엄청난 성장속도에 또 한번 놀랬다. 내 코드에 갖혀있지 말고, 좋은 코드 많이 보고 공부해야겠다.
  • 코드 이해하는 능력 - 단기간 프로젝트가 같은 경우, 시간의 압박에......남의 코드가 잘 보이지 않는다. 한 팀원은 찬찬히 남의 코드를 보더니 빠르게 이해하고, 고쳐주는 센스
  • 즐기는 자는 이기지 못한다 - 한 팀원이 자기 맡은 부분을 완벽히 하고 신나서 코딩 설명을 해주는데 그 때 느꼈다.....정말 미쳐서 즐기면서 하는 사람을 이길 수 없구나 말이다. 그 팀원처럼 코딩에 대한 즐거움을 놓치지 않고 가야겠다는 생각이 들었다.
  • 문제점을 인지하고 해결하려는 자세 - 스탠드업 미팅 시간을 짧게 했어야 했다. 1차 프로젝트 같은 경우, 나는 어제,오늘 할일을 적고, 그 다음에 “어떤 부분이 풀리지 않는다” 라고 하면, 팀원들이 다 같이 도와줬다. 어쩌보다니 2차프로젝트도 그렇게 했는데, 데일리 스탠드업 미팅하는 시간이 길어져서, 효율적이지 못하게 됐다. 팀원 한분이 조심스럽게 이 부분에 대해서 이야기 했다. 문제에 대해서 회피하지 않고, 똑바로 문제점을 이야기하기. 그리고 지적하기 보단 어떻게 보완할 수 있는지 이야기해주는 모습이 좋았다.
  • 생각정리 시간이 필요하다. 모르는 부분이 있으면, 필기하면서 이해하기. 필기 내용을 토대로 내 생각 정리하기 (로그인때 절실히 느낌). 사실 너무 많은 양의 블로그나, 문서를 읽다보면 생각이 제대로 정리 되지 않을때가 있다. 사실 읽는 것만으로 정보가 습득되지 않는다. 완벽한 이해를 위해 내 생각을 정리할 시간이 필요하다.

처음 해본 소셜 로그인은 사실 쉽지 않았다. 정했던 스케쥴보다 지체되었고, 고생도 많이 했다.그렇지만 해내서 너무나 뿌듯하다! 프로젝트하면서 내 스스로에게 아쉬웠던 점을 보완하고, 팀원들에게 본받았던 점을 잊지 않고 내 것으로 만들어야겠다. 기업협업에서 꼭 실천하자!