Projects

React 19에서 useTransition이 async 함수를 지원하면서, 로딩 상태 관리가 어떻게 달라졌는지 React 18과 비교해 정리했습니다.

Next.js의 unstable_cache는 정적 캐싱을 위해 설계되어 있어서, 세션 조회처럼 요청마다 달라지는 동작은 포함할 수 없다는 제약이 있습니다. 실제로 이 제약에 부딪히며, 공통 데이터는 캐싱하고 사용자별 데이터는 외부에서 처리하는 방식으로 구조를 나누는 방법을 직접 적용해 보았습니다.

Next.js App Router에서 쿼리스트링을 통한 상태 변경 시 UI가 멈춘 듯 보이는 이유와 Suspense의 미동작 원인에 대해 분석했습니다.

마스킷 프로젝트에서 이미지의 입력방식을 다방면으로 확장하기 위해서 구글드라이브와, 드롭박스를 통해 업로드할 수 있게 구현 중에 구글 드라이브 피커 사용 시 문제를 겪게 되어서 정리해 보았습니다.

모든 이모지를 이미지로 제공하기 어려워 기본 이모지 폰트를 사용하려 했지만, macOS에서는 SVG 형식이 아닌 이모지가 사용되어 호환 이슈가 발생했습니다. 이를 해결하기 위해 Noto Color Emoji 웹폰트를 적용했습니다.

PR이 제출되거나 main 브랜치에 머지될 때마다, 자동으로 Storybook 프리뷰 링크가 생성되도록 GitHub Actions를 설정하였습니다.

Next.js middleware로 인증이 필요한 페이지는 세션이 없을 경우 로그인 페이지로 리다이렉트되며, API 요청은 catch-all 라우트를 통해 서버에서 토큰을 자동으로 포함해 백엔드로 전달되도록 구성했습니다.

소셜 로그인 후 프론트엔드에서 받은 인가코드를 백엔드로 전달하기 위해, NextAuth의 Custom Credentials Provider를 활용해 인증 플로우를 커스터마이징했습니다.

감정 데이터를 시각화하는 차트를 구현하고, 프로젝트 전반에서 재사용 가능한 공용 컴포넌트를 개발했습니다.

각 도메인별로 service, types, queries 파일을 구조화하여 API 호출 로직과 타입, 쿼리를 모듈화하고 재사용성과 유지보수성을 높였습니다.

NextAuth에서 HTTPOnly 쿠키로 저장된 accessToken을 Postman에서 효율적으로 활용하기 위한 방법을 정리했습니다.

Oauth 로그인후 전달받은 인가코드를 백앤드API로 전송하여, 유저정보를 가져오는 상황에서 Nextauth의 Credentials Provider로 효율적으로 accessToken과 Session을 관리하는 방법을 정리했습니다.

API로부터 받아온 데이터를 활용하여, 서버에서 직접 Opengraph image를 생성하여 제공하는 과정중에 겪은 문제점을 정리했습니다.

코드잇 스프린트 마지막 프로젝트를 마무리후 회고를 작성했습니다.

Lottie와 Motion 라이브러리를 활용해 스크롤에 반응하는 인터랙티브한 애니메이션을 구현했습니다.

여러 화면에서 공통으로 사용되는 UI를 효율적으로 관리하기 위해 공용 컴포넌트를 만들었고, 다양한 상황에서도 잘 작동하도록 props와 스타일을 유연하게 설계하는 데 신경 썼습니다.

자주 사용되는 모달을 더 효율적으로 관리하기 위해, 명령형 제어 방식을 도입하고 useImperativeHandle로 ref를 통해 모달을 열고 닫을 수 있게 구현했습니다.

페이지 렌더링 시 발생하는 prefetch로 인해 middleware를 거치지 않고 페이지가 전환되는 문제를 겪었고, 이를 해결하며 클라이언트 사이드 라우트 캐시를 어떻게 제어할 수 있는지에 대해 정리했습니다.

API의 한계로 태그 색상과 기본 아바타 배경색을 저장할 수 없어, 매번 달라 보이지 않도록 일정한 규칙 기반의 색상 매칭 로직을 구현해 일관성을 유지했습니다.

코드잇 스프린트 중급 프로젝트를 마무리후 회고를 작성했습니다.