- 이번 주 항해 취업 리부트코스에서 내가 구현한 기능은 무엇인가요?
커머스라는 주제를 가지고 프로젝트를 하게 되었다. 나는 그 중 festa! 같은 컨퍼런스 및 이벤트 티켓 예약 플랫폼을 만들기로 하였다.
- 와이어프레임 구성
- firestore 컬렉션 구성
- 이메일 로그인 기능 구현
- 이메일 회원가입 기능 구현
- 소셜 로그인 기능 구현
- 내 이벤트 보기
- 이벤트 등록
- 이벤트 삭제
현재 내가 완료한 작업 목록이다.
제일 위에 첨부한 사진은 내가 불태운 피그마이고, 아직 갈 길이 구만 리다. ㅎㅎ ;;
- 해당 기능을 구현하기 위해, 어떤 기술적 의사결정을 거쳤나요?
- [유저 정보 저장 기능]을 구현하기 위해 고민한 기술의 종류들에는 무엇이 있나요? ex) A, B, C 중 B 선택
- A: 로컬 스토리지에 바로 저장
- B: Context API 사용
- C: Recoil 사용
- D: Zustand 사용
<- 선택
- 위 기술들별로 각각의 장단점이 있다면 무엇인가요?
| 방법 | 장점 | 단점 |
|---|---|---|
| 로컬 스토리지 직접 사용 | 가장 간단하고 직관적인 방법으로 데이터를 브라우저에 저장할 수 있음. | 상태 변화를 감지하여 리렌더링을 자동으로 관리해주지 않기 때문에 사용자 경험(UX)을 개선하기 위한 추가적인 작업이 필요함. |
| Context API 사용 | React 내장 기능으로 추가 라이브러리 없이 사용할 수 있음. | 상태가 변경될 때마다 소비하는 모든 컴포넌트가 리렌더링되기 때문에 큰 애플리케이션에서 성능 문제를 일으킬 수 있음. 보일러플레이트 코드가 많아질 수 있으며, 특히 많은 상태를 관리할 때는 코드가 복잡해질 수 있음. |
| Recoil 사용 | React에 더 가까운 방식으로 상태 관리를 할 수 있음(React의 Concurrent Mode와 잘 통합됨). 대규모 상태 관리에 적합함. | 아직 실험적인 단계로 간주되며, 비교적 오랫동안 업데이트가 되지 않아 사용량이 적어지는 추세임. |
| Zustand 사용 | 매우 가벼우며 설정이 간단함. 불필요한 리렌더링 없이 필요한 컴포넌트만 업데이트되며, 사용법이 간단합니다. 또한, 비동기 로직을 쉽게 통합할 수 있고, 미들웨어를 사용하여 상태를 저장하는 등 확장성이 뛰어남. | 상태 관리의 복잡성이 증가할 경우, Zustand만으로는 관리가 어려워질 수 있음. |
나는 유저 정보, 장바구니 목록 정도만 전역으로 관리하면 됐다. 그래서 가볍고 보일러플레이트 코드가 적으며, 상태 변화에 따른 자동 리렌더링이 가능한 Zustand를 선택했다.
- 이번 주 겪은 트러블 슈팅이 있다면 무엇인가요?
zustand/local storage/firebase 로그인 상태 동기화 설계
- 이번 주 진행된 개인 프로젝트에서 얻은 인사이트는 무엇인가요?
항해99에서는 작업 속도 향상을 위해 shadcn/ui라는 컴포넌트 라이브러리를 사용하기를 권장했다. docs가 잘 이루어져 있길래 이걸 사용해 보기로 마음먹었는데.......
단순 버튼을 사용하기에는 좋았는데, 폼을 다루는 건 너무 어려웠다.
나는 이벤트라는 상품 특성상 파일, 텍스트, 셀렉트, 라디오 같은 여러 가지 input을 사용해야 했다.
지.옥.시.작
코딩 시작, 존나 크게 시작, 코딩 존나 빵빠레 불면서 시작, 코딩 축제 시작, 코딩 클럽 오픈, 코딩 클럽 할인 이벤트 시작, 블랙코딩데이 이벤트 시작, 코딩 페스티벌 시작, 코딩 군악대 입장, 코딩 입학, 코딩 졸업 및 재입학, 코딩 복학, 코딩 파티 시작, 코딩의 저주 시작, 코딩의 악마 등장
나는 등록 폼이 이렇게 오래 걸릴 줄 몰랐다. 등록 기능에만 이틀은 꼬박 태웠다.
내가 너무 완벽하게 만들려고 오버 엔지니어링 하는 걸까? 선이 필요한 것 같다.
항해99 취업 리부트 코스를 수강하고 작성한 콘텐츠 입니다.
#개발자포트폴리오 #개발자이력서 #개발자취업 #개발자취준 #코딩테스트 #항해99 #취리코 #취업리부트코스
