해나래

VisualStudio 2026에서 생성한 React 프로젝트에 Shadcn-UI를 추가하는 방법에 대해 정리합니다.TailwindCSS 설치Tailwindcss 홈페이지에서 설치 가이드에 따라 설치합니다. VisualStudio에서 생성한 React 프로젝트는 Vite를 사용합니다. 따라서 설치가이드에서 Vite를 사용하는 부분을 찾아 진행해야 합니다.tailwindcss와 @tailwincss/vite 설치npm install tailwindcss @tailwindcss/vitevite.config.ts 파일 열고 Tailwindcss 설정 추가import tailwindcss from '@tailwindcss/vite';export default defineConfig({ ... plugins:..

VisualStudio 2026에서 React 프로젝트를 생성하고 빌드할 수 있습니다. 여기선 VisualStudio가 생성한 React 프로젝트의 구조에 대해 설명합니다.Server 프로젝트ASP.NET Core 프로젝트로 아래와 같이 생성됩니다.Properties / launchSettings.json : 개발 환경에서 프로젝트 실행 방법을 설정하는 파일입니다.{ "$schema": "https://json.schemastore.org/launchsettings.json", "profiles": { "https": { "commandName": "Project", "dotnetRunMessages": true, "lau..

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 변화를 히스토리 처럼 관리할 수 있..