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.

[Redux] Redux 기초 - 생활코딩 action을 통해 action을 dispatch에 전달하고 reducer가 state값을 갱신하고 dispatch가 subscribe하고있는 함수들을 호출해 state값을 참조하여 UI를 바꿔줌 state type State = any 저장소(store)에 의해 관리됨 getState()에 의해 반환되는 하나의 상태값 action type Action = Object 어떤 작업을 할지 설명해주는 자바스크립트 순수 객체 store에 데이터를 넣는 유일한 방법 UI 이벤트에서 왔든, 네트워크 콜백에서 왔든, 웹소켓과 같은 다른 소스에서 왔든 모든 데이터는 액션으로써 보내짐 reducer type Reducer = (state: S, action: A) => S 누적값과 값을 받아 새로운 누적값을 반환하는 .. 2023. 6. 16.

[Node.js] Node.js Modules | childProcess, spawn, stdout, stderr, fs, path, yargs, properties-reader, Buffer Node.js modules 🗨️ ChildProcess ✅ ChildProcess 개념 Node.js 프로세스 내에서 다른 프로세스를 실행하고 그와 상호 작용하는 기능을 제공하는 모듈 Node.js에서 표준 라이브러리로 제공 exec(), spawn(),fork() 등의 함수를 제공 exec() 함수는 셸 명령어를 실행하고 해당 결과를 버퍼링 spawn() 새로운 프로세스를 만들고 그 프로세스와의 표준 입출력 스트림을 제공 fork() spawn() 함수와 유사하지만, 부모 프로세스와 자식 프로세스 간에 통신할 수 있는 IPC 채널을 자동으로 설정 ChildProcess 모듈을 사용하면 Node.js 프로세스 내에서 다른 프로그램을 실행하고 그 결과를 받아올 수 있음 Node.js 어플리케이션에서 외부.. 2023. 6. 16.

[Electron] ipcRenderer.invoke & ipcMin.handle IpcRenderer.invoke 💡 Electron에서 주로 사용되는 메서드 중 하나. ipcRenderer 객체는 렌더러 프로세스에서 사용되며, 주로 메인 프로세스와의 비동기적인 통신을 위해 사용. ipcRenderer.invoke는 메인 프로세스에 비동기적인 요청을 보내고 결과를 받기 위해 사용. 이 메서드는 Promise를 반환하며, 메인 프로세스에서 처리되고 완료된 후에 Promise 결과가 렌더러 프로세스에 전달. ipcRenderer.invoke 를 사용할 때는 메인 프로세스에서 해당 요청을 처리할 때 ipcMain.handle을 사용하여 요청을 처리하고 결과를 반환 예제 // 렌더러 프로세스에서의 예제 코드 const { ipcRenderer } = require('electron'); a.. 2023. 6. 15.

[Electron] dialog.showOpenDialog() dialog.showOpenDialogSync() 💡 Electron 프레임워크에서 제공되는 메서드 사용자에게 파일 선택 대화 상자를 표시하고 파일을 선택할 수 있음 주로 메인 프로세스에서 사용 사용 예시 const { dialog } = require('electron'); // 파일 선택 대화 상자 옵션 설정 const options = { title: 'Open File', // 대화 상자 제목 defaultPath: '/path/to/default', // 기본 경로 buttonLabel: 'Open', // 확인 버튼 레이블 filters: [ { name: 'Text Files', extensions: ['txt'] }, // 파일 필터 { name: 'All Files', extensions.. 2023. 6. 15.

[API] GraphQL 관련 dependency | Apollo Client, graphql-request graphQL 관련 의존성 추가 1. Apollo Client Introduction to Apollo Client Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI. Apollo Client helps www.apollographql.com Hooks 없이 Apollo Client 사용하기 yarn: yarn add apollo-boost.. 2023. 6. 15.

