Juun의 개발 기록

2025년 5월, 운영 중인 Next.js 서비스에서 사용자 프로필 이미지가 간헐적으로 다른 유저의 이미지로 표시되는 현상이 발생했습니다.주요 증상은 다음과 같았습니다.현상 요약동일한 이미지 요청임에도 불구하고 다른 이미지가 표시됨브라우저 개발자 도구에서 _next/image?... 경로의 이미지 응답이 서버마다 다름특정 환경에서 304 Not Modified 응답이 의도와 다르게 작동원인 분석문제는 최근 GCP 로드밸런서의 정책 변경과 Next.js 이미지 최적화 캐시 처리 방식이 충돌하면서 발생했습니다.1. GCP 로드밸런서 정책 변경 (2025.04.28 적용)Google Cloud는 2025년 4월 28일부터 다음과 같은 정책을 적용했습니다:HTTP/1.1 트래픽에서 hop-by-hop 헤더를 참..

https://puenti.tistory.com/100 [Next.js] next/dynamic 1. 사용법과 빌드 과정회사 내 서비스가 커지다보니 빌드 시간과 초기 JS 파일의 크기가 커지는 문제가 있었습니다.이는 곧 성능과 속도에 문제가 생길 수 있어 next/dynamic을 적용시켜 개선해보았습니다. next/dynamic은 Nepuenti.tistory.com 이전 글과 이어지는 내용입니다.이전 글에서는 기본적이고 원론적인 사용법과 빌드 과정에 대해서 포스팅을 했는데요.이번 글은 실무에서 적용시키면서 생긴 의문과 적절하게 적용시키는 방법에 대해 포스팅해보겠습니다. next/dynamic은 동적 로드를 지원합니다.근데 만약 해당 컴포넌트가 한 개가 아니라 여러 개일 경우 어떻게 적용시키면 좋을까에서..

회사 내 서비스가 커지다보니 빌드 시간과 초기 JS 파일의 크기가 커지는 문제가 있었습니다.이는 곧 성능과 속도에 문제가 생길 수 있어 next/dynamic을 적용시켜 개선해보았습니다. next/dynamic은 Next.js에서 동적 임포트를 지원하는 기능으로, 컴포넌트를 필요한 시점에 로드하도록 설정할 수 있습니다.특정 컴포넌트에 next/dynamic을 적용하면 해당 컴포넌트는 초기 번들에 포함되지 않고 클라이언트에서 필요할 때 로드됩니다. next/dynamic을 사용하는 방법은 다음과 같습니다:import dynamic from 'next/dynamic';const DynamicComponent = dynamic(() => import('./DynamicComponent'));function P..

유유자적 깃헙을 돌아다니며 뛰어난 사람들의 코드를 보며 좌절하던 도중 우연히 우테코 깃헙을 발견했습니다.네카라쿠배라 불릴 정도로 개발자라면 한 번쯤은 다니고 싶어하는 배민의 부트캠프인 우테코에서는 어떤식으로 디렉토리 구조를 설계하고 코드는 어떻게 짜는지 궁금해서 살펴보았습니다. 배민의 웹서비스는 리액트와 자바로 구성되어 있다고 알고 있습니다.그래서 그런지 우테코에서도 자바, 리액트로 프로젝트로 되어 있는 것을 확인했습니다. 저는 프론트엔드 주니어 개발자라 프론트엔드 위주로 살펴보았습니다. 1. packge.json해당 부분에서 눈 여겨본 부분은 3가지 입니다. 1. Next.js의 부재리액트 공식문서에서 조차 Next.js 사용을 권장하고 있습니다.근데 우테코의 프로젝트들을 살펴보면 Next.js를 사용..

이전 글과 이어지는 내용입니다.이전 글 내용이 궁금하신 분은 아래의 링크를 참고해주시면 됩니다. https://puenti.tistory.com/97 [GCP] GCP로 node 배포하기 1. (네트워크, DNS 세팅)이번 토이 프로젝트로 구글에서 제공하는 API, storage를 사용해서 간단한 서비스를 만들어 봤습니다.구글에서 제공하는 서비스를 쓰다보니 배포 역시 AWS 보단 GCP를 사용해보기로 했습니다.번외로puenti.tistory.com 저번 포스팅에서 DNS 설정까지 했습니다.이번에는 HTTPS 인증을 받기 위한 SSL 인증을 해보겠습니다.HTTPS란 무엇인가?HTTPS는 인터넷에서 데이터를 안전하게 주고받기 위해 사용하는 프로토콜입니다. HTTP에 SSL/TLS를 추가해 보안을 강화한 것입..

