리액트6 [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. [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. [React/트러블슈팅] 컴포넌트를 반복문으로 렌더링 할 때 key를 지정하면서 발생했던 오류 해결 Kt wiz 웹페이지 개선 프로젝트를 하면서, 컴포넌트를 반복문을 통해 렌더링해야했다. 리액트에서는 컴포넌트를 반복문을 통해 렌더링할 때 Key를 지정해주어야한다. 그래서 처음에 배열의 인덱스를 Key로 지정했다. import React from 'react';import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui';import { BoxScoreData } from './BoxScoreData';interface MatchScoreTableProps { data: BoxScoreData;}const MatchScoreTable: React.FC = ({ data }) => { const.. 2024. 12. 20. 이전 1 다음
