< ➡️ 배포 링크 >
< ➡️ 서버 깃헙 레포 >
< ➡️ 노션 링크 >
코드스테이츠 파이널 프로젝트기간 중 매일을 회고하며 프로젝트 진행상황을 임시저장글로라도 조금씩 작성해 놓으려 했지만.. 바쁘다는 핑계로 결국 6일차 이후 글을 작성하지 않은 나의 나태함을 반성하며 😦 파이널 프로젝트 최종 회고를 쓰려한다. 🖋
🔎 아이디어 선정
파이널 프로젝트의 기획은 오프라인으로 진행되었는데 오프라인으로 만나기전 어떤 주제로 회의를 시작할것인지 미리 줌을 통해 얘기를 나누게 되었다. 최근 공부하는 사람들 사이에서 공스타그램이 화제가 된다는 것을 알게되었고 커스텀으로 본인만의 스터디 플래너를 만들고 서로 공유도 하면서 동기부여 및 성취감을 고조시키는 플랫폼을 만들기로 결정을 하였다.
👨👩👧👦 프로젝트 기획
📌 Bare Minimum
최소 구현 기능을 작성해두고 해당 문서에 따라 와이어 프레임 ➡️ 플로우차트 단계로 기획하는것으로 계획을 잡았다. 가장 초기에 작성했던 최소 구현 기능 문서는 삭제가 되는 바람에 최종본을 첨부 했다.
📈 Flow Chart
해당 문서를 기반으로 아래와 같은 Flow Chart를 완성하였다.
🛠 Stack
사용할 스택을 정리해야 했다. 사실 퍼스트 프로젝트가 끝난 후 파이널 프로젝트를 시작하기전 주말부터 이번엔 타입스크립트를 비롯한 다양한 스택을 쓰자는 말이 나왔었는데 아직 왜 써야하하는지에 대한 의문이 많은 상황이었기 때문에 해당 스택들이 쓰이는 이유에 대한 공부와 과연 우리 프로젝트에 적합한지 판단 할 시간이 필요했다. 여러 문서들을 보고 공부하면서 충분히 써도 괜찮을 것 같다는 의견으로 종합이 되었고 아래와 같은 스택들을 사용하게 되었다.
🛠 타입스크립트를 새로운 프로젝트에 적용시키게 된 이유
💾 Schema
프로젝트 진행 중 데이터 베이스 관계 설정을 어떻게 해야하는지에 대한 고민으로
많은 시행착오를 겪었다. 특히나 어려웠던 부분은
* 포스팅된 게시물에 들어오는 태그와 todo리스트를 어떻게 관리할것인가
* 좋아요 기능 개발을 위한 데이터 베이스 구조 설계를 어떻게 할것인가였다.
우선 첫번째 문제 해결을 위해 각각 tags와 todos라는 테이블을 만들어 Posts테이블과 1:N의 관계로 설정을 해주었고
두번째 문제 해결을 위해서 likes라는 조인테이블을 만들어 posts와 users테이블을 각각 1:N의 관계로 설정을 해주었다. 최종적으로 완성된 스키마는 아래와 같다.
📋 프로젝트 시연 영상
랜딩 페이지
회원가입
로컬 로그인
소셜 로그인
커스텀 플래너
모아보기 피드 및 조건부 검색
개인피드 및 개인정보 수정
⛏ 기능을 구현하며
프로젝트를 진행하며 특히나 힘들었다고 생각하는 부분을 정리해 보았다.
소셜 로그인
-
client ➡️ 구글 로그인 요청
-
server ➡️ 구글 로그인 요청에 대한 응답
-
client ➡️ explore endpoint (모아보기 피드) 로 redirect후 클라이언트 내에서 다시 server로 요청을 보내 토큰을 로컬 스토리지에 저장하는 과정
-
server ➡️ client에서 server로 요청을 보낼 시 자동으로 넘어오는 쿠키안의 토큰에 접근해 다시 클라이언트로 보내주는 과정
파이널 프로젝트에서 처음 소셜 로그인 구현을 하게 되었는데 nestjs와 passport를 처음 이용하는 상황 이어서 5일간은 개발을 하기보단 공부를 선행해야만 했다. 다행히 웹에 관련된 정보가 많아서 소셜 로그인이 가능하게 끔은 만들수 있었다.
그러나 클라이언트 코드를 보면 알수 있듯이 Axios를 통한 요청이 아닌 window.open 메소드를 통하여 소셜 로그인을 진행하였기 때문에 서버 측에서 쿠키에 담긴 토큰과 함께 redirect를 통하여 explore endpoint (모아보기 피드)로 넘겨주어도 클라이언트에서 필요한 정보(토큰)에 접근을 할수가 없었다. 그래서 생각해 낸 방법은
서버에서 요청에 대한 처리를 한 후 redirect를 통해 endpoint(모아보기 피드)로 넘어갔을때 클라이언트에서 서버로 요청을 보내서 자동으로 넘어가는 쿠키를 다시 서버로 넘겨주고 서버에서 넘어온 쿠키의 토큰들에 접근해 해당 토큰을 클라이언트로 다시 넘겨주는 번거로운 과정을 거쳐야했다. 추후 리팩토링을 통해서 더 깔끔한 코드를 고민해 봐야겠다.
✨ 수료 그리고 새로운 시작
코드스테이츠의 모든 과정 속에서 이루 말할 수 없을 정도로 많은걸 배웠다. 코스를 겪으며 느꼈던 여러감정들이 스쳐지나 간다.
👍🏻 코드스테이츠의 장점
-
스스로 무엇을 모르는지를 정확하게 파악 할수 있게 만들어 준다.
-
그렇게 스스로 공부하는 방법을 터득하게 되고 검색 스킬도 늘어나게 된다.
-
페어 프로그래밍을 통해 커뮤니케이션 능력을 향상 시킬 수 있다.
-
수강을 하며 힘든 부분이 있다면 이슈 쉐어링 이라는 것을 통해 상담을 받을수 있는 공간도 있다.
-
2번의 프로젝트를 통해 전체적인 개발 과정을 습득 할수 있다 (특히나 좋았던)
-
잡서칭 스프린트를 통해서 취업과 관련된 정말 많은 정보를 얻을 수 있다.(완벽)
-
수료생들을 위한 커뮤니티도 잘 되어 있어서 수료 이후 사이드프로젝트나 스터디를 구하기에도 용이하다.
👎🏻 코드스테이츠의 단점
-
아무래도 코드스테이츠가 '자기주도적 학습'을 교육의 모티브로 삼고있다보니 무언가를 더 세세하게 제공되길 바라는 수강생 입장이라면 다소 불친절 하다고 느낄 수 있다.
-
스케줄이 굉장히 빡빡하다.
➡️ 아무래도 단기간에 3-4년간 배워야하는 정보들을 교육받다보니 하루종일 공부만 해도 시간이 모자라다. 그래서 몸이나 마음이 힘들어 질 수 있다 나같은 경우 틈틈히 시간을 내서 운동을 하고 정신적으로 리프레쉬를 계속해서 시켜주면서 코스를 수강했다.
-
원치 않는 페어나 프로젝트팀을 만나더라도 바꿀 수 없다.
➡️ 내가 코스를 진행하면서 정말 나를 힘들게 했던 페어가 한명이 있었는데, 엔지니어분에게 바꿔달라고 요청을 해도 바꿀 수가 없었다. 현업에 갔을때도 항상 마음에 맞는 사람들과 일을 하게 되는것이 아니기 때문에 그런 사람과의 커뮤니케이션도 필요하다고 생각해 코드스테이츠 내에서도 이렇게 룰을 정해 놓았다고 들었다. 그렇지만 꽤 길었던 스프린트여서 힘들었던 기억이 있다. 결과적으론 마음에 맞지 않는 상대를 어떻게 대처해야하는지 알아갈 수 있는 시간이었다.
🏃🏻 새로운 시작
수료를 했고 이제야 개발자로 태어나기 위한 알에 '금'정도만 갔다고 생각한다. 앞으로 취업을 위해 여러 과정을 거치게 될 텐데 그 과정이 단지 취업을 위한것이 아닌, 내가 늘 지향하고 있는 지식에 갈망이 있는 개발자 그리고 의사소통에 있어 강점이 있는 개발자가 되기 위한 과정이길 바라며 글을 마친다. 스스로에게 정말 고생했다는 말 해주고 싶고 이 글을 읽는 동기들에게도 너무나 고생했다는 말 전하고 싶다.
