해나래

Node.js에서 React, Vue 등의 프로젝트를 빌드 할 때 발생하는 다음 오류에 대한 대응방법을 정리하였습니다. 오류내용 Node.js 버전 17 이상으로 업데이트 한 경우, 프로젝트 빌드 시 다음과 같은 오류가 발생할 수 있습니다. { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } 오류원인 Node.js는 버전 17부터 OpenSSL 3.0을 포함하게 되었습니다. OpenSSL 3.0은 허용하는 알고리즘과 Key 크..

AntDesign에서 Modal을 Draggable로 만들기 위해서는 react-draggable 모듈을 사용하면 간단히 구현이 가능합니다. react-draggable 모듈을 설치합니다. > npm install react-draggable AntDesign의 Modal과 Draggable을 조합하여 모달을 구성합니다. import { Button, Modal } from 'antd'; import React, { useRef, useState } from 'react'; import Draggable from 'react-draggable'; const ModalSample: React.FC = () => { const draggleRef = useRef(null); const [visible, se..

Material-UI는 리액트에서 사용되는 UI 컴포넌트 라이브러리로서 리액트에 Google Material Design을 손쉽게 적용 할 수 있게 도와줍니다. 리액트 개발자로서 수많은 프로젝트에 Material-UI를 사용한 경험이 있기 때문에 Material-UI가 훌륭한 라이브러리라는 것을 잘 알고 있습니다. Material-UI의 수많은 컴포넌트, 그리드 시스템, 일관된 UI를 바탕으로 매우 빠르게 앱을 개발할 수 있습니다. 몇년간 Material-UI를 만족하며 사용해왔지만 개인적인 오픈소스 프로젝트인 Ammo를 개발하면서 심각한 문제를 발견하였습니다. Ammo에 대한 간단한 소개 : Ammo는 HTTP 요청을 캡쳐하여 네트워크 부하 테스트 엔진 스크립트로 변환하는 오픈소스 프로젝트입니다. (G..

Material-UI는 높은 수준의 UI를 빠르고 효율적으로 개발할 수 있는 UI 도구입니다. Material-UI 구글의 Material Design UI 가이드라인을 바탕으로 하며 UI개발에 필요한 수많은 컴포넌트와 디자인 템플릿을 제공합니다. Material-UI 장점 Material Design을 바탕으로 합니다. 안드로이드 시스템에서 검증된 높은 수준의 디자인 퀄리티를 바탕으로 UI개발을 진행 할 수 있습니다. 또한 모바일과 데스크톱을 모두 지원하는 반응형 UI를 빠르게 개발할 수 있습니다. 방대한 컴포넌트를 제공합니다. 필요로 하는 대부분의 컴포넌트를 제공합니다. DatePicker, AutoComplete, Dialog, Tooltip 외 방대한 양의 컴포넌트를 제공합니다. UX PIN과 같..

Visual Studio에서 제공하는 React 프로젝트 템플릿은 ASP.NET Core와 React, create-react-app(CRA) 컨벤션을 사용하는 Client-Side UI 개발을 지원합니다. 이 프로젝트는 ASP.NET Core를 Backend로 사용하며, create-react-app을 통해 생성된 React를 UI로 사용합니다. ASP.NET Core와 React가 하나의 프로젝트로 구성되어 있어 한번에 빌드하고 한번에 배포 할 수 있는 편리함을 제공합니다. 이 React 프로젝트 템플릿은 Server-side rendering(SSR)을 지원하지 않습니다. 이 프로젝트 템플릿은 create-react-app 을 기반으로 구성되어 있습니다. 따라서 create-react-app에서 지..

Package.json NPM에서 패키지를 관리하기 위한 파일 dependencies : 프로젝트에서 항상 사용되는 모듈 devDependencies : 개발환경에서만 사용되는 모듈 scripts : NPM에 내장된 다양한 script를 언제 어떻게 실행할 것인지 설정 browserlist : 지원 브라우저와 Node.js 버전 설정. 이 값은 프로젝트 내에서 공유되며 바벨에서 생성하는 스크립트에 영향을 미침 //package.json { "browserslist": [ "ie 11", //IE11 지원 ">0.2%", //브라우저 점유율 0.2% 이상 지원 "not dead", //지원이 중단된 브라우저 제외 "not ie

증상 npm install로 패키지 설치 시 아래 경고가 출력되는 경우가 있습니다. PM> npm install typesafe-actions npm : npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.1 (node_modules\chokidar\node_modules\fsevents): At line:1 char:1 + npm install typesafe-actions + CategoryInfo : NotSpecified: (npm WARN option...ules\fsevents)::String) [], RemoteException + FullyQualifiedErrorId : NativeCommandError npm WARN notsup..

Redux는 자바스크립트 앱의 State 관리 프레임워크입니다. 리덕스를 사용함으로서 리액트에서 State 변이와 State 전달에 있어 복잡성을 낮추어 주며, 리액트에서 데이터 로직과 비지니스 로직을 손쉽게 분리할 수 있는 방법이기도 합니다. 또한 지루하고 반복적이고 복잡한 앱의 테스트와 디버깅을 쉽게 만들어주며 테스트 코드를 통해 테스트를 자동화할 수 있게 도와줍니다. 리덕스 사용 시 준수해야 할 3원칙 전체 State를 하나의 객체로 관리 State를 하나의 객체로 관리함으로써 State 변화를 쉽게 추적하고 관리 할 수 있게 만들어줍니다. 리액트 프로그램을 특정 State로 손쉽게 재현할 수 있게 되며 테스트나 디버깅에 용이함을 제공합니다. 프로그램의 State 변화를 히스토리 처럼 관리할 수 있..

클래스형 컴포넌트는 함수형 컴포넌트와 Hook이 등장하기 이전에 사용하던 컴포넌트 형태로 ES6(ECMA Script 2015)부터 추가된 JavaScript Class를 바탕으로 컴포넌트를 작성합니다. 함수형 컴포넌트 성능이나 메모리 사용에 있어 약간의 이점이 있음 Hook을 통해 state, lifeCycle을 구현함 클래스형 컴포넌트에 비해 표현이 간결함 클래스형 컴포넌트 ES6(ECMA Script 2015)부터 추가된 Class를 통해 컴포넌트 선언 함수형 컴포넌트와 Hook이 등장하기 전에 폭넓게 사용되었기 때문에, 레거시 코드에서 자주 발견할 수 있는 형태 표현방법이 좀 더 명시적이고, 함수형 컴포넌트 보다 약간 기능이 더 많음 클래스형 컴포넌트 생명주기 - 암기할 필요는 없지만 각 단계를 ..

이 글은 A Simple Explanation of React.useEffect()를 바탕으로 번역된 내용입니다. 잘못된 해석이 있을 수 있으며, 모든 권리는 원저자에게 있으며 원저자의 요청에 따라 언제든지 수정/삭제될 수 있습니다. React hook의 풍부한 표현식은 상당히 인상적입니다. hook을 사용하면 적은 코드를 작성하면서 더 많은 작업을 할 수 있습니다. 하지만 hook의 간결함에는 대가가 있습니다. 상대적으로 사용하기 어렵죠. 함수형 컴포넌트에서 side-effect를 관리하기 위한 useEffect() hook이 특히 사용하기 어렵습니다. 이 포스트에서는 useEffect() hook은 언제 어떻게 사용해야하는지 안내해드립니다. 1. useEffect()는 Side-effect를 위한 함..