front-end/React
-
React Tailwind 세팅front-end/React 2024. 4. 2. 15:49
1. 테일원드 모듈 설치 npm install -D tailwindcss postcss autoprefixer 2. 설정파일 생성하기 npx tailwindcss init -p 3. 설정 파일 내용 변경 (tailwind.config.js) /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], }; 4. index.css 테일윈드 적용 @tailwind base; @tailwind components; @tailwind utilities;
-
React GPT API 사용해서 챗봇 만들기front-end/React 2024. 4. 1. 10:36
1. GPT api 발급 받은 키 .env에 저장하기 REACT_APP_OPENAI_API_KEY ='발급받은키' 2. chatbot.jsx 파일에 엔드포인트 및 api key 입력하기 const apiKey = process.env.REACT_APP_OPENAI_API_KEY; const apiEndpoint = 'https://api.openai.com/v1/chat/completions'; 3. 사용할 변수 입력하기 const [messages, setMessages] = useState([]); const [userInput, setUserInput] = useState(''); const [loading, setLoading] = useState(false); 4. 메세지 추가 함수 const ..
-
검색 지연을 위한 Devouncefront-end/React 2024. 3. 12. 10:53
1. 검색 지연의 필요성 만약 검색창을 만들어서 리스트를 보여주는 기능이 존재하는 경우 타이핑 할때마다 요청을 보내게 되므로 성능에 안좋은 영향이 생김 2. Debounce debounce 는 function을 제어 설정된 시간 동안 타이핑을 멈출때까지 keyup 이벤트를 지연 지연된 시간을 통해 UI 코드에서 이벤트를 처리할 필요가 없어지고, 불필요한 API 호출도 감소가 됩니다. useDebounce(디바운싱적용할입력값, 디바운싱지연시간);
-
Chakra UI React을 위한 UI 라이브러리front-end/React 2024. 2. 27. 10:58
1. chakra UI란 Chakra UI는 React 애플리케이션의 UI를 구축하는 데 도움이 되는 UI 라이브러리 빠르고 일관된 UI를 쉽게 개발이 가능 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion 2. chakra UI 장점 컴포넌트 기반 디자인 컴포넌트 기반 디자인을 채택하여 개발자가 재사용 가능한 UI 요소를 쉽게 사용이 가능하며, 코드의 가독성을 향상시키고 유지 보수가 쉽습니다. 스타일링과 테마 지원 스타일링을 위한 다양한 유틸리티와 테마를 제공을 합니다. 접근성 기본적으로 WAI-ARIA 속성을 제공, 키보드 탐색 및 스크린 리더와의 호환성이 좋습니다. 3. chakra UI 단점 초기 로딩 시간 다양한 기능과 컴포..
-
중첩 라우팅 쉽게 이용하기(주소값 변경)front-end/React 2024. 2. 14. 12:34
1. App 코드 내용 import { Route, Routes } from 'react-router-dom'; 하기! App에 아래와 같은 코드를 작성을 합니다 2. Page01 코드 내용 import { Link, Outlet } from "react-router-dom"; import { Link, Outlet } from "react-router-dom"; const Page01 = () => { return ( (헤더가 있다고 생각) 2번으로 이동 3번으로 이동 ); } export default Page01; 3. 참고 영상
-
npm xlsx vulnerabilities(취약점) 해결 방법front-end/React 2024. 2. 7. 15:22
- npm xlsx vulnerabilities(취약점) 발생 아래와 같은 vulnerabilities(취약점)에러가 발생을 합니다. xlsx * Severity: high Compiled successfully! 해결방법 참고 사이트 : https://github.com/SheetJS/sheetjs/issues/2822 npm i https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz
-
React HTTP GET, POST, PATCH, DELETE 사용법front-end/React 2024. 2. 6. 17:44
1. GET 방식 데이터 요청시 사용 매개변수를 url로 전달(보안, 캐싱 등 문제 발생) 데이터 검색 및 조회시 활 fetch(`{백엔드 주소값}?{매개변수 혹은 KEY}=${ 매개변수에 전달할 값}& ... `, { method: 'GET', headers: { 'Content-Type': 'application/json' }, // body가 없다 // 생략 2. POST 방식 데이터 전송 용량이 get 대비 많은 데이터 전송 get 대비 url에 정보가 노출되지 않아 보안에 이점 데이터 변경시 사 fetch({백엔드 주소값}, { method: 'POST' headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ 매개변수 혹..
-
npx create-react-app 에러front-end/React 2024. 1. 5. 17:16
1. create-react-app 에러 npx create-react-app my-app npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\-주소값- npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\-주소값-' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent 2. create-react-app 제거 후 재설치 npm uninstall -g create-react-app npm install -g create-react-app 3. create-..