회고

[CND-Project] KPT 회고

zizonemoi 2023. 2. 22. 09:55

23.01.25 ~ 23.02.17

약 3주 정도 걸린 프로젝트였다.

FE 3명이 만든 코인 모의 투자 애플리케이션이다.

코인 투자를 처음 접해본 사람들이 접근하기 쉬운 UI/UX가 목표였다.

 

1. 프로젝트 설명

🪙 Coins-never-die github | 배포

목적

  • 코인을 처음 시작하는 사람들에게 직관적으로 보이는 UI 구성
  • 로그인을 한 뒤 모의 투자를 할 수 있다.
  • 수익률 확인이 가능하다.

구현하고자 했던 기능

  • firebase를 이용해 유저 관리를 하고자 했다.
  • 리액트 쿼리로 업비트 api를 실시간에 가깝게 불러오고자 했다.
  • 매수/매도 기능을 넣어 유저가 모의 투자를 할 수 있게 했다.
  • 회원가입 시 초기 자산을 넣어주고자 했다.

사용 스택

Next.js 13, Typescript, Javascript, React, React Query, Recoil, Firebase, Vercel, HTML5, CSS3, TailwindCSS, Axios, Prettier, Figma

협업 툴

GitHub, Figma, Discord, Zep

맡은 부분

[팀원] 유저 데이터 생성, 관리 담당, 회원가입, 이메일 로그인, auth 로그인

 

2. 개인 회고용 KPT

Keep

  • 모의 투자 시 데이터 실시간 변동을 보여주기 위해 firestore의 onSnapshot() 메서드를 이용했다.
  • 모의 투자를 위한 유저 데이터 문서가 필요했다. 이를 위해 회원가입 시 firebase에서 제공하는 유저의 식별자인 uid로 문서를 생성하였다.
  • 컴포넌트 분리와 회원가입, 로그인에서 중복되는 데이터, 함수를 분리시켜 코드를 줄였다.
  • Vercel를 이용하여 배포를 했다. firebase를 사용하면서 env를 썼는데 vercel에서도 github secrets처럼 env를 넣는 칸이 있어서 편하게 배포할 수 있었다.
  • 이번 프로젝트에서는 새로운 스택을 많이 도전했는데 그중 firebase에 대해서 이름만 아는 상태에서, firebase에 있는 CRUD를 위한 메서드를 찾아볼 수 있는 상태가 됐다.
  • zep을 통한 상시 소통으로 실시간으로 의견을 주고받는 상황에 좀 더 친숙해졌다.
  • 프로젝트 시작 전 회의에서 데일리 회고를 쓰면 좋겠다는 의견을 냈다. wiki에 회고를 작성하면서 그날 진행한 내용을 정리하면서 기록하는 시간을 가질 수 있었다.

Problem

  1. 소셜 회원가입 초기 자산 : 회원 가입 시 초기 자산을 넣어주고자 했지만, 소셜 로그인은 회원가입과 로그인을 구별하는 메서드가 따로 존재하지 않았기 때문에 신규 유저를 구별할 수 있는 로직이 필요했다.
  2. 버전 변화로 인한 코드 변경 : 맨 처음에는 npm이 아니라 yarn-berry를 사용하고자 했다. 하지만 next.js13 app 디렉터리(beta)와 yarn-berry, VSC의 안정화 문제 때문에 npm을 선택했다. 이러한 결과가 여러 시행착오 끝에 나온 것이고, 결론적으로 초기 세팅에 소요된 시간은 3일이었다. 첫 주에 빠르게 진행해야 프로젝트 예상 마감일을 지킬 수 있을 거라 생각했다. 이 와중에 firebase는 조금 공부했던 버전 v8과 다른 v9…
  3. encoding : build 할 때 가장 발목을 잡았던 에러, 개발할 때는 괜찮았으면서… 터미널에서 난 warn이라서 따로 브랜치 파서 고치다가 run dev도 안되는 결과가 나온 적이 있어서 배포할 때 문제없으면 천천히 고치려고 했는데 배포할 때 문제가 돼버렸다. 피할 수도 없다.
  4. 에러 메세지 처리 : 타입 스크립트 적용으로 꽤 어렵게 코딩할 것 같았는데 (타입 스크립트도 1% 정도 공부하고 바로 한 거라 고난길 예상했었다.) 막상 VSC가 다 알려주거나, 구글링하면 빠르게 에러를 해결할 수 있어서 큰 문제 없이 개발하다가 catch 에러(unknown) 처리에서 firebase가 제공해 주는 에러 메세지(error.code)를 이용해야 됐을 때 타입 스크립트의 매운맛🔥을 느꼈던 것 같다.
  5. undefined : 배포가 끝이 아니라는 걸 알게 해준 오류, 프로젝트 배포 후 다른 스터디에서 프로젝트 테스트를 부탁드렸는데 눈앞에서 오류를 발견했다. 유저 데이터에 있는 data가 undefined라 페이지 렌더링도 안되는 상황이었다.!!
  6. 데일리 회고 : 프로젝트 진행 12일까지는 데일리 회고였던 것🤔

