전체 글126 [ Tailwind CSS ] - React Vite에서 Tailwind CSS 설치하기 https://tailwindcss.com/docs/installation/using-vite Installing with Vite - InstallationIntegrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.tailwindcss.com공식 문서를 참고하면서 설치했습니다. 1. React Vite 설치npm create vite@latest 2. Tailwind CSS 설치npm install tailwindcss @tailwindcss/vite 또는 npm install tailwindcss @tailwindcss/vitenpx tailwindcss init 3. vite.config.js(.. 2025. 6. 12. Exchange Rate API를 활용해 환율 계산기 구현하기 1. API KEY 발급https://www.exchangerate-api.com/ ExchangeRate-API - Free & Pro Currency Converter APIGet the data you need from our exchange rate API - it's perfect for spreadsheets, apps, SaaS, E-Commerce and more!www.exchangerate-api.com 여기서 API Key를 발급 받을 수 있다.발급 받은 API는 프로젝트 루트에 .env 파일을 만들어 암호화 한다. vs code로 가서 서버 폴더 루트 위치에 .env 파일 만들기EXCHANGE_API_KEY=82f6271b07b1caa96d70f816 2. Node.js로 환율 A.. 2025. 5. 15. Gemini Open API 연결해서 챗봇 기능 구현하기! 이번에 프로젝트를 하면서 챗봇 기능이 있으면 좋겠다!라는 생각에 Gemini Open Api를 연결해서 챗봇 기능을 구현해 보았다.그러면 어떻게 구현하고 연결했는지 과정을 살펴보도록 하자 1. Gemini API Key 발급받기 - https://aistudio.google.com/welcome?utm_source=google&utm_medium=cpc&utm_campaign=FY25-global-DR-gsem-BKWS-1710442&utm_content=text-ad-none-any-DEV_c-CRE_726057552432-ADGP_Hybrid%20%7C%20BKWS%20-%20EXA%20%7C%20Txt-Gemini-Gemini%20API-KWID_43700081658533828-kwd-9275244.. 2025. 5. 15. React - Context Hook ContextContext란 리액트 컴포넌트에서 props 없이 전역적으로 값을 공유할 수 있게 해 준다. Context 사용하기 1. Context 생성import React, { createContext, useContext, useState } from 'react';const MyContext = createContext(); //createContext() 함수를 사용해 생성함 MyContext는 Provider와 Consumer를 제공한다.근데 보통 Provider를 사용해 값을 공급하고, Consumer는 useContext를 대체할 수 있다. 2. Context Provider로 값 전달하기Provider 컴포넌트를 사용해 하위 컴포넌트에게 값을 전달해준다.value를 넣으면 그 값을 .. 2025. 5. 9. 이전 1 2 3 4 ··· 32 다음
