Devengers의 탄생
36주간 교육 세션을 무사히 마치고 꿈에 그렸던 프로젝트를 시작하게 되었다.
과연 내가 3번의 HA를 무사히 통과할 수 있을까 고민하며 열심히 공부해온 결과라 생각이 든다.
팀 선정 기간을 거쳐 나를 포함한 4명의 멤버가 한 팀이 되었다.
모두 Pair program에서 같이 공부했던 동기분들이라 금방 팀에 녹아들 수 있었다.
나름 사회 생활(?)을 해본 나로서는 프로젝트에 있어서 무엇보다 팀웍이 중요하다는 사실을 알고 있었다.
프로젝트 SR 미팅에서는 나는 서로의 이름이 아닌 nickname을 정해보자 제안했다.
수평적 관계에서 자유롭게 커뮤니케이션을 할 수 있어야 좋은 결과물을 도출해 낼 수 있을 것이라 생각했기 때문이다.
서로 nickname으로 불러볼까요?
그렇게 우리는 Dev + Avengers => Devengers가 되었고, 나는 팀에서 스트레인지로 불리게 되었다.
이번에는...
첫 Software Requirement
다양한 아이디어가 나왔다. 첫 프로젝트이기도 하고 4주 정도 그 동안 학습해온 내용을 공부하자는 차원으로 CRUD가 기본적으로 되는 성격의 아이디어를 선정했다.
투표
밸런스 게임에서 착안해 낸 아이디어였다. 둘 중 하나를 선택하는 것은 여간 쉬운 일이 아니다. 그래서 다른 사람들은 어떻게 생각하는지 물어볼 수도 있고, 내가 직접 그런 질문에 답을 해줄 수 있는 그런 서비스를 만들기로 기획했다.
생각보다 기획이 실제 코드 작성 만큼이나 중요한 것이란 걸 많이 배울 수 있었다.
Front-end를 해보려고요
사실 나의 최종 목표는 Front-end도 할 줄 아는 Back-end 개발자 이다.
다른 거창한 말이 따로 있지만, 그 말을 붙이기에는 아직 부족한게 많아서 저렇게 불러본다.
나의 계획은 이렇다. 이번 First-Project에서는 Front-end를 직접 해보면서 중요한 stack들을 다시금 내 것으로 만들어보고, Final Project에서는 Back-end를 제대로 해보는 것이다.
손으로 그린 형편없는 UI 디자인에서 Figma까지
다른 투표 레퍼런스를 참조하여 간단한 wireframe을 만들어 보려고 했다.
나름 역사적인(?) 우리 서비스의 hand writing wireframe이다.😅
이렇게 하는 건가요?
우리가 구현해야 하는 각 페이지를 발이 아닌 손으로 직접 그려본 이후에는 Figma를 이용하여 실제 wireframe을 만들었다. 유투브 강의나 블로그 등을 참조했다.
Figma로 만들어 본 wireframe
하얀 도화지 위 creat-react-app ...
그 동안의 Sprint에서는 잘 만들어진 코드에서 학습 과정에 필요한 테스트 등을 많이 해보았지만...
커서만 깜빡이는 vs code에 뭐 부터 시작을 해야할지... 마치 하얀 도화지 위에 그림을 그려야 하는 막막함이 있었다. 그렇게 우리는 타이핑했다. npx creat-react-app
Git branch 관리
실제로 팀 프로젝트를 진행해 보니 Git branch의 역할이 얼마나 중요한지 새삼 깨닳았다.
수없이 친 git pull upstream dev도 못 잊을 것 같다.
우리는 위에 정리된 Git flow를 철저하게 지켰다. 각자 작업 전에는 upstream에서 pull로 가져와 작업을 했다. 그리고 개인이 맡은 작업의 경우 새 feature 브랜치를 생성하여 작업 후 나의 remote origin 레포에 push 후 PR을 날리고, Github에서 merge하는 일련의 과정을 꼭 지키려고 노력했다. 그래서였는지 4명의 멤버가 협업하면서 큰 충돌 없이 프로젝트를 마무리할 수 있었다.
Tailwind CSS...이런 거였다니
TailwindCSS는 CSS라이브러리가 아니다. CSS 기술의 방법론적인 차원의 프레임워크이다. 인라인 스타일을 사용하기 때문에 클래스를 지정하고, 수정 시 클래스명을 찾아야하는 수고로움에서 벗어나, 스타일을 빠르게 적용하고 확인할 수 있었다.
Brand color: #7CE0AE 그리고 #FFEE93
4주 프로젝트라고해서 디자인요소를 대강 만들지 않았다. 서비스만의 brand color를 정하고 기본적인 UI 디자인의 tone&manner를 정했다. 투표라는 이미지가 어떻게 보면 딱딱해 보일 수 있는 콘텐츠이기 때문에, 파스텔 톤의 색상을 사용하고 심플한 UI를 사용했다.
그리고 로고도 이렇게 만들었다.
달고 살았던 API 문서 (feat. GitBook)
작업을 하면서 Backend에서 작성한 API 문서를 달고 살았다. REST API를 정확하게 따랐는지는 확신이 서지 않았지만, 나름 규칙을 지켜 만든 API 문서였다. 수업에서 해보지 않은 PATCH나 DELETE 메소드를 사용해서 회원 정보 수정이나 탈퇴 등을 구현했다.
살짝 맛만 본 Redux-Toolkit
우리가 작성한 component 들은 많은 depth의 부모 자식 관계가 존재하지 않기 때문에 props drilling 심각하게 발생하지는 않았다. 다만 jwt로 생성한 accessToken과 refreshToken 중 accessToken을 전역 상태로 관리하여 각 페이지에서 활용하기 위해 redux를 사용했다. 맛을 본 정도로만 사용을 했지만, useDispatch, useStore, slice, store 등을 어떻게 설정하고 활용할 수 있는지 학습할 수 있었다.
다음에는...
토큰은 localStorage로...
새로 고침을 하거나 새 탭을 열었을 때 로그인 및 토큰의 유효성을 유지하고자 했지만, 우리가 작성했던 코드는 토큰을 상태값으로 보관하여 해당 구현에 대한 부침이 있었다. 그러나 app.js 내에 (쿠키에 저장되어 있는) refreshToken으로 accessToken을 갱신하는 콤포넌트를 가장 상단의 위치에 넣어주어 모든 페이지마다 accessToken과 로그인 상태가 유지될 수 있도록 하여 문제를 해결할 수 있었다. 다만, 이런 갱신의 작업을 매 페이지에서 해주는 방법보다는 localStorage에 토큰을 넣어주어 작업을 할 수 있지 않앗을까 하는 질문을 스스로 던지고 마무리했다.
tailwind와 redux를 마스터하자
이번에 사용했던 두 stack을 마스터하는 것이 목표이다. (아직 Final 프로젝트에서 Frontend를 하는 것으로 정해지지 않았지만) 궁극적인 목표인 full-stack이 되기위해, 더 파고 들기로 했다.
typesript가 뭐야
사실 벌써 우리 팀은 typescript 공부 중이다. JS의 superset이라는 TS는 말그대로 JS의 compiler이다. 런타임 중에 타입을 확인하는 JS아 달리 TS는 컴파일 중에 타입을 확인하기 때문에 Error를 사용 당시가 아닌 개발 당시에서 확인 가능하다는 장점과 오타를 확인해 주어 Editor로서의 역할도 해주는...장점이 많은 언어라고 알고 있다. 이번 기회에 친해지자...
마치며...
이렇게 열정적이고 성실하고 팀웍이 좋은 동료들을 만날 수 있을지 몰랐다. 사실 팀 배정 전부터 마음 속으로 바랐다. 좋은 멤버들과 재미있게 공부할 수 있었으면 좋겠다고.
앞으로 우리가 어떻게 성장하고 어느 자리에서 어떤 일을 하게 될지 아직 잘 모르지만...오래동안 함께 즐겁게 개발하자는 약속을 맺으며 첫 번째 프로젝트를 마무리할 수 있어서 감사했다.
Enjoy Coding, Upgrade together.
| Hulk | Dr.strange | Spiderman | Wanda |
|---|---|---|---|
 |  |  |  |
아쉽지만 First project는 두서없는 회고만 적게 되었다. 앞으로 진행하게 될 Final project의 경우 매일 TIL형식으로 기록을 할 예정이다.
