728x90 Frontend36 [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. 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. JavaScript 모듈 시스템 | CJS, AMD, UMD, ESM 모듈화 방식CommonJS : exports 키워드로 모듈을 생성, require() 함수로 임포트하는 방식장점 : 모든 파일을 로컬에 저장하고 동기적으로 동작하여 전역변수와 지역변수를 분리할 수 있게 되었다.단점 : 필요한 모듈을 가져오는데 대기하게 됨.AMD(Asynchronous Module Definition): CommonJS를 비동기적으로 사용할 수있는 도구ESM : import, 와 export 로 임포트하는 방식(ES6가 도입 이후)장점 : 키워드 만으로 모듈화 가능단점 : 모듈별로 을 네트워크 통신을 통해 가져오면서 비용과 시간 소요 https://beomy.github.io/tech/javascript/cjs-amd-umd-esm/#%ED%8A%B9%EC%A7%95-%EB%B9%84%.. 2025. 2. 13. JavaScript window 객체: 주요 속성, 메서드, 이벤트 알아보기 개요window 객체는 JavaScript에서 전역 객체(global object)로, 브라우저 환경에서 제공하는 다양한 기능과 속성을 제공합니다. 브라우저의 전체 창(window)에 대한 정보를 제공하며, 전역 범위에서 접근 가능합니다. Node.js에서는 window 객체 대신 global 객체를 사용합니다. window 객체는 웹 개발에서 핵심적인 역할을 하며, DOM, 브라우저 상태, 이벤트 관리 등 다양한 작업에 사용됩니다. 다만, 전역 네임스페이스를 오염시킬 수 있으므로 과도한 사용은 피하는 것이 좋습니다. window 객체의 대표적인 속성1. document현재 로드된 HTML 문서를 나타내는 객체.DOM 트리 조작 및 HTML 요소 접근 가능.2. location현재 페이지의 URL .. 2024. 11. 22. [ERROR] react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 오류 메시지react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 원인value로 받는 타입과 리턴으로 받는 타입이 일치하지 않아서 발생하는 메시지이다.정해진 타입으로 받을 수 있도록 코드를 수정해야 한다.해당 코드const value: string;onChange: (_e: React.ChangeEvent) => void;const handleChange = () => { if (maxLength) { if (value.length > maxLen.. 2024. 9. 19. Bun 소개 / JavaScript 런타임 비교 Incredibly fast JavaScript runtime, bundler, test runner, and package manager -- all in one(믿을 수 없을 정도로 빠른 JavaScript 런타임, Bundler, Test Runner 및 Package Manager - 모두 하나로) 개요최근에 Bun 이라는 도구를 발견했다. 알고보니 이미 2023년 인기 오픈소스로 선정 된 Bun !웹 서버 성능이 매우 우수하다는 평가를 들었고, 번들링과 테스팅 기능도 함께 갖추고 있다고 해서 호기심이 생겨 공식 홈페이지를 찾아보고 동작 방식을 간단히 이해를 기반으로 Bun 포스팅을 작성하고자 한다. ** 오픈 소스 트랜드는 어디서 알 수 있는가! https://risingstars.js.or.. 2024. 5. 31. React 컴포넌트 디자인 패턴 개요2013년 React 출시 이후 2024년까지 다양한 컴포넌트 유형이 등장했다.일부 기술은 더 이상 사용되지 않는(deprecated) 상태가 되었는데, 이는 성능 향상 및 유지 보수성을 위한 React의 발전 과정에서 발생한 변화을 알아볼 수 있다.최근에는 컴포넌트 아키텍처와 디자인 패턴은 Server Components, Server Functions, Server Actions 등을 통해 풀스택 애플리케이션 개발을 혁신되고 있다. 컴포넌트 유형별 디자인 패턴 발전리액트 createClass - deprecated자바스크립트 클래스를 사용하지 않고도, 리액트 클래스 컴포넌트를 생성할 수 있는 팩토리 함수이다.ES5에는 클래스 문법이 없었기에 2015년 ES6가 도입되기 전까지 리액트 표준 컴포넌트.. 2024. 5. 22. 이전 1 2 3 4 다음 728x90
