미리보기

기존 중고거래 시스템에서 경매 기능을 추가한 중고 경매 거래 사이트입니다.

경매를 통해 중고 거래에 재미를 느끼고,판매자와 사용자 간의 네고가 없는, 서로 만족하는 가격에 거래 할 수 있도록 도와주는 것을 목적으로 하는 프로젝트입니다.

🔗Github

🔗배포링크 (현재 서비스 중단)

담당

• 다크모드, Toast, Navigation, Modal, Carousel 등의 컴포넌트 구현

• TanstackQuery 활용 채팅 기능 구현

• NextJs App router 활용

포인트

• 프로젝트가 사이드 프로젝트로 진행되면서 백엔드 개발자와의 작업 시간 차이로 API 작업 완료 전 컴포넌트를 개발하게 되어 테스트 시 API 연동이 필요했습니다.

  • 이를 해결하기 위해 MSW 기반의 Mock API를 구현하여 개발시간을 단축했습니다

• 다크모드 기능 개발 중 SSR과 CSR의 다크모드 상태가 일치하지 않는 Hydration 문제를 해결하기 위해 <script>태그를 이용한 방식과 쿠키를 이용한 방식으로 다크모드 상태를 일치시켰습니다

리액트로 앱을 개발하면서 주로 사용하는 UI 들을 다양한 접근 방법으로 개발하면서 장단점을 찾기 위해 기획한 프로젝트입니다.

🔗Github

🔗배포링크

담당

• Accordion, Tooltip, Tab Menu, TextArea, LineClapm, LazyImage, InfinityScroll 등을 구현

포인트

• 각 기능마다 존재하는 다양한 접근 방법을 탐색하고, 실제로 적용해보며 최적의 방법을 경험하며 학습했습니다.

• 해당 기능들을 모듈화하여 사용할 수 있도록 재사용성을 높여 개발했습니다.

• 렌더링을 유발하는 상태 관리 대신 내장 기능을 활용하는 방법을 채택하여 최적화했습니다.

카드로 보는 약초와 잡초, 오픈 API 공공 데이터에서 약초와 잡초 정보를 이용해 온라인 도감을 만들어보았습니다.

🔗Github

🔗배포링크

담당

• 공공 API 요청

• 약초 카드 애니메이션 구현

• 검색어 추천 기능과 검색 기능

포인트

• Modal을 사용하려면 useState와 Modal 컴포넌트를 따로 만들어 사용하는 것에 불편함을 느꼈고, useModal 커스텀 훅을 통해 더 간편하게 Modal을 사용할 수 있도록 했습니다.

• useModal() 호출 하나만으로 Modal을 쉽게 만들 수 있게 됩니다

다양해진 OTT 플랫폼, OTT 플랫폼과 컨텐츠에 대해 얘기를 나눌 수 있는 서비스

🔗Github

🔗배포링크

담당

• 공통 컴포넌트 개발 (Image, Avatar, Button, Carousel, Divider, Badge)

• 회원가입 페이지 개발

• 로그인 페이지 개발

• 게시글 상세 페이지 개발

• 다크모드 구현

포인트

• 회원가입과 로그인에서 사용되는 input과 Validation이 중복되는 것을 느꼈고, 재사용성과 유지보수성 높은 useForn 커스텀 훅과 Formfield 컴포넌트를 만들었습니다

• form 필드 간 의존성을 관리하여, 예를 들어 '비밀번호' 필드가 변경될 때 '비밀번호 확인 필드도 함께 검증하도록 구현했습니다. dependencies를 통해 연관된 필드들이 타이핑 시 동시에 검증됩니다

• 이를 통해 타이핑 할 때 동시에 검증해야 하는 경우를 해결 가능합니다

• 결과적으로 453개의 중복되는 코드를 제거했습니다.

1. VanillaJS, HTML, CSS,  React, Vue 등을 학습하고 2번의 팀 프로젝트를 경험

2. "렌더링 최적화와 렌더링 관계 트리"라는 주제로 발표 경험

3. 함께하는 성장을 위해 학습한 내용을 기술한 기술 아티클 및 회고 글을 14명의 팀 동료에게 공유\

   1. 노션클로닝 회고

   2. useEffect 의존성 배열 경고를 무시하시나요?

4. NextJS app router를 팀 프로젝트에서 사용하며 발견한 버그를 Next에 Issue 제기