이번 토이 프로젝트로 구글에서 제공하는 API, storage를 사용해서 간단한 서비스를 만들어 봤습니다.구글에서 제공하는 서비스를 쓰다보니 배포 역시 AWS 보단 GCP를 사용해보기로 했습니다.번외로 회사에서 GCP를 사용해서 겸사겸사 해보면 좋을거 같다는 생각도 했습니다. 1. GCP 접속GCP > Compute Engine > VM 인스턴스 > 인스턴스 만들기  2. 인스턴스 만들기본인의 사양에 맞게 머신 구성저는 제일 저렴한 지역과 머신으로 선택했습니다.액세스 할 서비스 계정을 설정하고 방화벽은 HTTP/ HTTPS 트래픽 허용  3. 프로젝트 세팅 (Git & Node)SSH 연결을 통해 인스턴스를 실행해봅시다.GCP는 기본적으로 git이 설치되어 있지만 확인해보기$ git --version//..

통합검색 성능 개선 이후로 진행한 성능개선 작업 2편입니다.1편인 통합검색 성능 개선이 궁금하신 분은 아래 링크 참고해주세요.https://puenti.tistory.com/89 메인페이지 관련 개발 중 해당 로그를 발견했습니다.이 메시지는 Next.js 애플리케이션에서 Largest Contentful Paint (LCP)를 최적화하기 위해 이미지를 우선적으로 로드해야 한다는 경고입니다. LCP는 사용자가 페이지를 로드할 때 가장 큰 콘텐츠 요소가 화면에 나타나는 시간을 측정하는 웹 성능 지표이며 이는 사용자 경험을 개선하는 데 중요하다고 볼 수 있습니다. 로그를 확인해보니 메인 페이지에 배너와 사용자 사진 등이 들어가는데 이 부분에서 LCP가 발생하는 것으로 파악했습니다.LCP (Largest Con..

프론트엔드 개발에서 debounce와 throttle는 성능 최적화와 사용자 경험 향상을 위해 자주 사용되는 기술입니다.제가 담당하고 있는 서비스에서도 많이 쓰이진 않지만 debounce는 종종 보이곤 합니다. 처음 debounce를 마주했을 때 이걸 왜 쓰는지에 대해 알아봤는데 debounce와 함께 나오는 개념이 throttle과 함께 정리해봤습니다.DebounceDebounce는 특정 이벤트가 여러 번 발생할 때, 지정된 시간 동안 이벤트가 발생하지 않을 때까지 대기했다가 한 번만 실행되도록 하는 기술입니다. 이를 통해 연속된 이벤트 호출을 줄여 불필요한 처리를 방지합니다. 예를 들어, 사용자가 검색창에 글자를 입력할 때마다 검색 요청을 서버에 보내면 서버에 과부하가 걸릴 수 있습니다. 이 때 de..

개요getStaticProps를 이용하려는 생각은 회사에서 서비스 중인 그룹웨어 메인 페이지를 부분을 개발하면서 시작하게 됩니다.메인페이지에 접속하게 되면 google api, 전자결재, 조직도, 게시판, 개인정보 등등 수 많은 API를 요청 보내고 있습니다.여기서 가장 주목했던건 엄청난 양의 데이터가 담긴 조직도 데이터였습니다.조직도는 그룹웨어 내에 가장 많이 쓰이는 시스템 중 하나로 개선을 한다면 눈에 뛰는 효과가 분명하다고 생각헀습니다. 또한 조직도 같은 경우는 자주 변경되지도 않는 데이터인데 사용자가 로그인 할 때마다 데이터를 호출할 필요가 있을까? 라는 생각을 가지게 되었습니다.물론 서버상태관리 라이브러리인 SWR 덕에 사용자가 최초 메인페이지에 접속했을 경우에만 1번 호출하지만 새로고침을 하거..

이번 2024년 5월 15일부터 16일까지 개최한 행사인 React Conf 2024에서 발표된 내용을 기반으로 작성되었습니다. 리액트 컴파일러란?리액트 19에 도입될 리액트 컴파일러는 공식 문서의 일부분에는 이렇게 설명되어 있습니다.React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as useMemo, useCallback, and React.memo. With these APIs you can tell React that certain parts of your application don’t need to recompute if their inputs ha..