본문 바로가기

What would life be If we had no courage to attemp anything?

Development64

[Next.js] 성능 최적화 - 번들 사이즈를 줄이는 배럴 파일 관리 전략 프론트엔드 프로젝트의 규모가 커지면 우리는 자연스럽게 '깔끔한 코드'를 고민하게 됩니다. 그 과정에서 수십 개의 컴포넌트를 한곳에 모아 내보내는 배럴 파일(Barrel File) 패턴을 흔히 사용하곤 하죠. 하지만 이 편리함 뒤에는 번들 사이즈와 성능을 갉아먹는 치명적인 함정이 숨어 있습니다.오늘은 배럴 파일이 왜 성능의 적이 되는지, 그리고 이미 커져버린 프로젝트에서 Next.js의 optimizePackageImports를 통해 어떻게 우아하게 탈출할 수 있는지 알아보겠습니다. 1. 배럴 파일(Barrel File)이란?배럴 파일은 여러 모듈을 하나의 index.ts 파일로 모아서 다시 내보내는(Re-export) 방식입니다.// components/index.ts (배럴 파일)export { d.. 2026. 2. 13.

[next.js] 빌드 최적화 - 프로덕션 번들에서 개발 전용 코드 제외하기 프로젝트 규모가 커질수록 Next.js 프로덕션 빌드 시간이 점점 늘어나는 문제를 체감하게 됐다.“코드가 늘면 빌드가 느려지는 건 당연한 거 아닌가?” 싶지만,자세히 보면 프로덕션에서 사용하지 않는 코드까지 빌드 파이프라인이 처리하면서 시간을 잡아먹는 구간들이 있다. 이번 글은 그중 하나였던 React Query / Jotai DevTools를 _app에 정적 import로 넣어둔 구조를 개선해서,빌드 시간을 줄인 과정을 정리한 것이다. 1. 문제: DevTools를 그냥 넣으면?개발 편의를 위해 @tanstack/react-query-devtools, jotai-devtools를 쓰는 경우,보통은 상단에서 정적 import 한 뒤 _app 안에서 컴포넌트로 렌더링하게 된다.import { ReactQu.. 2026. 2. 4.

[Next.js] 성능 최적화 - 번들 사이즈 개선 (feat. bundle-analyzer) 어느 날 문득 우리 서비스의 초기 로딩이 느리다는 것을 깨달았다. Bundle Analyzer를 돌려보니... _app.js가 4.2MB였다. 어떻게 이 문제를 해결했는지 공유해보려고 한다. 준비: Bundle Analyzer 설치번들 크기를 분석하려면 먼저 @next/bundle-analyzer를 설치해야 한다.yarn add -D @next/bundle-analyzernext.config.js에 설정을 추가한다:const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true',});module.exports = withBundleAnalyzer({ // 기존 설정...});편의를 위.. 2026. 2. 3.

[Next.js] tailwind CSS 로컬 폰트 적용 (feat. Type '{ children: Element[]; className: string; }' is not assignable to type) next.js + tailwind CSS프로젝트에서 글씨체를 적용 하는 방법해당 게시글은 다음 기술 스택을 기반으로 합니다.- next.js v15 pages-router- react v19- typescript- tailwindCSS- shadcnUI프로젝트에서 사용하는 pretendard를 예시로 작성합니다. Optimizing: Fonts | Next.jsOptimize your application's web fonts with the built-in `next/font` loaders.nextjs.org Pretendard 파일을 다운로드 합니다.https://cactus.tistory.com/306해당 프로젝트에서는 폰트 경량화를 위해 .woff2 확장자 파일을 다운로드 했습니다.다음 경로에.. 2025. 3. 14.

[Next.js] node.js 메모리 사용량 확인과 heap 메모리 제한 적용하기 node.js 메모리 사용량 확인과 heap 메모리 제한 적용하기현재 메모리 사용량을 확인하기 위해서는 next.js에서 server를 커스텀 하여 로그를 통해 확인할 수 있다.메모리 사용량을 알아내는 방법은 GPT의 도움을 받아 process.memoryUsage()를 통해 알 수 있다는 것을 확인했다. 1. process.memoryUsage의 중요 요소Node.js(Next.js) 애플리케이션 모니터링을 위한 메모리 인사이트 / if(kakaoAI)2024해당 컨퍼런스 내용이 내가 고민하고 있는 개념적인 부분을 다뤄주고 있었다. 1-1. 코드 적용// server.jsconst { createServer } = require('http');const { parse } = require('url');.. 2024. 12. 23.

[Next.js] Next.js의 기본 메모리 관리 구조 - node.js v8 Next.js의 기본 메모리 관리 구조Next.js는 Node.js 기반의 V8 엔진에서 실행된다.JavaScript는 싱글 스레드 언어이다. 따라서 V8 역시 자바스크립트의 Context 당 하나의 프로세스를 사용한다. 단, 서비스 워커를 사용하는 경우는 워커의 개수만큼 프로세스를 증식한다고 한다.실행중인 프로그램은 V8 프로세스에서 할당된 일정량의 메모리로 표현되는데, 이를 Resident set이라고 한다. 내부 구조는 아래 사진과 같다.사진에서 볼 수 있듯이 크게 힙 메모리와 스택 메모리로 관리 되는 것을 확인할 수 있다.1️⃣ 스택 메모리스택은 메모리 영역이고 V8마다 하나의 스택을 가진다. 스택에는 정적데이터(메서드와 함수 프레임, 원시 값, 객체 포인터)가 저장된다.V8의 스택 영역의 관리는.. 2024. 12. 22.

[Next.js] SWC 옵션을 활용하여 빌드 시간 단축하기 SWC를 활용하여 빌드 시간 단축하기 사내에서는 CI/CD 도구로 깃헙 액션을 사용하고 있다.백엔드와 다르게 프론트는 액션이 완료되는데 까지 전체적인 시간이 좀 더 소요되는 것을 확인할 수 있다. 현재 내가 개발하고 있는 프론트 환경에서 CI/CD 과정 중 가장 소요 시간이 긴 스탭은 빌드 후 도커 이미지를 만들어 ECR로 옮기는 시점이다. 그 중 CI 과정 중에서 프론트 프로젝트 빌드 시간과 ECR PUSH 타임이 대부분을 차지함을 확인 할 수 있다. ❓그렇다면,프론트 프로젝트 빌드 시간을 어떻게 줄일 수 있을까? Next.js 빌드 시간을 단축 하는 방법SWC 코드 압축 활성화: swcMinify: true를 설정해 빌드 시 SWC를 통해 코드를 압축하여 최적화.Webpack 캐싱 사용: W.. 2024. 11. 1.

[API] graphql-request | GraphQLClient, request graphql-request GraphQL을 사용하여 서버와 통신하는 데 사용되는 간단한 JavaScript 라이브러리 GraphQL API를 호출하기 위해 사용 ✅ 필요한 것 headers - token, Content-Type query variables endpoint ⇒API URI GraphQLClient GraphQL 서버에 HTTP 요청을 보내고 응답을 받기 위해 사용 . GraphQLClient를 사용하여 GraphQL API 엔드포인트에 HTTP 요청을 보낼수 있음 이 클래스는 여러 가지 메서드를 제공. 가장 일반적인 메서드는 request메서드 request request메서드는 GraphQL 쿼리를 실행하고, 서버로부터 결과를 받는 데 사용 GraphQL API 엔드포인트 URL과 G.. 2023. 6. 29.

[Electron] electron앱 화면이 랜더링이 되지 않는 문제 문제점 2023.06.17 - [Development/Electron] - [Electron] SyntaxError: Cannot use import statement outside a module 위의 오류를 해결 후 electron앱을 실행했을 때, electron 앱은 켜지지만 화면이 랜더링 되지 않는 상태가 발생. 해결과정 Failed to compile. Module not found: Error: Can't resolve './App' in 'D:\\2023\\march\\realPractice\\login\\src' Did you mean 'App.js'? BREAKING CHANGE: The request './App' failed to resolve only because it was r.. 2023. 6. 18.

[Electron] SyntaxError: Cannot use import statement outside a module 오류 다음과 같은 오류들이 뜨면서(경고창) electron 앱이 실행되지 않음. (node:29788) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use `electron --trace-warnings ...` to show where the warning was created) App threw an error during load D:\\2023\\march\\realPractice\\login\\public\\electron.js:1 import * as operator from './script/operator.js' ^^^^^^ SyntaxError: Canno.. 2023. 6. 17.

이전 1 2 3 4 ··· 7 다음

티스토리툴바