react 18 버전 설치

-


Vite로 기본 설치시 리액트 19버전 설치


기본으로 리액트 버전 지정없이 생성하면 리액트 19버전으로 생성됨

# React 18 버전으로 다운그레이드 및 설치
npm install react@18.2.0 react-dom@18.2.0
npm install --save-dev @types/react@18.2.0 @types/react-dom@18.2.0

# 개발에 필요한 의존성 설치


1. UI 컴포넌트 및 디자인 시스템 관련

  • @ariakit/react, @ariakit/react-core: 접근성을 고려하여 디자인된 React UI 컴포넌트 라이브러리입니다.
  • @headlessui/react: Tailwind CSS와 같은 유틸리티 우선 CSS 프레임워크와 잘 작동하는 완벽하게 스타일되지 않은(headless) UI 컴포넌트 라이브러리입니다.
  • @radix-ui/* (예: react-accordion, react-alert-dialog, react-checkbox 등 다수): Radix UI는 높은 접근성, 유연성, 커스터마이징이 가능한 React UI 컴포넌트 라이브러리입니다. 다양한 UI 요소(아코디언, 다이얼로그, 체크박스 등)를 개별 패키지로 제공합니다.
  • class-variance-authority: React 컴포넌트에서 조건부 스타일링을 쉽게 적용할 수 있도록 도와주는 유틸리티 라이브러리입니다. clsx와 함께 사용되는 경우가 많습니다.
  • clsx: 조건부로 클래스 이름을 조합할 때 유용한 작은 유틸리티 라이브러리입니다.
  • input-otp: OTP(One-Time Password) 입력 필드를 구현하기 위한 컴포넌트입니다.
  • lucide-react: 다양한 아이콘을 React 컴포넌트로 사용할 수 있게 해주는 라이브러리입니다.
  • rc-input-number: 숫자 입력 필드를 위한 React 컴포넌트입니다.

2. 상태 관리 및 데이터 페칭

  • @tanstack/react-query: 서버 상태(데이터 페칭, 캐싱, 동기화 등) 관리를 위한 강력한 라이브러리입니다. 비동기 데이터를 다루는 데 최적화되어 있습니다.
  • recoil: Facebook(Meta)에서 개발한 React 상태 관리 라이브러리입니다. 비교적 간단하고 유연한 API를 제공합니다.

3. 애니메이션 및 모션

  • @react-spring/web: 스프링 기반의 물리적인 애니메이션을 구현하는 데 사용되는 라이브러리입니다.
  • framer-motion: 선언적인 문법으로 강력한 프로덕션 레디 애니메이션을 구현할 수 있는 라이브러리입니다.
  • react-flip-toolkit: FLIP(First Last Invert Play) 애니메이션 원리를 사용하여 요소가 이동하거나 변경될 때 부드러운 전환을 제공합니다.
  • react-transition-group: React 컴포넌트의 마운트/언마운트 시점에 애니메이션을 적용하는 데 도움을 주는 라이브러리입니다.

4. 유틸리티 및 일반 라이브러리

  • copy-to-clipboard: 텍스트를 클립보드로 쉽게 복사할 수 있는 유틸리티입니다.
  • cross-env: Node.js 환경에서 플랫폼 간 환경 변수 설정을 일관되게 처리할 수 있도록 도와줍니다.
  • date-fns: 날짜와 시간을 다루는 경량의 자바스크립트 라이브러리입니다.
  • downloadjs: 클라이언트 측에서 파일을 다운로드할 수 있게 해주는 간단한 유틸리티입니다.
  • export-from-json: JavaScript 객체를 JSON 형식으로 내보내는 데 사용됩니다.
  • filenamify: 문자열을 유효한 파일 이름으로 변환하는 유틸리티입니다.
  • html-to-image: HTML 요소를 이미지로 변환하는 데 사용됩니다.
  • lodash: JavaScript 유틸리티 함수들을 모아 놓은 라이브러리로, 배열, 객체, 문자열 등을 다루는 데 유용합니다.
  • match-sorter: 배열에서 문자열 검색 및 정렬을 효율적으로 수행하는 데 사용됩니다.
  • qrcode.react: React 컴포넌트 내에서 QR 코드를 생성하는 라이브러리입니다.
  • regenerator-runtime: ES6의 async/await와 generator 함수를 이전 버전의 JavaScript 환경에서 사용할 수 있도록 지원하는 런타임입니다.
  • sse.js: Server-Sent Events (SSE)를 클라이언트 측에서 쉽게 처리할 수 있도록 도와주는 라이브러리입니다.
  • tailwind-merge: Tailwind CSS 클래스 이름을 병합할 때 충돌하는 클래스를 자동으로 해결해주는 유틸리티입니다.
  • tailwindcss-animate: Tailwind CSS에서 애니메이션 유틸리티 클래스를 제공합니다.
  • tailwindcss-radix: Radix UI 컴포넌트와 Tailwind CSS를 함께 사용할 때 유용한 플러그인입니다.
  • zod: 런타임에서 스키마 유효성 검사를 위한 TypeScript 우선 유효성 검사 라이브러리입니다.

5. React 핵심 및 관련 생태계

  • react: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리의 핵심입니다.
  • react-dom: 웹 애플리케이션에서 React 컴포넌트를 렌더링하는 데 사용됩니다.
  • react-router-dom: React 애플리케이션에서 라우팅을 구현하기 위한 라이브러리입니다.
  • react-hook-form: React에서 폼(form)을 쉽게 관리하고 유효성 검사를 처리할 수 있게 해주는 라이브러리입니다.
  • @tanstack/react-table: 복잡한 테이블 UI를 구축하고 데이터 필터링, 정렬, 페이지네이션 등을 처리하는 데 사용됩니다.

6. 국제화 (i18n)

  • i18next: 웹 애플리케이션의 국제화를 위한 강력한 프레임워크입니다.
  • i18next-browser-languagedetector: 브라우저에서 사용자의 언어 설정을 감지하는 플러그인입니다.
  • react-i18next: i18next를 React 애플리케이션에서 쉽게 사용할 수 있도록 훅과 컴포넌트를 제공합니다.

7. 콘텐츠 렌더링 및 편집

  • @codesandbox/sandpack-react: CodeSandbox의 코드 편집 및 샌드박싱 기능을 React 애플리케이션에 통합할 수 있는 컴포넌트입니다.
  • react-markdown: Markdown 텍스트를 React 컴포넌트로 변환하여 렌더링합니다.
  • rehype-highlight: rehype와 함께 사용하여 코드 블록에 구문 강조(syntax highlighting)를 적용합니다.
  • rehype-katex: rehype와 함께 사용하여 LaTeX 수학 공식을 렌더링합니다.
  • remark-directive: remark 파서에서 커스텀 디렉티브(예: :::note 블록)를 처리할 수 있게 합니다.
  • remark-gfm: GitHub Flavored Markdown (GFM)을 파싱하는 remark 플러그인입니다.
  • remark-math: Markdown에서 수학 블록을 파싱하는 remark 플러그인입니다.
  • remark-supersub: Markdown에서 위첨자(superscript)와 아래첨자(subscript)를 파싱하는 remark 플러그인입니다.
  • react-textarea-autosize: 내용에 따라 높이가 자동으로 조절되는 텍스트 영역 컴포넌트입니다.

8. 기타 특정 기능

  • @dicebear/collection, @dicebear/core: DiceBear는 다양한 아바타를 생성해주는 라이브러리입니다.
  • @marsidev/react-turnstile: Cloudflare Turnstile (캡차 대체 솔루션)을 React 애플리케이션에 통합하는 데 사용됩니다.
  • js-cookie: 브라우저 쿠키를 쉽게 다룰 수 있는 라이브러리입니다.
  • librechat-data-provider: *로 되어 있어 정확한 버전은 알 수 없지만, librechat 프로젝트의 데이터 프로바이더 역할을 하는 것으로 보입니다.
  • react-avatar-editor: 이미지 자르기 및 편집 기능을 제공하는 React 컴포넌트입니다.
  • react-dnd, react-dnd-html5-backend: 드래그 앤 드롭 기능을 구현하는 데 사용되는 라이브러리입니다. react-dnd-html5-backend는 HTML5 Drag and Drop API를 기반으로 합니다.
  • react-gtm-module: Google Tag Manager(GTM)를 React 애플리케이션에 통합하는 데 사용됩니다.
  • react-lazy-load-image-component: 이미지를 지연 로드(lazy load)하여 성능을 최적화하는 데 사용됩니다.
  • react-resizable-panels: 크기 조절이 가능한 패널 레이아웃을 구현하는 데 사용됩니다.
  • react-speech-recognition: 웹 스피치 인식(Web Speech API) 기능을 React 애플리케이션에서 쉽게 사용할 수 있도록 도와줍니다.
  • react-virtualized: 대량의 데이터를 효율적으로 렌더링하기 위해 가상화(virtualization)를 사용하는 컴포넌트입니다. (예: 긴 리스트나 테이블)
/* 의존성 패키지 설치 cmd 창에서 */
폴더를 client 로 이동후 설치
cd client 

