0055. TanStack Query로 API 호출 컴포넌트 테스트하기

26년차 CTO 개발자를 사수로서 팀 프로젝트를 함께 하는 방법을 소개합니다. 또한 TanStack Query를 사용하는 환경에서 테스팅하는 방법을 다룹니다.. 푸딩캠프 이야기 26년차 CTO 출신 개발자를 사수로서 함께 프로젝트를 만드세요! 대부분의 경우 나의 성장을 조력할 코치...

0052. 사용자 정의 훅(Custom Hook) 테스트

토이스토리 2기를 리뉴얼 출시합니다. 랜선 사수와 함께 결제를 연동한 프로젝트를 출시하고 운영해보세요! 이번 하드스킬 콘텐츠는 리액트 커스텀 훅을 테스트하는 내용을 다룹니다.. 토이스토리 2기 리뉴얼 출시 출시해서 운영하는 토이 프로젝트. 거기에 결제까지. 토이 프로젝트를 출시하고...

0049. Vitest에서 Mocking과 의존성 주입(Dependency Injection) 처리하기

토이스토리 2기를 리뉴얼하여 곧 출시합니다. 무엇이 달라지는지 핵심 요약해 전해드립니다. 이번 하드스킬은 리액트 입문하기의 테스팅 콘텐츠로, Vitest에서 모킹과 의존성 주입을 하는 내용을 다룹니다.. 푸딩캠프 이야기 토이스토리 2기 리뉴얼 토이 프로젝트를 만드는 푸딩캠프 프로그...

0046. Vitest에서의 스냅샷 테스트 개념과 활용

리액트 애플리케이션을 제작하다보면, 컴포넌트의 UI 구조가 예상치 못하게 바뀌어버리는 상황을 미리 파악하는 일이 중요한 경우가 있습니다. 스냅샷 테스트(Snapshot Test)는 컴포넌트가 렌더링해내는 결과물(주로 DOM 구조)을 파일 형태로 보관하고, 테스트 실행 시 새로 생성...

0043. 리액트 테스팅과 웹 표준, 그리고 시맨틱 웹

토이스토리 2기 커리큘럼이 조정됩니다. 그리고 이번 리액트 입문하는 연재 콘텐츠에서는 실제로 테스트 코드를 작성해요. 웹 프론트엔드의 테스팅에 관심 있는 분들은 이번 연재분을 꼭 보세요!. 푸딩캠프 이야기 토이스토리 2기 커리큘럼 조정 푸딩캠프에서 토이 프로젝트를 만들어 출시하는 ...

0042. 테스팅과 리액트 테스팅

이번 리액트 입문 연재 콘텐츠는 테스팅에 관해 개괄합니다. 프론트엔드, 리액트에서 테스팅을 학습하시려 했다면 이번 콘텐츠로 시작해보세요! 프레임워크 없는 프론트엔드 개발 스터디 참가자 모집을 이제 곧 마감해요. 서두르세요!. 푸딩캠프 이야기 프레임워크 없는 프론트엔드 개발 스터디 ...

0039. 리액트 useEffect로 부수작용 다루기

푸딩캠프의 캠프 두 가지가 새로이 문을 엽니다. 바로 스터디 모임과 글쓰기 모임이지요. 그리고, 이번 하드스킬 컨텐츠는 리액트의 부수효과를 다루는 useEffect()를 자세히 알아봅니다.. 푸딩캠프 이야기 리액트 테스트 코드 작성하며 캘린더 구현하기 특강 2024년 12월 3일 ...

0036. useState로 상태 관리하기

이번 편은 하드스킬을 다루는 편으로, 리액트의 대표적인 훅인 useState()에 대해 좀 더 자세히 알아봅니다.. Hard skills 이번 편에서는 전 편에서 다룬 useState() 함수를 조금 더 살펴봅니다. useState란? React의 useState() 함수는 함수 ...

0033. 리액트에서 상태 관리란?

이번 하드스킬 편에서는 리액트에서 매우 빈번하게 다루는 상태 관리에 대해 다룹니다. 약간 깊이 들어가는데, 이해하시면 앞으로 리액트 활용에 도움이 많이 될 거예요. 또한, PM의 하드스킬과 소프트스킬에 대해 멘토링 해주실 권준호(콴)님이 커피챗 코치로 합류하셨다는 소식도 전해드립니...

0030. React Hooks이란?

이번 하드스킬편에서는 연재 중인 리액트 입문 컨텐츠로 함수 컴포넌트와 리액트 훅을 살펴봅니다.. 함수 컴포넌트 등장과 한계 (1) 클래스 컴포넌트의 한계 React의 초기 버전에서는 클래스(class)로 컴포넌트를 작성해 상태 관리와 생명주기를 다뤘습니다. 다음은 클래스 컴포