front-end
-
Vue 반복문 v-forfront-end/Vue 2024. 4. 2. 12:56
1. 반복에 사용할 데이터 만들기 data() { return { menu_list: ['맛있는 붕어빵', '국물이 맛있는 오뎅', '매운맛 떡볶이'], price: [6000, 2000, 10000] } } 2. v-for 반복문 사용하기 내용 사용 예시 1) {{ menu_list[i] }} {{ price[i] }} 원 사용예시 2) {{ list }} {{ price[i] }} 원 3. 최종 코드 {{ list }} {{ price[i] }} 원
-
Vue 환경세팅 하기front-end/Vue 2024. 4. 2. 10:31
1. Node.js 설치하기 https://nodejs.org/en Node.js — Run JavaScript Everywhere Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VS code 설치하기 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free..
-
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 단점 초기 로딩 시간 다양한 기능과 컴포..
-
Typescript interfacefront-end/TypeScript 2024. 2. 23. 10:41
1. interface 1. type과 유사한 기능을 가지고 있습니다. // type Square = { color: string, width: number } interface Square { color: string, width: number } let test: Square = { color: 'red', width: 100 } 2. extends 기능이 존재합니다. interface Student { name: string, } interface Teacher extends Student { age: number } 3. & 기호로도 가능합니다. - & 기호쓰는 방식을 intersection이라고 부르는데 extends 와 유사하게 사용가능합니다. interface Student { name :s..
-
Typescript class 타입 지정 constructor, prototypefront-end/TypeScript 2024. 2. 23. 10:09
1. 필드값 타입 지정하기 1. class 내부에는 모든 자식 object에게 속성을 만들수있습니다. 2. class 내부 중괄호 안에 변수 처럼 작성하면 됩니다. 3. 타입스크립트로 인한 타입을 지정이 가능합니다. class electronics { name :string = 'TV'; model :number = 20240223 } let home = new electronics(); console.log(home); //model:20240223 //name:"TV" 2. constructor 타입지정 1. 필드 값을 설정해야 됩니다. class electronics { constructor() { this.name = name; this.model = model; } } // 에러 발생 Error..