바벨(Babel) 바벨(Babel) 💡 바벨(Babel)은 트랜스파일러(transpiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줍니다. 브라우저가 ES6나 ES7(최신표준) 브라우저가 이해하지 못하기때문에 ES5로 바꿔주는 과정이 필요 이 과정을 해주는 자바스크립트 컴파일러가 바벨 babel을 사용한다고 해서 모든 최신 자바스크립트 함수를 다 사용할 수 있는 것은 아님 브라우저에서 지원하지 않는 함수를 검사하는 작업이 프로그램 시작에 진행되어야함 이 역할은 babel-polyfill이 담당 바벨의 주요 역할 트렌스 파일러 바벨은 코드를 재작성해주는 트랜스파일러 프로그램 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경 변경된 코드는 웹사이트 형태로 사용자에게 전달 웹팩(webpack)과 .. 2023. 6. 15.

웹팩(Webpack) webpack 💡 자바스크립트는 모듈을 지원하지 않았지만 (ES5), 자바스크립트에 새로운 표준인 ECMAScript6(ES6)가 생기면서 모듈을 지원. CommonJS보다 문법이 더 간결해짐 구조가 static하게 분석 가능하고 최적화도 됨. CommonJS보다 순환 의존성 지원이 잘됨 그러나 브라우저는 여전히 파일 단위 모듈을 잘 모름. ES6는 일부 브라우저에서만 지원. 따라서 여러 버전의 각기 다른 브라우저는 이런 모듈화를 지원하지 않는 경우도 있음. 하나의 소스로 모든 브라우저에서 보여주는게 웹의 특장점 모듈을 하나의 파일로 묶어 네트워크 비용을 최소화 할 수 있어야함 이 과정이 바로 bundling 웹펙의 4가지 개념 엔트리 // webpack.config.js module.exports = .. 2023. 6. 15.

npm ERR! Cannot read properties of null (reading 'edgesOut') Styled-Components 설치시 오류 문제 상황 styled-components 설치 방법 - 공식Docs npm install styled-components react 프로젝트에 styled-components를 설치하기 위해 공식 문서에 언급된 설치 명령어를 입력했는데 다음과 같은 오류가 나왔다. npm ERR! Cannot read properties of null (reading 'edgesOut') 문제 원인 latest version of styled-components is v6 but there is some issue while doing npm i styled-components styled-components version6 이후로 다음 명령어시 문제가 발생. 문제 해결 //.. 2023. 5. 14.

[React] font 적용 방법 1. 필요한 폰트 다운로드 Pretendard 나의 경우 font 최적화를 위해 woff2 format을 선택함 2. React 프로젝트에 폰트 복사 3. 폰트 적용 @font-face { font-family: "PretendardVariable"; src: local("PretendardVariable"),url("/src/assets/fonts/PretendardVariable.woff2") format("woff2"); } Reference React 폰트 변경 방법 2023. 1. 28.

[axios] axios 2 axios? 브라우저를 위한 Promise 기반의 클라이언트 원래는 “XHR”이라는 브라우저 내장 객체를 활용해 AJAX 요청을 처리하는데, 이보다 편리한 AJAX 요청이 가능하도록 도움을 줌 확장 가능한 인터페이스와 함께 패키지로 사용이 간편한 라이브러리를 제공 설치 # npm 사용하기: $ npm install axios # yarn 사용하기: $ yarn add axios 사용 axios.get('') //Promise return .then(..) .catch(..) //Axios 사용하기 const URL = '>' async function test(){ const response = await axios.get(URL) const data = response.data console.log(d.. 2023. 1. 27.

[Electron] electron 아이콘 넣기 //디렉토리에 아이콘 파일을 넣은 뒤 설정 //electron.js - 메인프로세서 파일 const {app, BrowserWindow,ipcMain} = require('electron') const path = require('path') // const fs = require("fs"); function createWindow () { const mainWindow = new BrowserWindow({ width: 528, height: 791, resizable:false, //size 고정 useContentSize :true, //가운데 설정 center:true, //앱 실행시 윈도우를 화면 정중앙에 위치 **icon:path.join(__dirname,'[로고 path]'), //일렉트론.. 2023. 1. 25.

[React] console.log(useRef) useRef함수는 current속성을 가지고 있는 객체를 반환 인자로 넘어온 초기값을 current속성에 할당 이 current 속성은 값을 변경해도 상태를 변경할 때처럼 React 컴포넌트가 다시 랜더링 안됨 React 컴포넌트가 다시 랜더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않음 Reference React Hooks: useRef 사용법 Hooks API Reference - React 2023. 1. 25.

[React] ref, useRef ref? JS를 사용할 때에는 특정 DOM을 선택해야하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택 리액트를 사용하는 프로젝트에서 DOM을 직접 선택해야 하는 상황이 생기면 ref를 활용 함수형 컴포넌트에서 **ref**를 사용 할 때에는 **useRef** 라는 Hook 함수 사용 클래스 컴포넌트에서는 콜백 함수를 사용하거나 **React.createRef 라는 함수 사용** 포커스를 잡으려면 nameInput.current.focus() 형태로 작성 const nameInput = useReft(); const onClick = () => { nameInput.current.focus(); } return( 클릭 ) use.. 2023. 1. 24.

[React] port 번호 변경하기 방법1. 명령어로 실행 (1회성) PORT=[숫자] npm run start 방법2. package.json 수정 window ... "scripts": { "start": "set PORT=3002 && react-scripts start", } ... 방법3. 프로젝트명/node_modules/react-scripts/scripts/start.js 수정하기 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3002;// 수정 const HOST = process.env.HOST || '0.0.0.0'; 방법4. .env 파일 생성하고 port 설정하기 프로젝트명/.env PORT=3002 명령어로 실행 npm run start Reference [#. .. 2023. 1. 23.

[axios] axios 1 axios란? 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 특징 브라우저를 위해 XMLHttpRequests 생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이드 지원 설치 npm install axios 사용 예시 // POST 요청 전송 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); // node.js에서 GET 요청으로 원격 이미지 가져오기 axios({ method: 'ge.. 2023. 1. 21.

[npm].npmrc npmrc 파일이란? 💡 npm에서 설정을 저장해두는 파일 내장(builtin), 전역(global), 사용자(user), 프로젝트(project) 4가지 범위의 npmrc 파일이 존재 내장 설정 npm이 설치된 경로에 있는 npmrc 파일에 명시됨 모든 기본 설정을 담고 있음 전역 설정 같은 컴퓨터를 사용하는 다른 사용자와 모든 프로젝트에 광범위하게 적용 일반적으로 잘 건들지 않음 보통, 사용자 범위와 프로젝트 범위에서 npmrc 파일을 다룸 ⇒파일 명 앞에 . 을 붙여 숨긴 파일로 사용 사용자 범위 운영 체제의 사용자 홈(home) 디렉토리에 위치 프로젝트 범위 프로젝트 최상위(root) 디렉토리에 위치 프로젝트 범위가 사용자 범위보다 좁음 ⇒ 프로젝트 설정이 사용자 설정보다 우선시 npm confi.. 2023. 1. 19.

[React] React Hook API Hook 개요 Hook은 class를 작성하지 않고도 state와 다른 React의 다른 기능들을 사용할 수 있게 해줌 Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줌 기본 Hook useState useEffect useContext 추가 Hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue useDeferredValue useTransition useId library hooks useSyncExternalStore useInsertionEffect 📌State Hook 여러 state 변수 선언하기 하나의 컴포넌트 내에서 state hook을 여러개 사용할 수 .. 2023. 1. 18.

[React] React Life Cycle ; 리액트 생명주기 React란? javascript 라이브러리 React 파일들의 역할 index.js src 폴더에 포함 메인 프로그램 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하고 렌더링해 실제 표시 App.js src 폴더에 포함 컴포넌트를 정의하는 프로그램 실제로 화면에 표시되는 내용등이 정의 index.html public 폴더에 있음 메인 프로그램인 index.js에 대응되는 것 HTML 템플릿 파일 직접 표시되는 것은 아니고, index.js에 의해 일어나 렌더링 결과가 표시됨 React Life Cycle React lifecycle 용어 용어 설명 ~ will 어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어 ~ did 어떤 작업을 수행한 이후에 실행되는 메서드와 관련된 용어 moun.. 2023. 1. 14.

[Electron] Electron + React 연동하기 1. React에 electron 적용하기 https://2ssue.github.io/programming/electron-react/ #create-react-app후 electron 집어넣기 npm init npm install create-react-app --save npx create-react-app {project_name} cd {project_name} npm install electron --save-dev 디렉토리 구조 {project_name} ├── public # 정적 파일. react를 사용하기 때문에 특별히 변경할 내용은 없다. ├── src # javascript 파일. react routing, electron로딩 등의 작업을 진행. │ ├── App.js │ ├── in.. 2023. 1. 13.

[Electron]Electron-forge Publishing a GitHub release Electorn-Forge electron forge는 publisher 플러그인 Github access token 생성하기 electorn forge는 github permission 없이 어떤 repository에도 publish 할 수 없음 Forge의 github releases 허가를 위해 authenticated token이 필요함 가장 쉬운 방법은 public_repo와 함께 PAT를 생성해 public repo에 접근해 쓸 수 있게 함 발급 받은 비밀로 유지되어야만 함! forge에서 github publisher 세팅하기 먼저 forge의 github publisher 설치 npm install --save-dev @electron-fo.. 2023. 1. 12.

이전 1 2 3 다음

𝘭𝘶𝘮𝘪𝘯𝘰𝘶𝘴

Development64

티스토리툴바

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31