0. 프로젝트전 나의 상태
Gatsby를 이용하여 사이드 프로젝트를 진행해봤고 부트캠프 과정을 통해 혼자서 간단한 CRUD를 구현할 수 있을 정도로 발전했다.
이 상태에서 메인프로젝트 진행 전 프리프로젝트로 StackOverflow를 클론 코딩을 진행했다.
1. 사이트 분석
전체 팀원들과 먼저 StackOverflow의 사이트를 분석했다. 로그인 여부에 따라 헤더가 바뀌며 이에 따라 첫 메인페이지도 변한다는 것을 알 수 있었다.
위 내용을 간단하게 작성하고 마감일을 봤을 때 우리가 잡을 메인페이지는 질문 리스트가 있는 페이지 였다.
아래와 같이 프로젝트 요구사항을 작성했다.
이후 화면 정의서도 팀원들과 시도를 하였고 아래와 같이 작성했다.
2. 프론트엔드팀의 목표
이번 프로젝트는 팀원으로 참여하였다. 왜냐하면 아는 것이 없다고 생각을 했고 섣불리 나서기 두려웠기 때문이다.
요구사항 정의서에서 중요도 "상"을 먼저 하고 시간이 남으면 "중"과 "하"로 넘어가기로 했다.
중요도 "상"으로 잡은 것은 메인페이지, 로그인 및 회원가입, 메인 CRUD(질문(답변) 작성, 수정, 조회, 삭제)이다. 왜냐하면 stackoverflow의 가장 기본적인 역할은 질문을 하고 답변을 하는 것이기에 이 부분을 1순위로 잡았다.
3. 담당 기능
3-1. 로그아웃
결론부터 말하자면 이 기능은 로그인 및 회원가입을 하는 사람이 한번에 했더라면 더욱 좋았을 거라고 생각한다. 그러나 이 덕분에 token기반의 로그인 프로세스를 확실히 할 수 있었다..
토큰을 배웠지만 너무 생소했고 실습이 부족하여서 기능을 담당했을 때 약간 막막했다.
그래도 해내야 하는 일이기에 계속 검색을 했지만 블로그 글이나 stackoverflow의 글로는 이해가 쉽게 되지 않았다. 그래도 수많은 검색 끝에 결국 RFC editor - The OAuth 2.0 Authorization Framework의 token section의 글을 찾아고 이를 토대로 다시 하나씩 공부를 했다.
위 자료에서 제공하는 token전달 process를 보고 추가 검색을 하면서 이번 프로젝트에서 사용할 로직을 다음과 같이 만들었다.
- 로그인 성공하여 JWT토큰을 받는다
- 쿠키에 access, refresh 모두 저장한다. (저장 위치는 local, sesstion cookie 등등 / 각자 장단점 존재)
- 저장한 Access Token을 통해서 서버와 대화를 한다
- 클라이언트가 AccesToken이 만료된 것을 알면 Refresh token으로 다시 인증하여 accessToken을 재발급
- 로그아웃 시 서버는 일이 없고 클라이언트에서 받은 토큰을 삭제. 왜냐하면 서버의 데이터는 토큰이 있을 시에만 데이터를 주는데 토큰이 없으면 아무 일도 안 함. (추후 메인 프로젝트에서 논의해봤는데 서버에서 저장을 하는 지 안 하는 지에 따라서 변경된다고 한다)
이후 이 로직을 팀원과 공유하고 파트를 나누어서 로그아웃 페이지를 구현하고 로그아웃 시 브라우저에 저장한 쿠키를 삭제하는 것으로 로그아웃을 구현했다.
3-2. Router 연결하기
Router연결은 쉬웠다. 각자 맡은 페이지의 컴포넌트를 react-router-dom을 이용하여 연결시켜줬다.
3-3. 유저 프로필
StackOverflow에서 유저 이미지를 클릭하면 마이페이지로 이동할 수 있다. 그러나 시간관계 및 작업분량으로 인해 구현하지 못하고 간단하게 유저정보를 표시하는 카드를 만들었다.
들어가는 사진, 유저이름, 이메일주소는 로그인 시 전역상태에 저장한 정보를 활용하여 구현했다.
3-4. 전체 CSS수정
단도직입적으로 말하자면 이 부분이 가장 많이 아쉬웠다.
모든 기능이 전부 완료되어갈 시점에 전체적인 화면 디자인 및 위치 조절이 필요하다는 안건이 올라왔고 내가 맡아서 한다고 했다. 새벽까지 시간을 들여서 작업을 했으나, 각자의 환경에서 내가 바라던 모습과는 다르게 배치가 이상하다는 피드백을 받았다. 이 후 다른 팀원이 이어 받아서 작업을 했고 결과 코드를 봤을 때 다음 사항들이 부족했던 것 같다.
- 전체 css를 맞추지 않았다. 즉, 화면 비율을 고려하지 않아서 각 컴포넌트끼리 사이즈 및 설정이 다르다. ➡️ 이전에 Gatsby로 작업할 때 전체 css를 다른 분이 맞춰줬는데 이 방향이 맞은 지 또는 팀원들이 다른 방향을 알 고 있을 거라는 생각에 이야기를 꺼내지 않았다.
- CSS를 하면서 내가 모르는 속성을 사용한 코드를 섣불리 손 대기 힘들었다.
- 누군가의 코드를 수정하기가 부담스러워했다.
4. 결론
첫 프로젝트에서 문제 해결방법 경험을 얻었기에 속도도 이전보다는 빨랐지만 이번 두 번째 프로젝트에서는 아쉬운 점이 매우 많다. 그래도 이번 경험을 통해 다음을 알 수 있었다.
- 전체 css의 중요성. 들어가기 전에 화면 비율이나 컨텐츠 사이즈의 넓이를 미리 저장하는 것이 좋다는 것을 알 수 있었다.
- 타인의 코드를 수정할 수 있는 용기를 가지자
- 내가 틀릴 수 도 있지만 의견을 내야 한다고 생각했다. 이번에는 너무 조용히 있다보니 내가 가지고 있던 더 좋은 의견이나 방향을 공유하지 못 했다.