## 운영 환경 의존성 패키지설치
npm install ^
@ariakit/react@0.4.15 ^
@ariakit/react-core@0.4.17 ^
@codesandbox/sandpack-react@2.19.10 ^
@dicebear/collection@9.2.2 ^
@dicebear/core@9.2.2 ^
@headlessui/react@2.1.2 ^
@marsidev/react-turnstile@1.1.0 ^
@radix-ui/react-accordion@1.1.2 ^
@radix-ui/react-alert-dialog@1.0.2 ^
@radix-ui/react-checkbox@1.0.3 ^
@radix-ui/react-collapsible@1.0.3 ^
@radix-ui/react-dialog@1.0.2 ^
@radix-ui/react-dropdown-menu@2.1.1 ^
@radix-ui/react-hover-card@1.0.5 ^
@radix-ui/react-icons@1.3.0 ^
@radix-ui/react-label@2.0.0 ^
@radix-ui/react-popover@1.0.7 ^
@radix-ui/react-progress@1.1.2 ^
@radix-ui/react-radio-group@1.1.3 ^
@radix-ui/react-select@2.0.0 ^
@radix-ui/react-separator@1.0.3 ^
@radix-ui/react-slider@1.1.1 ^
@radix-ui/react-switch@1.0.3 ^
@radix-ui/react-tabs@1.0.3 ^
@radix-ui/react-toast@1.1.5 ^
@react-spring/web@9.7.5 ^
@tanstack/react-query@4.28.0 ^
@tanstack/react-table@8.11.7 ^
class-variance-authority@0.6.0 ^
clsx@1.2.1 ^
copy-to-clipboard@3.3.3 ^
cross-env@7.0.3 ^
date-fns@3.3.1 ^
downloadjs@1.4.7 ^
export-from-json@1.7.2 ^
filenamify@6.0.0 ^
framer-motion@11.5.4 ^
html-to-image@1.11.11 ^
i18next@24.2.2 ^
i18next-browser-languagedetector@8.0.3 ^
input-otp@1.4.2 ^
js-cookie@3.0.5 ^
librechat-data-provider@* ^
lodash@4.17.21 ^
lucide-react@0.394.0 ^
match-sorter@6.3.4 ^
qrcode.react@4.2.0 ^
rc-input-number@7.4.2 ^
react@18.2.0 ^
react-avatar-editor@13.0.2 ^
react-dnd@16.0.1 ^
react-dnd-html5-backend@16.0.1 ^
react-dom@18.2.0 ^
react-flip-toolkit@7.1.0 ^
react-gtm-module@2.0.11 ^
react-hook-form@7.43.9 ^
react-i18next@15.4.0 ^
react-lazy-load-image-component@1.6.0 ^
react-markdown@9.0.1 ^
react-resizable-panels@3.0.2 ^
react-router-dom@6.11.2 ^
react-speech-recognition@3.10.0 ^
react-textarea-autosize@8.4.0 ^
react-transition-group@4.4.5 ^
react-virtualized@9.22.6 ^
recoil@0.7.7 ^
regenerator-runtime@0.14.1 ^
rehype-highlight@6.0.0 ^
rehype-katex@6.0.3 ^
remark-directive@3.0.0 ^
remark-gfm@4.0.0 ^
remark-math@6.0.0 ^
remark-supersub@1.0.0 ^
sse.js@2.5.0 ^
tailwind-merge@1.9.1 ^
tailwindcss-animate@1.0.5 ^
tailwindcss-radix@2.8.0 ^
zod@3.22.4

