ILB

$\\color{#eeeeec}\\rule{210px}{2px}$

육아용품 구독 사이트

🔗 배포 사이트

🔗 발표 자료

🔗 리드미 주소

Next.js React TypeScript TailwindCss Framer-motion Shadcn/ui

주요 기능

• 회원가입 및 일반 로그인
• 결제 API 연동
• 상품 리스트 페이지
• next-auth 소셜 로그인

담당 역할

• 스크럼 마스터 및 프로젝트 세팅
• 전체적인 사용자 flow 구성
• 상품정보 리스트 렌더링
• 전체적인 아이디어 및 기획

<aside> 💡 성과 및 배운 점

</aside>

• 성과 : 이번 Next.js 프로젝트를 통해 NextAuth를 활용한 소셜 로그인 기능을 성공적으로 구현했습니다. 이를 통해 사용자 인증 과정을 간편하게 처리할 수 있었고, 보안성을 높이는 데 기여했습니다.
• 배운 점 : Next.js가 처음이었기 때문에 폴더 구조를 학습하며 프로젝트를 진행했습니다. 이 과정에서 모듈화와 컴포넌트 재사용의 중요성을 깊이 이해하게 되었습니다.
• Server Actions 경험 : Server Actions를 처음 사용해보며 클라이언트와 서버 간의 데이터 처리 방식을 경험했습니다. 이를 통해 데이터 전송의 효율성과 성능을 개선할 수 있었습니다.
• 향후 개발 : 이번 프로젝트는 Next.js의 강력한 기능을 활용하여 사용자 경험을 향상시키고, 최신 웹 개발 기술에 대한 이해를 높이는 데 큰 도움이 되었습니다. 이러한 경험은 앞으로의 개발에 있어 귀중한 자산이 될 것입니다.

<aside> ⚠️ 문제와 해결

</aside>

1. 문제 상황: box-sizing : border-box적용 실패

   • 처음에 피그마 시안대로 버튼 크기를 10으로 설정하고 패딩을 45씩 주어 전체 크기를 100으로 맞추려 했으나, border를 포함한 102가 되었습니다. 이는 내부 컨텐츠에 width 값을 주지 않아 발생한 문제였습니다. 이를 해결하기 위해 내부 컨텐츠에 width를 설정하여 border-box가 제대로 적용되도록 했습니다.

2. 문제 상황 : next-auth v5에서 useSession을 가져왔을 때, session에 있는 값을 못 가져오는 오류가 발생했다.

   • 해결 방안 : version4로 다운그레이드를 하거나, session을 사용하는 컴포넌트에서 세션의 상태에 분기를 주어 확실하게 session값을 들고 올 수 있도록 설정했습니다.

3. 문제 상황 : .next캐시로 인한 데이터 오류

   Next.js 프로젝트를 진행하면서 데이터값이 변경되었음에도 한 팀원의 화면에서는 여전히 이전 데이터가 불러와 지는 문제가 발생했습니다. 처음에는 로직에 문제가 있다고 판단했으나, 코드에는 이상이 없었습니다. 조사 결과, .next 폴더에서 데이터를 캐싱하고 있어 이 때문에 오류가 발생한 것을 알게 되었습니다.

   이를 해결하기 위해 다음과 같은 조치를 취했습니다:

   1. 캐시 삭제: .next 폴더를 삭제하여 캐시된 데이터를 제거했습니다.
   2. 빌드 재실행: 프로젝트를 다시 빌드하여 최신 데이터를 반영했습니다.
   3. 캐싱 전략 검토: 데이터 캐싱 전략을 검토하고, 필요에 따라 캐싱을 비활성화하거나 적절한 캐싱 정책을 설정했습니다.
   • 결과 : 이 과정을 통해 데이터가 올바르게 반영되도록 하였고, 팀원 모두가 최신 데이터를 확인할 수 있게 되었습니다. 이번 경험을 통해 캐싱 메커니즘의 중요성을 다시 한 번 깨닫게 되었고, 앞으로 유사한 문제가 발생하지 않도록 주의할 것입니다.

<aside> 🛠 프로젝트에 대한 경험

</aside>

1. 역할을 따로 나누지 않고 업무를 진행했었는데, 물론 역할을 따로 나눠서 진행하는 방식보다는 매우 작업 속도가 더뎠지만, 서로의 코드를 이해하고 프로젝트 흐름을 파악하는데 있어 좋은 경험이였습니다.

2. UI 라이브러리를 처음 사용해보았는데, 우수한 생산성이 동반되는 동시에, 커스텀하기 어렵다는 단점도 있었습니다. 하지만 제공하는 테마나 컬러가 프로젝트에 적합하다면 좋은 UI 라이브러리를 선택하고 적용하는 데 많은 도움을 준다고 느꼈습니다.

3. 프로젝트를 계속 오프라인으로 진행하였는데, 확실히 오프라인 만남을 가지려고 따로 기회적 비용을 투자하였지만, 그만큼 회의도 잦게 가질 수 있었고, 소통 또한 원활하게 진행되어 좋은 경험이였습니다.