해당 포스팅은 Next.js 기반의 프로젝트에서 마크다운 콘텐츠 렌더링을 위한 라이브러리를react-markdown에서 next-mdx-remote/rsc로 마이그레이션 한 과정과 그 결과를 공유한 내용입니다. 길고 복잡한 마크다운 콘텐츠 처리를 클라이언트 대신 서버에서 수행함으로써클라이언트 번들 크기를 줄이고, RSC의 이점을 활용하여 초기 로딩 성능과전반적인 UX를 개선한 과정을 설명하고자 합니다.1️⃣ 마이그레이션을 결심한 이유 React Server Components(RSC)와 tanstack-query의 조합으로 서버 컴포넌트를 사용하기 전,클라이언트 컴포넌트에서 마크다운 콘텐츠가 포함된 페이지를 구성해보고 있었습니다. 당시 서버로부터 문자열(string) 형태로 전달받은 markdown 데이..

1️⃣ openapi generator를 사용하려는 이유서버 측에서 소통 없이 API 수정을 진행하면 프론트엔드에서는 문제 발생 이전까진 변경점을 파악할 수 없다는 점과프론트엔드 팀에서 협업하며 서버 response에 대한 각각의 type 설정으로 인한 사이드 이펙트가 존재했습니다. 프론트엔드에서 각자 타입을 설정해 사용하던 것을 서버 response의 타입이라고 착각해 벌어진 상황도 벌어졌는데요.이와 비슷한 상황이 꽤나 잦았기에 대책을 찾던 중, openapi generator를 알게 되었습니다. ➡️ openapi generator 적용 전 알고 가면 좋을 것들더보기일단 openapi generator를 사용하려면 java가 로컬 환경에 설치되어있어야 합니다.Java 설치를 완료한다면 프로젝트에서 o..

tanstack query의 PrefetchBoundary를 프로젝트에 적용하며 prefetch의 동작 원리가 궁금해져소심하게나마 다이브 해봤습니다. 프로젝트 구성 환경Next.js 14(app router), React 18, TypeScript, Tanstack-Query 5, mantine.css, module.css클라이언트에서의 네트워크 요청은 TTFB 개선이 어려웠다.클라이언트 컴포넌트에서만 query fetch해도 되잖아?라고 물을 수도 있겠지만클라이언트에서의 네트워크 요청에 따른 페이지 로드 시간 감소를 이번 프로젝트의 팀 목표로 설정했거든요.목표를 충족시키기 위해선 prefetch로 진행하는 방법이 필요했습니다.기본 fetch 대신 TanStack Query를 활용한 prefetch를 사..

본 글에 앞서, 해당 포스팅은 개인의 유령의존성 경험을 토대로 yarn classic에서pnpm을 사용하게 된 계기를 설명합니다. 패키지 매니저에 대한 딥다이브가 아닙니다.1️⃣ yarn classic이 쏘아올린 작은(사실 겁나 큰) 공, 유령의존성저는 이전 회사도, 현재 회사도 yarn classic으로 프로젝트를운영하고 있었고, 다른 패키지 매니저 경험은 없었습니다. 현실에 안주해 있는 동안 yarn berry, pnpm이라는 새로운 패키지 매니저들이 등장했지만좋다는 말만 듣고 프로젝트에 적용은 하지 않고 있었는데요. 어느 날, 프로젝트를 진행하며제가 설치하지 않은 의존성이 어디선가 추가되어 하나둘씩 발생하기 시작한 문제로 인해 반강제로패키지 매니저에 대한 관심을 가지게 되었습니다.react-slic..

24년 11월 중순 정도, 프로그래머스에서 진행한 특강을 잠깐 참여했을 때스피커가 설명하던 개념이 preflight request였습니다. 당시 스피커는 “여러분은 CORS가 왜 발생하는지 아세요?”라는 질문에 이어“브라우저가 서로 다른 도메인에 리소스 요청을 어떻게 파악하는지 아세요?”라고 말했고preflight를 언급한 2-3명의 인원을 제외하고선 약 150명 정도의 인원이 참여했던 채팅방은도서관이 되어버렸습니다.(무려 3년 차까지 참여한 방이었는데 말이죠.) 저도 preflight에 대해 개념은 설명이 가능했지만 preflight를 사용했을 때의 장점이나CORS를 제외한 preflight로 요청되는 경우는 몰랐기에 필요시 참고하려고 포스팅했습니다.Preflight Request의 특징1) 프론트엔드..

Next.js 기반의 프로젝트를 진행 중, 동료가 모든 이미지에 대해Image 컴포넌트를 사용하는 것을 peer riview 도중 파악했습니다. 동료분에게 리뷰로 짧게 설명하기보단 문서화를 통해서Next.js 환경에서는 꼭 Image 컴포넌트만 사용해야 할까?라는 것을말씀드리고 싶었고, 당시 전하고자 하는 내용을 블로그에도 포스팅해보았습니다.🤷🏻‍♂️ 둘의 사용 시점은 서로 다릅니다.HTML 태그를 사용하는 경우:매우 작은 크기의 아이콘이나 데코레이션용 이미지 (10x10 px 같은 경우)정적이고 변경되지 않는 작은 이미지성능 최적화가 크게 중요하지 않은 경우외부 이미지나 SVG 아이콘로딩 시간이나 레이아웃 시프트가 중요하지 않은 상황Next.js Image 컴포넌트를 사용하는 경우:다양한 디바이스..

최근에 경험한 인터뷰 당시 받았던 질문 중 하나인 Proxy Server에 대해포스팅을 하던 중, CORS까지 묶어서 정리하는 것이 좋겠다는 생각이 들었습니다. 기존에 CORS에 대한 개념과 처리 방법에 대해서만 알고 있었지,정작 왜 CORS를 처리하기 위한 방법으로Proxy Server를 사용하는지에 대한 이유를 모르고 있었습니다. 특히, CORS 상황을 제외한 프록시 서버를 사용하는 이유에 대해서는한 번도 생각해보지 않았는데 이번 기회를 통해 파악할 수 있게 되었는데요. 먼저 CORS의 동작과 CORS 문제 해결 방법에 대해 정리 후Proxy Server에 대한 이야기를 해볼까 합니다.1️⃣ CORS의 동작 원리출처 정의 - 브라우저 요청 처리 - Preflight 요청 - 서버 응답 - 브라우저 요..

인터뷰 당시 땀을 삐질삐질 흘리게 만들었던 질문들이 있었습니다.그중 하나였던 주제가 singleton pattern이었는데요. 기본적인 개념은 이미 숙지하고 있었지만 추가 학습하지 않았던 것이 스노우볼이 되었고인터뷰에서 부족함을 들키며 총난타를 당했기 때문에 제대로 학습해보고 싶어졌습니다.(싱글톤 패턴을 적용해 전역에서 사용하는 값이 있다고 말했을 때이어진 후속 질문에 대한 내용입니다.)어째서 싱글톤 패턴을 적용한 인스턴스는 전역에서 접근할 수 있을까?(저는 클래스가 아닌, 함수와 변수로 패턴을 적용했습니다.) 싱글톤 인스턴스를 저장하는 변수를 싱글톤 패턴을 구현한 함수 외부에 선언해전역 스코프에 존재하는 상태로 만든다면 해당 변수는 싱글톤 패턴을 구현한 함수가 호출되는모든 컨텍스트에서 접근 가능하기 때..