React7 [React/Typescript] react-chatbot-kit으로 챗봇 개발하기 2 (기능 편) UI 편 ⬇️https://bookcord.tistory.com/36 [React/Typescript] react-chatbot-kit으로 챗봇 개발하기 (UI 편)📍 공식 문서https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/getting-started Getting Started | React-chatbot-kitStep 1: Install react-chatbot-kitfredrikoseberg.github.io 공식 문서에 나와있는대로 아래의 세 가지 단계bookcord.tistory.com KT wiz 웹페이지 개선 프로젝트에서, 추가할 기능으로 챗봇을 넣기로 했었다. 그런데 멘토님께서 챗봇은 api가 없기 때문에 그냥 안해도 된다고.. 2025. 1. 28. [React/Typescript] react-chatbot-kit으로 챗봇 개발하기 1 (UI 편) 📍 공식 문서https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/getting-started Getting Started | React-chatbot-kitStep 1: Install react-chatbot-kitfredrikoseberg.github.io 공식 문서에 나와있는대로 아래의 세 가지 단계를 수행했다.이때 나는 타입스크립트로 개발 중이므로, 각각 ts와 tsx로 작성해야했다. (여기서부터 개큰 고난 시작)타입스크립트는 자바스크립트와 달리 모든 매개변수의 타입을 지정해줘야하기 때문이다. /* config.ts */import { createChatBotMessage } from 'react-chatbot-kit';const conf.. 2025. 1. 28. [React] 카카오 로그인 구현하기 (with Supabase) 프로젝트에서 사용자 데이터를 관리하는 데이터베이스로 Supabase를 사용중이다.공식문서에 카카오 로그인 구현하는 방법이 잘 나와있어 이를 보면서 진행했다. 문서에 나와있는 대로 Kakao developer와 Supabase 셋팅을 했다.https://supabase.com/docs/guides/auth/social-login/auth-kakao Login with Kakao | Supabase DocsAdd Kakao OAuth to your Supabase projectsupabase.com // useKakaoLogin 훅 import { supabase } from '@/lib/supabase';const useKakaoLogin = () => { const signinWithKakao = .. 2025. 1. 25. [React] axios에서 React-Query로 리팩토링하기 프로젝트에서 원래 axios를 사용해서 데이터 패칭을 하고 있었다.//데이터를 서버로부터 불러오는 코드import axios from 'axios';const API_URL = import.meta.env.VITE_REACT_APP_API_URL;export const getMatchData = async (gameDate: string, gmkey: string) => { try { const res = await axios.get(`${API_URL}/game/boxscore`, { params: { gameDate, gmkey }, }); if (res.status !== 200) { throw new Error(`Failed to fetch data. Statu.. 2025. 1. 9. [Error] Already included file name '파일경로' differs from file name '파일경로' only in casing. 파일명을 대소문자만 변경했을 때 다음과 같은 에러를 마주했다. 🤔 에러 메세지:Already included file name '파일경로' differs from file name '파일경로' only in casing. 이 경우 프로젝트 루트의 config.json 파일에서 다음 옵션을 확인한다.{ "compilerOptions": { "forceConsistentCasingInFileNames": true } } 이 옵션이 true로 설정되어 있다면, 파일 이름의 대소문자를 일관되게 유지해야 한다. 따라서 이를 false로 바꾸어주면 해결된다. - React + Vite를 이용하여 프로젝트를 하는 경우: vite.config.js 에 해당 옵션 추가- 타입스크립트를 사용하고 있을 경우 : tsc.. 2024. 12. 22. [React/트러블슈팅] filter 메서드로 검색 기능을 구현할 때 생긴 오류 해결 📌 구현하려는 기능 강의를 들으면서 Todo를 검색하는 기능을 구현 중이었다. 이를 위해 검색어를 search로, 상태를 setSearch로 관리했다.const List = ({ todos }) => { const [search, setSearch] = useState(''); const onChangeSearch = (e) => { setSearch(e.target.value); }; input의 값을 search로 설정하고, onChangeSearch 함수를 등록하여 검색어를 입력했을 때 search의 상태를 바꾼다. search를 포함하는 요소를 필터링하는 함수를 구현했다.const getFilteredData = () => { if (search === '') { .. 2024. 12. 20. 이전 1 2 다음