## 개발 및 테스트 환경 의존성 패키지 설치
npm install --save-dev ^
@babel/plugin-transform-runtime@7.22.15 ^
@babel/preset-env@7.22.15 ^
@babel/preset-react@7.22.15 ^
@babel/preset-typescript@7.22.15 ^
@tanstack/react-query-devtools@4.29.0 ^
@testing-library/dom@9.3.0 ^
@testing-library/jest-dom@5.16.5 ^
@testing-library/react@14.0.0 ^
@testing-library/user-event@14.4.3 ^
@types/jest@29.5.14 ^
@types/js-cookie@3.0.6 ^
@types/lodash@4.17.15 ^
@types/node@20.3.0 ^
@types/react@18.2.11 ^
@types/react-dom@18.2.4 ^
@vitejs/plugin-react@4.3.4 ^
autoprefixer@10.4.20 ^
babel-plugin-replace-ts-export-assignment@0.0.2 ^
babel-plugin-root-import@6.6.0 ^
babel-plugin-transform-import-meta@2.3.2 ^
babel-plugin-transform-vite-meta-env@1.0.3 ^
eslint-plugin-jest@28.11.0 ^
identity-obj-proxy@3.0.0 ^
jest@29.7.0 ^
jest-canvas-mock@2.5.2 ^
jest-environment-jsdom@29.7.0 ^
jest-file-loader@1.0.3 ^
jest-junit@16.0.0 ^
postcss@8.4.31 ^
postcss-loader@7.1.0 ^
postcss-preset-env@8.2.0 ^
tailwindcss@3.4.1 ^
ts-jest@29.2.5 ^
typescript@5.3.3 ^
vite@6.3.4 ^
vite-plugin-compression2@1.3.3 ^
vite-plugin-node-polyfills@0.23.0 ^
vite-plugin-pwa@0.21.2





