728x90 반응형 Frontend53 webpack 4 -> 5 마이그레이션 webpack 4 -> 5 마이그레이션Webpack 5에는 최소한 Node.js 10.13.0(LTS)이 필요하므로 아직 이전 Node.js를 실행하고 있다면 Node.js를 업그레이드하세요.1. mode의 기본값 설정 변경production, development 2. 오래된 옵션 업데이트optimization 옵션명과 항목 값 변경optimization.hashedModuleIds: true→optimization.moduleIds: 'hashed'optimization.namedChunks: true→optimization.chunkIds: 'named'optimization.namedModules: true→optimization.moduleIds: 'named'optimization.noEmit.. 2025. 12. 23. JavaScript로 웹뷰 키보드 스크롤 문제 해결하기 개요모바일 환경(WebView)에서 웹을 사용할 때, 웹과는 다른 방식으로 UI가 동작하면서 의도치 않은 문제가 발생하는 경우가 많습니다.이번 글에서는 모바일 키보드 등장으로 인한 스크롤 문제의 원인과 실질적인 해결책을 간단히 정리합니다. 스크롤 밀림, 화면 가려짐 현상모바일 환경에서는 키보드, 주소창(UI chrome), 안전영역(safe-area) 등으로 시스템이 자동으로 화면을 밀어 올리기는 경우가 있습니다.예를 들어, 모바일 키보드 등장시 뷰포트는 키보드 변화에 따라 동적으로 재조정이 필요합니다.다양한 뷰포트 변화에 UI가 즉시 대응(재배치)하지 못하는 경우 다음과 같은 현상이 발생할 수 있습니다.input 포커스 시 화면이 위로 밀려 기존 시야가 사라짐키보드가 입력창을 덮어버림 왜 이런 문제가.. 2025. 11. 21. Webpack 번들 성능 확인 가이드 개요웹 애플리케이션이 커질수록 번들 크기, 로딩 속도, 중복 모듈 문제는 성능에 직접적인 영향을 미칩니다. 이번 포스팅에서는 Webpack 번들 성능을 확인하고 분석하는 방법을 단계별로 정리합니다. 성능 체크리스트초기 페이지에 필요한 JS만 로드되는가?청크가 브라우저 캐싱으로 재사용 가능한가?최초 렌더링 성능(FCP/LCP)이 좋아졌는가? 1. Webpack 통계 JSON 생성Webpack은 빌드 시 모듈별 통계가 포함된 JSON 파일을 생성하게 해주는 Stats Data 기능을 지원합니다.이 JSON 파일에는 번들 구조, 모듈별 크기, 청크 구성, 빌드 시간 등의 정보가 포함됩니다.$ npx webpack --config webpack/webpack.config.prod.js --profile --js.. 2025. 11. 14. Webpack 빌드 속도 최적화, 단일 번들 최적화 방법 | noParse 개요noParse 옵션을 활용해 jQuery, Lodash, React 등 대형 라이브러리의 빌드 시간을 줄이고 효율적으로 관리하는 방법을 알아봅니다. Webpack의 JS 파일 처리 흐름웹팩(Webpack)은 JavaScript 파일을 처리할 때 기본적으로 다음 세 단계를 거칩니다.파싱(Parsing)import, require, export, 동적 import() 같은 구문을 읽어 의존성 그래프를 만듭니다.로더(Loader) 변환설정된 로더를 적용해 코드 변환을 수행합니다.(예: TypeScript → JS, SCSS → CSS)번들(Bundle) 생성최종적으로 여러 모듈을 하나 또는 여러 청크로 합쳐 번들링합니다.빌드 시간을 최적화하려면 각 단계의 처리 범위를 줄이거나 건너뛰는 것이 효과적입니다... 2025. 11. 14. [React] recompose로 함수형 컴포넌트 이하기 개요recompose 는 하이어오더 컴포넌트(= 고차 컴포넌트: Higher-Order Components) - React) 로직을 재 사용하기 위한 컴포넌트를 개발하는 패턴을 모은 라이브러리이다.react^16.8 버전 이상부터는 react-hook에 recompose 기능이 구현되어 있어, 모듈을 import하여 사용하지 않게 되었다.import { branch , withState} from 'recompose' //비효율적import branch from 'recompose' //효율적 그러나 recompose 활용 방법을 이해하면, 함수형 컴포넌트 개발을 이해하는데 도움을 준다. recompose 장단점장점고차 컴포넌트를 쉽게 개발할 수 있다.컴포넌트 로직을 분리하여 재사용이 가능하게 만들고,.. 2025. 4. 17. 브라우저 JavaScript 렌더링 엔진, V8 개요V8엔진 특징과 Javascript가 어떻게 해석되고 실행되는지 알면 JavaScript 엔진의 작동 방식을 더 깊이 이해하면 코드의 성능 특성을 추론하는 데 도움된다!V8 엔진이 무엇인지, 왜 그리고 어떻게 동작 하는지 알아보자. 렌더링 엔진이란?JavaScript 엔진을 내장한 브라우저의 표시 기능을 담당하는 모듈Blink, Gecko, WebKit렌더링 엔진은 자바스크립트뿐만 아니라 HTML과 CSS를 해석하고 화면 드로잉을 종합적으로 수행 Javascript 엔진이란?자바스크립트는 동적 타입의 인터프리터 언어이며 자바스크립트에서 실행되는 모든 것들은 엔진에 의해 처리된다.엔진은 주변 환경과 상호작용하면서 컴퓨터가 프로그램을 실행하는 데 필요한 machine code(바이트코드)를 변환/생성 역.. 2025. 4. 17. [ERROR] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Error Component St 오류 내용Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Error Component Stack 경고: 언마운트된 컴포넌트에서 React 상태 업데이트를 수행할 수 없습니다. 이는 아무런 작업을 하지 않지만, 애플리케이션에 메모리 누수가 발생했음을 나타냅니다. 이를 해결하려면, useEffect의 cleanup 함수에서 모든 구독과 비동기 작업을 취.. 2025. 4. 11. 2025년 React 라이브러리 생태계 정리 | Full-Stack React Tech Stack 개요리액트는 2012년에 배포된 이후, 2025년 현재 가장 인기 있는 UI 개발 라이브러리로 자리 잡았다.10년 이상 오랜 기간 동안 사용되면서 React만의 라이브러리 생태계가 형성되었다.이번 포스팅에서는 2025년 대규모 애플리케이션 개발에 필수적인 리액트 라이브러리를 알아보고자 한다. React 라이브러리React 프로젝트 시작하기Vite : React 프로젝트를 설정하는 가장 인기 있는 도구. 빠른 빌드 속도와 간편한 TypeScript 지원 제공Next.js :React 기반 메타 프레임워크로 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원파일 기반 라우팅, API 라우트, 캐싱, React Server Components(RSC) 등 다양한 기능 제공서버 컴포넌트 및 서버 함수.. 2025. 3. 17. React 파일 업로드, 드래그 앤 드랍, 미리보기 기능 구현하기 file 요소란?file 유형의 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/file#accept 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다." data-og-title=" - HTML: Hypertext Markup Language | MDN" data-og-type="website" data-ke-align="al.. 2025. 2. 28. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
