💳 카드 혜택, 기프티콘 서비스 <모익> 회고

1. Why?

모익도 삼성 SW아카데미에서  7주동안 기획과 개발을 진행한 프로젝트다. 주제를 선정해서 하는 특화 프로젝트로 핀테크 도메인을 선택해 진행되었다. 또한 처음으로 내가 회원관리쪽을 맡은 프로젝트이기도 하다. 이번 글에서도 프로젝트를 회고하면서 Keep, Problem, Try를 정리해보자.

프로젝트 요약

💳프로젝트 Github

💳시연영상

• 기간 : 23.08.21~23.10.06(7주간)
• 팀원 : 6명(Frontend 3인, Backend 3인)
• 역할 : Frontend 개발자
• 사용 기술
  • Frontend : Next.js, TypeScript, Tailwind CSS, React Query
  • Collaboration : Notion, Figma, Git, GitLab

---

2. 기획

우리의 주제는 "카드 혜택을 사용하기 쉽게 지도로 보여주자"이다. 대부분의 기획 과정은 <스타게이트>와 대동소이하니 넘어가겠다. 

실제 구현된 화면

 

화면 기획

가장 크게 발전한 부분은 화면 기획이다. 저번에는 Figma를 이용해서 대략적으로 화면을 만든 다음, 컴포넌트를 적절하게 분리하는 방식으로 화면을 기획했었다.

하지만 이번에는 사용되는 모든 컴포넌트를 미리 분리하였으며, 심지어는 스켈레톤 코드의 경우까지도 미리 컴포넌트로 구현해두었다. 이를 통해서 Atom 단계의 모든 컴포넌트를 직접 눈으로 확인하고 만들 수 있었기에 컴포넌트를 제작할 때 큰 도움이 되었다.

---

3. 개발

구현 사항

내가 맡은 부분은 아래와 같다.

• 로그인/회원가입, 아이디/비밀번호 찾기 등 회원관리
• JWT 관리, 로그인여부에 따른 라우팅 관리 등 클라이언트 단의 보안처리

회원관리 구현

https://cksxkr5193.tistory.com/11

react-hook-form과 atomic 패턴으로 재사용성을 고려한 로그인/회원가입 컴포넌트 만들기

https://cksxkr5193.tistory.com/16

유저 인증 상태 관리하기 / 모익

로그인 여부에 따라 리다이렉트 시켜주기

https://cksxkr5193.tistory.com/41

로그인 여부에 따른 접근 제한 처리하기 / 모익

폴더구조

https://cksxkr5193.tistory.com/20#2.%20%EB%AA%A8%EC%9D%B5(Next.js%20%2F%20App%20Routing)-1

폴더구조의 Best Practice를 찾아서

폴더구조의 경우 아쉬움도 있었는데, 이번에는 계층을 세밀하게 나눠서 저번처럼 하위 컴포넌트가 의존성을 가지는 경우는 줄어들었다. 그런데 지나치게 나누다 보니 1~2개의 컴포넌트만을 가진 폴더들이 생겨나버렸다... 이로 인해 좀 더 상황에 맞는 폴더구조를 설계해봐야 할 필요성을 느꼈다.

협업

주석 작성

JsDoc로 주석을 다는 방식을 아예 FE팀 공식 코드 작성 룰로 정해뒀다. JsDoc 공식 문서도 찾아보면서 @param나 @todo외에도 @returns로 뭘 반환하는가도 명시해 주는 등, 좀 더 가독성 높은 주석을 작성하기 위해 노력했다.

정기적으로 개발 과정 공유

<모익>을 진행하면서 크게 기억에 남는 부분은 매일매일 데일리 스크럼을 진행했다는 점. 그리고 추가적으로 매주 월요일, 발표 전/후 그리고 이슈가 있을때마다 회의를 진행하고 회의록을 작성했다는 점이다.

이런 회의들은 "티끌 모아 태산"같은 속담이 잘 어울린다고 생각한다. 사실 하루 빼먹는다고 무슨 일이 생기지는 않지만, 일주일이 되고 한달이 되면 엄청난 차이를 가져온다.

자주 회의를 진행하고 지금 당장 우선적으로 해야할 일들을 논의하면서 의견을 주고받은 덕분에 무사히 마지막 날까지 프로덕트를 완성시킬 수 있었다.

---

4. Keep, Problem, Try

Keep

• 보안 처리 과정에 대해서 학습하고 JWT와 oAuth를 선택하여 구현
• 재사용성과 유지보수성을 위해 Atomic 패턴을 사용해서 회원관리 구현
• 모바일 사용을 우선으로 하는 프로덕트임을 고려해 PWA 설정
• JsDoc 주석 작성을 룰로 정하는 등 코드의 가독성을 위해 노력
• 매일 아침 데일리 스크럼을 통해 현재 진행 상황과 논의사항 공유
• Jira 사용 및 회의를 통해 개발상황 지속적 공유하는 등의 노력으로 일정에 맞게 프로덕트 완성

Problem & Try

• 컴포넌트를 계층별로 나누는 Atomic 패턴을 사용하다보니 Props 관리에 어려움을 겪음
  • Try: Props를 좀 더 효율적으로 다룰 수 있는 방법 학습하기
• 공통 컴포넌트와 관심사별 컴포넌트를 나눴으나 정도가 지나쳐 부작용을 겪음
  • Try: 상황에 맞는 폴더구조에 대해 좀 더 고민해봐야
• React-hook-form 라이브러리를 사용했으나 내부 로직을 완벽히 이해하지 못해 어려움을 겪음
  • Try: 개발 편의성만을 위한 도입이 아니라, 제대로 이해하고 사용하는 태도를 갖추자
• 체력 관리 실패
  • Try: 정기적인 운동 및 체중 감량,,

---

5. 이후 개선

https://cksxkr5193.tistory.com/42

런타임을 고려해 타이머 구현하기

•  

---

6. 관련 블로깅

https://cksxkr5193.tistory.com/16

유저 인증 상태 관리하기 / 모익

https://cksxkr5193.tistory.com/41

로그인 여부에 따른 접근 제한 처리하기 / 모익

https://cksxkr5193.tistory.com/42

런타임을 고려해 타이머 구현하기

https://cksxkr5193.tistory.com/12

공식문서로 ref 알아보기

https://cksxkr5193.tistory.com/14

공식문서로 forwardRef와 useImperativeHandle 알아보기

https://cksxkr5193.tistory.com/11

react-hook-form과 atomic 패턴으로 재사용성을 고려한 로그인/회원가입 컴포넌트 만들기

https://cksxkr5193.tistory.com/15

Next.js 13 App Routing PWA 적용하기/Next.js

https://cksxkr5193.tistory.com/20#2.%20%EB%AA%A8%EC%9D%B5(Next.js%20%2F%20App%20Routing)-1

폴더구조의 Best Practice를 찾아서

https://cksxkr5193.tistory.com/21

코드리뷰로 클린하고 일관적인 프로덕트 만들기