2차 프로젝트 ADLIP 회고

1차 프로젝트 리팩토링이 끝나기 무섭게 2차 프로젝트가 시작됐다.

프로젝트 소개

우리팀은 프로젝트 아이디어 발표 때 내가 제안했던 여가 액티비티 플랫폼인 프립을 클론코딩하게 되었다.

1차때랑 달리 각자 포지션을 정해서, 프론트 5명 + 백 2명으로 구성되었다.

프론트엔드 Repo
백엔드 Repo
모델링

사용된 기술

공통 - Git, ESLint, Prettier

Frontend
React, React-Router, styled-component

Back
node.js, prisma, mySQL

내가 맡은 부분

1) 소셜 로그인(카카오) 기능 구현
2) 일반 회원가입/로그인 기능 구현
3) 라이브러리를 활용한 피드페이지 모달창 구현

카카오 로그인은 카카오 SDK를 이용해서 생각보다 간단했다.
처음에 REST API로 해야되는 줄 알고 삽질을 했었는데, sdk로 하니까 세상에서 가장 편했다.

//프립에 host와 user가 둘 다 있어서 어떻게 해야할지 고민했다.
//우리 프로젝트에서는 host와 user 접근권한을 구분하지 않고 단순 user인지 host도 하는 user인지로만 구분을 지었기 때문에 회원가입 시 호스트 여부를 체크하는 방향으로 구현했다.

  const hostBody = {
    status: 'host',
    socialPlatform: 'kakao',
  };

  const userBody = {
    status: 'user',
    socialPlatform: 'kakao',
  };


const kakaoLogin = () => {
    Kakao.Auth.login({
      //카카오에서 얻어오길 원하는 정보
      scope: 'account_email, profile_image, profile_nickname',
      success: function (authObj) {
        fetch(`${API_ENDPOINT}/user/kakao`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            //카카오 authObj의 access_token을 실어서 요청을 보낸다.
            Authorization: authObj.access_token,
          },
          //host와 user가 각각의 경우에 body가 달라짐
          body: JSON.stringify(isHost ? hostBody : userBody),
        })
          .then(res => res.json())
        //res로 받은 token을 애드립의 adlipToken, user의 소셜 플랫폼을 userSocialPlatform으로 선언하고,
          .then(res => {
            const { token: adlipToken, socialPlatform: userSocialPlatform } =
              res;
          //adlipToken이 있으면 로그인 한 것으로 보고 context의 token을 adlipToken으로 하고, localStorage에 res로 받은 user의 로그인 관련 정보를 담는다.
            if (adlipToken) {
              setToken(adlipToken);
              localStorage.setItem('token', adlipToken);
              localStorage.setItem('socialPlatform', userSocialPlatform);
              alert(res.message);
              history.push('/');
            } else {
              alert(res.message);
            }
          });
      },
      fail: function (error) {
        alert(JSON.stringify(error));
      },
    });
  };

더 나은 코드???

1) 로그인 상태에서 로그인, 회원가입 페이지에 또 접근 가능한 문제가 있었다. -> 로그인 시 접근 불가능한 PublicRoute로 해결

//src > PublicRoute.js!
import React from 'react';
import { Redirect, Route } from 'react-router-dom';

function PublicRoute({ component: Component, restricted, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        localStorage.getItem('token') && restricted ? (
          (alert('이미 로그인중입니다.'), (<Redirect to='/' />))
        ) : (
          <Component {...props} />
        )
      }
    />
  );
}

export default PublicRoute;

파일을 추가하고
기존의 Route.js 파일에서 LogIn, SignUp 부분을 수정해주었다.

참고한 링크

아쉬운 점

지나고 보니 예상대로 코드 양이 많지는 않다.
처음 로그인을 맡게 되었을 때, 태스크가 적다고 생각했는데,
잘 모르고 여러 개 하느니 화면 하나를 제대로 해야겠다는 생각으로 바뀌었었다.
덕분에 일반 회원가입과 로그인도 구현해보고, 이 부분 백엔드 코드도 많이 들여다볼 수 있었지만,
그래도 좀 더 욕심을 내서 추가구현을 해볼걸 그랬나 하는 후회는 남는다.

그래도 1차 프로젝트보다 잘했던 점

1) 이해를 기반으로 더 나은 코드를 고민해봤다?
1차 프로젝트때는 프론트 백 역할을 나누지 않고 일주일씩 진행하다보니,
한 단계에서 막히면 시간이 너무 많이 빼앗긴 느낌이었다.
로그인을 해보고 싶었던 이유 중 하나도, 백엔드 기간 때 토큰이나 세션, 쿠키같은 것들을 다 이해하지 못했다는 생각을 했기 때문이다.
로그인을 하고 토큰을 받은 이후에도 여러가지 개선해야할 부분들이 있었는데, 그 부분들을 해결하려고 검색도 하고, 질문도 하고 하면서 성장하는 기쁨을 느낄 수 있었다.

2) 팀의 프로젝트 진행을 위해 나서서 무언가 했다?
1차 프로젝트때는 내 코드를 이해하고 치기 바빴었는데, 너무 간단한 작업이지만 이미지도 찍어내고, 로고도 만들었다.
스타트업에 가면 여러가지 일을 하게 될 수도 있고, 전체 프로젝트에 필요한 부수적인 일들도 할 수 있어야 한다고 생각했다.
이번에는 그래도 1차때보다 정신적으로 여유를 가지고 이런 것도 챙겨가볼 수 있었던 것 같다.

프로젝트 기간이 지나고나면 항상 드는 생각
"정말 바쁘고 정신없었는데, 이게 왜 그렇게 어려웠나? 😇"