프론트엔드7 React Hooks Testing에 사용하는 함수들 *패키지 : @testing-library/react-hooks renderHook()커스텀 훅의 동작을 독립적으로 테스트하는 함수이다.renderHook() 함수에 커스텀 훅을 호출하는 코드를 콜백함수로 넘기면 result 속성을 담고 있는 객체를 반환한다. 이 result 객체는 current 속성을 갖는데, result.current를 통해 해당 훅의 반환값에 직접 접근할 수 있다.const { result } = renderHook(() => useCustomHook()); act() 함수와 함께 사용하여 비동기 작업을 테스트할 수 있다.act()act() 는 함수를 인자로 받는데, 이 함수를 실행시켜서 가상의 DOM에 적용하는 역할을 한다.이 함수는 상태를 변경한다. 따라서 act() 로 감싸주.. 2025. 2. 14. [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/트러블슈팅] 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. [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 사전직무교육 1주차 학습 회고 -(1) 자바스크립트 문법 🍀 What I Learned this week📌 자바스크립트 문법 🧷 자바스크립트는 프로토타입 기반 언어! 🧷 배열 🧷 this의 의미 🧷 콜백함수와 비동기 함수, 에러 핸들링 🧷 클래스📌 React 프로젝트: Vite + Shadcn UI를 활용, tailwind.css 사용 🧷 오픈 날씨 API를 활용한 리액트 대시보드 만들기 🧷 이미지 오픈 API를 통해 이미지 정보 조회 사이트 만들기📌 타입스크립트 문법 📌 Javascript 문법 🧷 자바스크립트는 프로토타입 기반 언어이다.자바스크립트는 클래스라는 개념이 없다. 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다. [확장성]//const fruits = ["사과", "바나나", ".. 2024. 11. 17. [유데미X웅진씽크빅X스팩] 프론트엔드 프로젝트 캠프 : 리액트 과정 지원기 지원 이유나는 지금 우테코 프리코스에 참여 중이다. 프리코스는 이제 1주 후면 끝이 나는데, 그 다음으로 할 일이 딱히 없었다.그러다 마침 유데미레터에서 리액트 프로젝트 캠프를 한다는 카톡을 받고, 여기에 지원하게 되었다. 나는 당장 취업을 하기엔 실력이 부족하다고 생각하지만 그렇다고 부트캠프에 들어가고 싶지 않았는데, 강의식 교육이 싫었기 때문이다..(그래서 우테코에 지원한 것이기도 하다.) 졸업을 했는데 또 몇 개월 간 수업을 듣고 싶지 않았다.😂 그런데 이 캠프는 10주의 단기간이고, 기업과 연계해서 프로젝트를 하는 방식이다. 그리고 나는 HTML/CSS/JavaScript 지식은 어느정도 있어서 프레임워크 공부가 필요했는데, 딱 3주간 프레임워크를 공부하고 프로젝트를 할 수 있어 나에게 맞는 교.. 2024. 11. 6. 이전 1 2 다음
