🌱 Intro

이 포스팅은 부트캠프 수료를 앞둔 시점에서 마지막으로 진행되는 메인 프로젝트 회고이다. 메인 프로젝트 하기 전에 Stack Overflow 사이트를 클론하는 free project 를 했었다. 작년 10월부터 1월 초까지 기본기를 공부하고 바로 클론 코딩을 진행하는데 3-4개월의 지식으로 무얼 할 수 있을까라는 생각이 가장 많이 들었다. 이런 생각에 가장 큰 영향을 준 것은 나에 대한 자신감과 무지에서 나왔다. 자신이 너무 없었고, 하루 배워 다음 날에 적용하려고 했던 것들은 기억이 안 나기도 했다. 그래도 포기하지 않고 했던 이유는 나의 이기심과 고집에서 나왔다. 수료고 나발이고 개발이 하고 싶었다! 나도 좋은 서비스를 창출하고 싶었다. 실력은 모자르지만 하고 싶은 일은 많았고, 조금만 더 참고 여러 번 하다보면 되지 않겠냐며 하고 싶으면 더 열심히 해 보자고! 모자르다고 자신을 갉아먹는 일은 그만 두었다!

악으로 깡으로 하는 거야~~~

---

🪄 photoday 기획 및 내용 구성

팀에 도움되는 팀원이 되자는 마음이 제일 컸다. 또 해 보고 싶었던 것도 해 보자라는 도전 의식이 강했다!
제대로 해 보고 싶어서 초기에 앞장 서서 계획을 짰고, 준비했다.

• 프로젝트 노션 생성
• 프로젝트 캘린더 정리
• 회의록 템플릿 생성
• FE 회의 때 진행할 목록 정리(기술 스택, 아이디어, 개발 환경 구성)
• Github 초기 세팅
• Github 칸반 보드 설정
• Issue, PR 템플릿 설정
• 컨벤션 (git flow, commit message 등) 생각해 두기

초기에 내가 했던 일이다 기억 나는 게 이 정도가 끝... 😅

프로젝트 아이디어 브레인 스토밍, 기술 스택, 개발 환경

프로젝트 기간이 촉박했기 때문에 미리미리 할 수 있는 건 빨리 끝내버리는 게 좋을 것 같았다.
프로젝트 아이디어 브레인 스토밍과 FE 기술 스택 설정에 대해서는 프로젝트 팀 빌딩 이전에 같이 프로젝트를 진행하기로 했던 팀원들과 회의를 통해 정해 두었다. 사전에 생각해 온 아이디어를 발표하고, 그 이후로는 자유롭게 이야기를 하면서 의견을 덧붙였다. 개발 환경 구성과 기술 스택 결정에 있어서는 도전해 보자! 했던 타입스크립트를 하기로 했고 패키지 관리 툴인 yarn 을 사용하기로 했다.

• yarn + TypeScript + Vite 사용
• Styled-Component 사용
  • Component 파일명 뒤에 .styles 추가하여 import 후 사용
  • .styles 파일의 styled-component인 경우 네이밍은 style 약자 S_ + pascal case 사용
• eslint + prettier 사용
• React Router 사용
• Axios 사용
• Redux-tookit && React Context API 사용
• Github Action 자동 배포 + FrontCloud, Route53, S3 사용

---

📸 photoday | 무료 이미지 공유 웹 서비스

FE 끼리 브레인 스토밍으로 아이디어 회의를 했을 때 회의록을 작성했다. 회의록을 보면서 프로젝트 첫 날에 팀 빌딩을 위해 아이디어 선정을 제일 처음으로 했다. 여러 후보가 있었지만 오늘의 사진 이란 아이디어가 채택 되었다. 백엔드 측에서 이미지 관련 기능에 도전해 보고 싶었다고 하였고, 우리도 해당 아이디어에 대해 긍정적이었기 때문이다.

• 프로젝트명: photoday
• 직접 찍은 사진들을 공유하고, 저작권 없이 사진을 무료로 다운받을 수 있는 사이트

sns와 같은 곳에서 무단으로 사진을 도용하는 경우가 빈번하고, 사진의 경우에는 저작권과 관련되어 있기 때문에 애초에 유저가 업로드하는 사진과 다운로드 받는 사진 모두 저작권에서 자유로운 사진들이라면 어떨까? 해서 나온 아이디어다. 자신의 일상을 사진으로 공유해도 좋고, 자신이 직접 촬영한 사진을 자유롭게 공유해도 좋다. 사진을 첨부하여 대화도 가능한 커뮤니티 형식으로도 할 수 있었지만, 오로지 사진에만 집중시키기 위해 커뮤니티성이 짙은 텍스트 포스팅 기능을 없애고 팔로우 기능만을 남겨 두었다.

저작권 부분을 어떻게 할까 하다가 가입할 때 저작권 관련 약관에 동의하면 가입을 할 수 있게 하였다. 또한 약관 동의에도 불구하고 저작권을 침해하는 유저가 있다면 신고 제도를 도입하며 해당 유저를 신고하여 이용 정지 혹은 탈퇴 기능을 추가하였다. 프로젝트명으로 오늘의 사진이라는 이름은 임시로 지어놓은 이름이었기에 새로 정했어야 됐는데, 사진 photo 와 오늘의 today 를 합치면 괜찮은 것 같아 나의 아이디어인 photoday 로 정하게 되었다!

다음은 우리 프로젝트에서 사용한 기술 스택들이다.

---

🎉 KPT

🏃‍♀️ Keep