댓글

댓글 쓰기

이 블로그의 인기 게시물

아파치 보안관련 기본설정

-
 🔧 기본 설정 항목들 1. ServerTokens & ServerSignature 설명 : Apache가 클라이언트에게 서버 정보를 얼마나 제공할지 결정함. 보안 권장 설정 : ServerTokens Prod ServerSignature Off Prod : 버전 정보 없이 "Apache"만 반환. Off : 에러 페이지나 디렉토리 목록에 서버 정보 숨김. 2. Timeout 설명 : 클라이언트와의 연결에 대해 Apache가 기다리는 시간. 권장 설정 (성능 및 DoS 방지): Timeout 30 기본값 60초 → 30초로 줄이면 유휴 연결을 빠르게 정리 가능. 3. KeepAlive & MaxKeepAliveRequests 설명 : 하나의 TCP 연결로 여러 요청을 처리할 수 있게 함. 권장 설정 : KeepAlive On MaxKeepAliveRequests 100 KeepAliveTimeout 5 KeepAliveTimeout 은 너무 길면 자원 낭비. 일반적으로 2~5초 권장. 4. 디렉토리 보호 설정 <Directory /var/www/html>     Options -Indexes     AllowOverride None     Require all granted </Directory> -Indexes : 디렉토리 인덱싱 비활성화. -  AllowOverride None : .htaccess 비활성화하여 보안 강화. Apache에서 HttpOnly 쿠키 설정하기 ✅ 방법 1: Apache에서 Set-Cookie 에 HttpOnly 추가하기 <IfModule mod_headers.c> Header edit Set-Cookie ^(.*)$ "$1;HttpOnly;Secure" </IfModule> 🔎 설명: mod_headers 모듈을 사용하여 모든 Set...
자세한 내용 보기

티베로 이관 작업 절차

-
티베로 이관 작업 절차 /* 기존 DB 환경 파악 신규 DB설치시 NLS_CHARACTERSET, DB_BLOCK_SIZE 기존과 동일해야 데이터 import 시 오류없이 import 된다. */ /*1.  터미널에서 기존 db 접속후 환경 파악 */ /* 티베로 db 접속 */ /* tbsql 사용자/패스워드@sid */ tbsql sys/tibero@SID /* DB_BLOCK_SIZE 확인 */ SHOW PARAMETER DB_BLOCK_SIZE SQL> SHOW PARAMETER DB_BLOCK_SIZE NAME                         TYPE     VALUE ---------------------------- -------- ---------------------------------------- DB_BLOCK_SIZE                INT32    8192 /* CHARACTER_SET 확인 */ SQL>  SELECT * FROM SYS._VT_NLS_CHARACTER_SET; CHARACTERSET_NAME NCHAR_CHARACTERSET_NAME ----------------- ----------------------- MSWIN949          UTF16 /*2. 테이블 스페이스 생성 스크립트 실제테이블 스크립트 용량 계산 추출 */ set linesize 1000 set pagesize 50000 set trimspool on spool create_tablespace.sql SELECT 'create tablespace ' || TABLESPACE_NAME || ' datafile ''' || ...
자세한 내용 보기

윈도우 네트워크 리소스 사용권한 오류

-
이미지
윈도우에서 네트워크 공유 오류 처리 이 네트워크 리소스를 사용할 권한이 없는 것 같습니다. 이 서버의 관리자에게 문의하여 액세스 권한이 있는지 확인하십시시오. 이렇게 메세지 뜨고 공유가 안될경우 cmd 콘솔창을 띄워서 기존에 등록되어 있는 연결정보를 다 삭제 하고 다시 접속하면 연결이 된다. 연결된 정보 확인 cmd 창에서  net use C:\Windows\System32>net use 새 연결 정보가 저장됩니다. 상태         로컬      원격                      네트워크 ------------------------------------------------------------------------------- OK                     \\192.168.6.20\IPC$       Microsoft Windows Network 명령을 잘 실행했습니다. 확인후 연결 끊기 net use /delete * 실행후 y를 눌러서 계속하면 현재 연결을 끊어 버립니다. 연결을 끊고 다시 네트워크 접속을 하면 정상적으로 접속이 됩니다. 전체가 아니고 해당 연결만 삭제 하는 방법은 net use /delete \\공유폴더명 위와 같이 하여도 해결이 안 될 경우 자경증명 관리자에서 저장된 자격증명 삭제하기 윈도우 키를 누른후 자격 증명 관리자 실행   자격증명 관리자 메뉴에 들어가서 Windows 자격증명 메뉴를 클릭하여 오류가 나는 아이피를 선택하여 제거 하고 다시 접속합니다.
자세한 내용 보기