전체 글
-
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..
-
오픈소스를 활용한 text to video 만들기project/personal 2024. 4. 1. 10:49
사용한 오픈소스 및 모델 그외 정보 사용한 오픈 소스 : ByteDance/AnimateDiff-Lightning 사용한 모델 : (기본설정모델) emilianJR/epiCRealism 2. 후기 프론트엔드 개발자로 AI에 관심이 많아서 처음에는 open AI로 챗봇을 만들고, 흥미가 생겨 달리를 이용해서 txt to img로 생성했습니다. txt to video도 시도하고 싶은 마음으로, 가벼운 오픈 소스를 활용하여, 파이썬으로 플라스크로 API 통신으로 했습니다. 간단하고 쉽게 사용이 가능하며, 간단한 설정으로 text to video를 만들 수 있었습니다. 3. 깃주소 파이썬 코드의 경우 공유가 안되어 있지만 오픈소스에 플라스크를 이용한 api 통신으로 만들면 됩니다. https://github.c..
-
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(디바운싱적용할입력값, 디바운싱지연시간);
-
openweather API를 활용한 일기예보 사이트project/mini 2024. 3. 6. 14:23
1.날씨 정보 서울 외 3곳의 날씨 정보를 알 수 있습니다. 현재 기온, 습도, 기압, 풍속을 표시합니다. 다른 날짜의 날씨를 표시를 합니다. 2. openweather API openweather 사이트에서 API 발급 구독한 플랜에 따라 사용가능한 기능이 다르므로, 기능이 작동하지 않을수있습니다. \utils\openWeather.ts API 직접 입력 및 .env에 입력 4. 깃주소 https://github.com/SIM-TOO/react-weather GitHub - SIM-TOO/react-weather: react, typescript 사용한 날씨 웹 react, typescript 사용한 날씨 웹. Contribute to SIM-TOO/react-weather development by ..
-
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 단점 초기 로딩 시간 다양한 기능과 컴포..