1차 프로젝트 리팩토링이 끝나기 무섭게 2차 프로젝트가 시작됐다.
프로젝트 소개
우리팀은 프로젝트 아이디어 발표 때 내가 제안했던 여가 액티비티 플랫폼인 프립을 클론코딩하게 되었다.
1차때랑 달리 각자 포지션을 정해서, 프론트 5명 + 백 2명으로 구성되었다.
사용된 기술
공통 - 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차때보다 정신적으로 여유를 가지고 이런 것도 챙겨가볼 수 있었던 것 같다.
프로젝트 기간이 지나고나면 항상 드는 생각
"정말 바쁘고 정신없었는데, 이게 왜 그렇게 어려웠나? 😇"
