[개인 프로젝트] GameCord

GameCord

개요

• 기간: 2023.09 ~ 진행중
• 개발자: 1인
• Github: [Github 링크]
• 배포: [배포링크]

기술 스택

• Frontend: NextJs v14, Tailwindcss(shadcn-ui), React-Query, Clerk
• Backend: PostgreSQL(prisma), Redis(upstash)
• Additional Libraries: uploadthing, Zustand, Pusher

프로젝트 설명

GameCord는 게임에 대한 평가와 리뷰를 공유하며, 모더들을 위한 커뮤니티 기능까지 갖춘 플랫폼입니다.

주요 성과 및 기능

1. 성능 최적화
2. NextJs v14의 서버 컴포넌트를 활용하여 초기 로딩시 JS 번들 크기를 최소화하고, 병렬적인 데이터 fetch를 통해 로딩 속도 향상 및 유저 경험 향상을 이룸
3. UI/UX 디자인
4. Discord와 유사한 사용자 경험을 제공하기 위해 Tailwind(Shadcn-ui)로 디자인 구현
5. 실시간 채팅
6. Pusher와 React-Query를 결합하여 실시간 채팅 기능 구현
7. 인증
8. Clerk 라이브러리를 통해 간단하게 인증 프로세스를 구축하면서도 안전성 확보
9. 응답 시간 최적화
10. Redis(upstash) 활용하여 주요 데이터 캐싱, 애플리케이션 응답 시간 개선

피드백 및 성과:

• 사용자들로부터 UI/UX 디자인에 대한 긍정적인 피드백 수집.
• 서비스 최적화를 통해 페이지 로드 시간을 전보다 30% 단축.

문제해결

1. 로딩 최적화
   • 문제상세: 첫 페이지를 담당하는 해당 컴포넌트에서 비동기적으로 데이터를 가져오고 있으며, 각각의 함수가 완료될 때까지 await를 사용하여 대기하고 있습니다. 이는 첫 페이지 로드 시에 모든 데이터가 가져와질 때까지 사용자가 기다려야 한다는 것을 의미합니다.
   • 서버 컴포넌트를 사용하고있지만, 서버 컴포넌트의 장점은 사용하지 못하고있던 상황이였습니다.
   • 해결

     const MainLayout = async ({ children }: { children: React.ReactNode }) => {
       return (
         <main className="relative bg-light-850 dark:bg-dark-100">
           <Suspense>
             <LayoutWrapper isNav />
           </Suspense>
           <div className="flex">
             <Suspense
               fallback={
                 <section className="background-light900_dark200 light-border custom-scrollbar sticky left-0 top-0 h-screen flex-col justify-between overflow-y-auto border-r p-6 pt-36 shadow-light-300 dark:shadow-none max-sm:hidden lg:w-[266px]"></section>
               }
             >
               <LayoutWrapper isNav={false} />
             </Suspense>
             <section className="flex min-h-screen flex-1 flex-col px-6 pb-6 pt-36 max-md:pb-14 sm:px-14">
               <div className="mx-auto w-full max-w-5xl">{children}</div>
             </section>
             <RightSidebar />
           </div>
         </main>
       );
     };
     
     const LayoutWrapper = async ({ isNav }: { isNav: boolean }) => {
       const profile = await getCurrentUser();
       const games = await getGames();
       const servers = await getServers();
     
       return isNav ? (
         <MainNavbar profileId={profile?.id} servers={servers} games={games} />
       ) : (
         <LeftSidebar profileId={profile?.id} games={games} servers={servers} />
       );
     };
     

   • Suspense와 Streaming의 장점을 활용하였습니다.

 

연관 글

https://joseph0926.tistory.com/92

[NextJs] NextJs 로딩 최적화 하기 (스트리밍, Suspense, Static 렌더링)

https://joseph0926.tistory.com/91

[문제-해결] Suspense, Streaming 활용하기