Try

  1. 소셜 회원가입 초기 자산 : 소셜 로그인 진행 시 유저의 uid로 firestore에 작성된 문서가 있는지 확인하는 과정을 거쳤고, docSnap.exists() 메서드 사용해서 작성이 안 돼있다면 신규 유저라 판단하여 초기 자산을 넣어주고, 문서를 생성해 줘서 해결했다.
  2. 버전 변화로 인한 코드 변경 : 처음 사용해 보는 firebase지만 로그인, 회원가입은 자료가 많았고, 어렵지 않은 파트여서 계획처럼 진행됐다. 하지만 유저 데이터를 생성하고, 불러오고, 업데이트하는 과정은 순탄하지 않았다. firebase의 버전도 v8에서 v9로 바뀐지는 꽤 된 것 같은데 생각보다 구글링할 때 필요한 자료가 잘 보이지 않아서 공식 문서를 가장 많이 봤는데 오히려 문서가 설명이 더 쉬웠던 적도 있었다. 조금 더 공부를 했으면 활용할 수 있는 내용이 더 많았을 것 같아서 기능 구현을 다 했어도 뿌듯함 반 + 아쉬움 반 정도로 firebase를 사용했던 것 같다. 확실한 건 공식 문서에 대한 두려움을 어느정도는 극복하게 해준 애플리케이션이라는 점이다.
  3. encoding : chatgpt님 도움으로 해결한 encoding 에러. 팀원분께서 아이디어를 내지 않으셨다면 활용해 볼 생각도 못 해봤을 것 같은데 트렌드에 뒤처지지 않고, AI 활용하는 방법에 대해 한 번 더 생각하게끔 했던 encoding 에러 해결 날이었다.
  4. 에러 메세지 처리 : 찾으면 또 나오기는 했지만 공부를 하지 않아서 엄청 돌아간 기억이 있다. 이제 프로젝트로 경험한 타입들 강의 들으면서 깨달아가는 과정이 필요한 것 같고, 강의 결제를 했다💸
  5. undefined : 콘솔 열어서 에러 확인 후에 바로 수정하고, 왜 이런 오류가 발생됐는지 확인했는데 개발할 때는 한 유저로 오래 머물고 있다 보니 data가 있는 상태로 개발이 진행됐고, 그동안 데이터 구조가 조금씩 바뀌었기 때문에 발견하지 못했던 에러였다. 테스트의 중요함을 다시 알게 된 하루였다.
  6. 데일리 회고 : 프로젝트 막바지에 접어들면서 개발과 에러 잡기에 투자하는 시간이 많아져, 우선순위에서 회고가 밀리게 됐다. 마냥 손 놓을 수는 없어서 프로젝트 마무리 날에 기억을 짜내서 마지막 주 회고를 작성했다. 매일 기록하는 게 초기 목적이어서, 조금 아쉽게 된 부분이었다. 그래도 회고를 작성하면서 기록을 하니 그 당시에 가장 집중적으로 고민을 했던 부분과, 어떻게 해결을 했는지 볼 수 있어서 기록의 중요함을 느낄 수 있었다. 이제 프로젝트가 마무리돼서 시간적 여유가 생긴 만큼 기록하는 시간을 따로 빼서 WIL라도 블로깅 해볼까 한다.

3. 느낀점

이번이 팀 프로젝트로 3번째인데 하면 할수록 보이는 게 하나씩 늘어가는 느낌을 받는다.

 

배우는 게 생길 때마다 전에 진행했던 프로젝트도 간간이 생각났다. 항상 내가 부족했던 부분이 가장 먼저 생각나고, 그 때 이렇게 했으면 좋았지 않았을까라는 생각이 드는데 이게 과해지면서 집중이 흐트러질 때가 아주 가끔 있다. 그냥 그런 아쉬운 생각이 들 때마다 그 당시에는 그게 나의 최선이었다 그렇게 마음을 정리하면서 좀 더 앞으로 편하게 가려고 했었다.

프로젝트하면서 firebase와 친해질 기회를 가졌다. 전 프로젝트에서 FE 담당 3명이 모여 만든 프로젝트였고, firebase가 백엔드 코드를 몰라도 간단한 프로젝트를 만드는 데 사용할 수 있는 애플리케이션이라는 점에서 매우 매력 있는 애플리케이션이었다. 물론 많이 답답한 부분도 있었는데 이번 프로젝트에 사용하기는 괜찮았다.

 

이번에는 리팩터링을 고민해 보고 로그인 폼 부분 리팩터링을 아주아주 신경 써서 해봤는데 이게 맞나 싶었다. 오히려 복잡한 느낌이 들었기 때문이다. 항상 이게 맞나 싶을 때는 공부를 해야 할 시기인 것 같다. 타입 스크립트랑 CS 조금 더 신경 쓰면서 리팩터링이 무엇인지 어떻게 작성해야 좋은 코드인지 공부해야겠다.

 

타입 스크립트도 사용은 해봤지만 아직은 모르겠다. 아직 안친하다. 이것도 강의 들으면서 정리하면서 공부할 시기가 된 것 같다.

맨땅 헤딩 하는 스택을 사용하는 프로젝트였다. 새로운 스택을 사용해서 프로젝트를 완성시켰다는 점이 뿌듯하고 신기하지만 아직 1% 사용해 본 느낌이다. 이제 왜 이게 돌아가는지 알아갈 시간이 된 것 같다. 당분간은 공부하고 보충하고 그런 시간을 보내야겠다.

wiki 회고들 🐣

1일차 | 2일차 | 3일차 | 4일차 | 5일차 | 7일차 | 8일차 | 9일차 | 10일차 | 11일차 | 12일차 | 마지막 주

저작자표시 (새창열림)