• 배움을 두려워하지 않는 자세

  이번 프로젝트를 통해서 배움에 대해서 두려워하지 않게 되었다. Redux-toolkit 과 TypeScript 사용하기로 한 것에 굉장히 만족한다! 프로젝트를 진행하면서 멘토링을 통해 멘토님이 타입스크립트를 사용하는 것에 익숙해지는 것만으로도 이번 프로젝트에 얻는 게 많을 것이라고 했다. 타입스크립트에 대한 두려움이 있었지만, 프로젝트를 진행하면서 타입스크립트 하길 잘했다라는 생각이 들었다.

• 상태 관리를 생각하는 새로운 습관

  리덕스의 경우에는 툴킷을 사용했다는 것에 만족보다는 이 툴을 사용하면서 상태 관리에 대한 고민을 정말 많이 하게 되었고, 새로 개발을 시작할 때부터 상태 관리를 염두해 두고 개발을 진행하게 된 나의 새로운 습관을 얻게 되었다.

• 시멘틱 웹을 위한 학구적인 자세

  멘토님께서는 시멘틱한 웹을 위해서 시멘틱 태그의 적절한 사용을 권장하셨다. 개발하면서 이 부분도 의식하면서 하다보니 시멘틱 태그와는 조금 더 친해진 것 같다 🤭👍

• 컨디션 관리 & 멘탈 관리

  한 컴포넌트 작업을 시작하면 끝날 때까지 하려는 습관이 있는데 이러한 습관 때문에 컨디션 관리가 제대로 되지 않아서 멘토링 받았던 부분이다. 이 부분에서는 지금과 같은 때에 경험해 보는 것이 좋다고 하셨다. 지금 프로젝트를 통해서 내가 어느 정도까지 감당이 가능한지에 대한 측정이 가능할 것이라고 하셨고, 내가 어느 정도를 하면 힘든지, 힘들었을 때 어떻게 하면 스트레스나 컨디션 회복이 됐는지의 기준이 생길 것이라고 하셨다. 나의 경우에는 시작한 것은 끝낼 때까지 흐름 끊기는 게 싫어서 계속 붙잡는 성향이 짙어서 하루 종일 작업을 하고 있어도 새벽이 지나 아침이 다가올 때까지 하는 경우가 많았는데, 이렇게 계속 하게 될 경우, 건강 문제와 프로젝트 진행면에서도 악영향을 미칠 수 있다. 이번 프로젝트를 통해서 최소한의 목표치를 잡고 최소한의 목표를 달성하고 나서는 작업에 대한 집착을 조금 내려놓았다. 이를 통해 컨디션 관리를 할 수 있었고, 평소 게임을 좋아하기 때문에 프로젝트 기간에는 게임보다는 게임 플레이 영상을 보면서 스트레스를 풀고, 가끔 산책을 나가는 방법이 효과적이었다!

🔎 Promblem

• github action yml 파일 수정

  github action을 통해 자동배포를 했는데, yml 파일이 잘못되었던 건지, 환경변수 설정 부분이 인식이 되지 않는 것 같았다. 멘토님에게 물어도 보고 구글링도 열심히 했는데 여전히 해결하지 못했다. 이 부분은 다시 도전해 보아야 할 것 같다.

• 한번에 처리하려고 했던 점 (feat. 귀차니즘...)

  form에서 아이디와 비밀번호를 받는 input component를 모양이 같아 같은 component로 재사용하다보니 이벤트 처리를 묶어서 했었다. type이 id, password로 나누어 조건 처리해 두었는데 이렇게 보다는 분리해 두는 게 좋을 것 같다. 컴포넌트가 모양이 같다고 해서 컴포넌트로 분류되는 게 아닌 점을 알고 있음에도 귀찮다는 이유로 묶어서 처리한 점 반성하자 😅

💃 Try

• api 요청 로직을 처리하는 hooks 적용

  여기서 회고하는 메인 프로젝트를 진행할 때 같이 하고 있던 사이드 프로젝트가 있는데 이 사이드 프로젝트에서는 api 요청하는 부분을 hooks를 통해서 반복되는 부분을 줄일 수 있었는데, 이 프로젝트에도 적용해서 리팩토링하면 좋겠다는 생각을 했다.

• 검색 기능

  프리와 메인 두 가지 프로젝트에서 검색 기능을 구현한 적이 없다. 검색 기능, 필터 부분을 구현해 보고 싶다.

• node.js로 로그인 기능 구현해 보기

  멘토님께서 프론트라도 해당 부분은 해 보면 정말 좋다고 말해 주신 부분이다. 프론트라도 어떻게 서버가 돌아가는지에 대한 흐름을 알고 있는 것과 모르는 것은 다르다고 하셨기 때문에 node.js에 대해 공부해 보고 싶다!

---

👍 마무리

free project 에서는 완벽한 팔로워 성향을 보여 줬다면 이번 main project 에서는 리더의 성향을 많이 보여줬다. 리드를 한다는 것은 많이 귀찮고 신경 쓸 것도 많고 그만큼 일도 많이 한다. 아닌 곳도 있겠지만 난 이 프로젝트에 많은 일과 책임감을 가졌다. FE 리드를 맡아서 힘들었던 것도 맞지만 많은 일을 맡아서 그만큼 얻은 것도 많았다. 본인이 한 작업량 대비 프로젝트 결과물 완성도를 말하는 게 아니다. 많은 작업을 한 만큼 많은 어려움을 마주했고, 해결할 때마다 난 크든 작든 의미있는 배움을 얻었다.