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를 사용..

통합검색 성능 개선 이후로 진행한 성능개선 작업 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..

서론회사 내 TDD를 적용하려 리액트 테스트 라이브러리인 Jest와 RTL(React Testing Library)을 설치하려 하니??현재 쓰는 Node 버전이 낮아서 설치가 안된다는 문구가ㅠ.... 알아보니 현재 내가 사용하는 Node 버전은 16.7.0Jest를 설치하기 위한 최소 Node 버전은 16.10.0 이라 설치가 안된다는 문구;; 그래서 운영서버와 개발서버 노드를 확인 해보니운영 node : 16.14.0개발 node : 16.13.0로컬 node : 16.7.0 왜 셋 다 다른건지ㅠㅠㅠ심지어 로컬 환경 세팅 가이드는 16.7.0으로 세팅되게 되어 있었네요... TDD 도입하려다 노드 버전까지 바꾸게 되는 작업까지 했네요ㅠ...서론은 여기까지 하고 이번 포스팅의 내용은 노드 버전 업데이트 ..

리액트 성능 개선 후기 안녕하세요? 준입니다. 그간 현생이 너무 바빠 글을 많이 올리지 못 했는데요. 어쩌다 보니 리액트 성능 개선을 한 후기와 제가 고민했던 부분을 적어보려 합니다. 결론부터 말씀드리자면 통합검색 로직 개선을 통해 약 50% 성능 향상이 있었습니다. 먼저 보안 때문에 코드와 많은 사진을 못 보여드리는 점 양해부탁드립니다. 1. 개선 통합검색 페이지는 3가지 섹션으로 구성되어 있습니다. 1. 전계열사 임직원 정보(소속, 담당업무 등), 2. 전자결재, 3. 게시판으로 이루어져 있습니다. 에러 픽스 요청으로 게시판과 전자결재에서 '더보기' 버튼 클릭 시 동일한 컨텐츠가 중복 노출되는 문제를 발견하게 되었고, 이를 수정하면서 통합검색 로직이 비효율적으로 동작하는 것을 확인했습니다. 통합검색 ..