푸딩캠프의 전체 뉴스레터

구독하기
0080. Form 상태 관리 (`useState`, `useReducer`)
하드 스킬

0080. Form 상태 관리 (`useState`, `useReducer`)

앞서 예제 코드에서 우리는 두 개의 필드(`name`, `email`)에 대해 각각 `useState`를 사용하여 상태를 관리했습니다. 필드 수가 적을 때는 이러한 방식이 간단하고 직관적이지만, 폼 필드가 많아지면 상태 관리 코드가 복잡해질 수 있습니다. 이번 편에서는 여러 폼 필드의 상태를 관리하는 다양한 방법과 각 접근 방식의 장단점을 살펴보겠습니다.

리액트 react 폼 리듀서 form reducer
0078. [React] 데이터 바인딩과 이벤트 핸들링
하드 스킬

0078. [React] 데이터 바인딩과 이벤트 핸들링

React에서 데이터 바인딩(Data Binding)은 입력 필드의 값과 React 상태(state)를 연결하는 걸 뜻합니다. React에서 입력값을 다루려면 이벤트 핸들러를 통해 명시적으로 바인딩 된 상태를 업데이트해야 합니다. 이번 편에서는 폼의 입력 필드와 컴포넌트 상태를 연결하고 이벤트를 처리하는 방법을 알아보겠습니다.

React 리액트 폼 바인딩 이벤트 제어 컴포넌트 컴포넌트
0075. Form의 기본 개념
하드 스킬

0075. Form의 기본 개념

오랜만에 리액트 입문하기 콘텐츠를 연재합니다. 이번 편부터 총 8회에 걸쳐 Form을 알아보고 다룰 것이며, 이번 편은 몸풀듯이 Form에 대해 알아보겠습니다.

리액트 form 상태관리 폼 이벤트
0073. CS가 탁월하면 Product가 무능해진다.
하드 스킬

0073. CS가 탁월하면 Product가 무능해진다.

기본적으로 고객과 서비스 간에 발생하는 문제는 제품의 영역입니다. 그것이 제품의 디자인이든, 기획이든, 개발한계이든간에 원칙적으로 제품이 감당하고 해결해야할 문제입니다. 여러가지 이유로 그 해결이 고객을 대면하는 CS부서로 넘어갈 수 밖에 없을 것입니다. 그리고 그런 상황은 상당히 꽤 자주 발생합니다. 이 상황을 대하는 PM의 자세는 어떠해야 할까요.

스타트업 PM 사용자경험 시나리오 CS Caes Study
0070. Tailscale과 VPN - 쉽고 안전한 원격 연결의 모든 것
하드 스킬

0070. Tailscale과 VPN - 쉽고 안전한 원격 연결의 모든 것

Tailscale은 기존 VPN 솔루션이 갖던 복잡함을 대폭 줄이고, “회사-집-클라우드”를 단일 사설망처럼 다양한 기기에 이어주는 매우 편리한 VPN입니다. 특히 맥의 Screen Sharing, Docker 등 다양한 서비스에 곧바로 Tailscale IP로 접근할 수 있어 원격 업무, 홈랩 구축, 팀 협업, 개발/운영 환경 테스트 등 쓰임새가 다양합니다.

tailscale vpn 네트워크 사설망 원격접속
0067. 우리는 해왔던 그대로 다시 하고 있을 뿐
하드 스킬

0067. 우리는 해왔던 그대로 다시 하고 있을 뿐

우리는 왜 MVP(최소 기능 제품, Minimum Viable Product)를 만들 때마다 뭔가를 넣어야 한다고 믿게 되었을까. 내 마음속의 MVP에는 왜 이런 것과 저런 것이 모두 포함되어야 했을까. 이것이 있으면 더 잘 될 것이고, 이것을 넣으면 더 많은 효과가 있을 것이며, 소비자가 우리에게 기대하는 것도 이와 같다고 여러 이유를 댈 수 있겠지만, 제 결론은 단 한 가지입니다. “우리는 늘 일해왔던 그대로 일하기 때문”

경험 유연성 제품 MVP
0064. 가장 싸게 실패하는 방법
하드 스킬

0064. 가장 싸게 실패하는 방법

MVP를 왜 내어야 하는가. 정답은 여러분 마음 속에 있을 것입니다만, 저는 MVP를 만드는 이유는 가장 싸게 실패하기 위해서라고 답하겠습니다. 우리가 포인트 결제가 그로스에 도움이 되는 것에 확신을 가지고 있다고 하더라도, 포인트를 넣었을 때와 아닐 때의 성과가 10배 차이가 난다는 확신을 가지고 있다손 치더라도, 우리는 그 기능을 넣는 시점부터 이미 싸게 실패할 수 없게 됩니다.

린 애자일 비용 고객 가설 실험 MVP
0058. Playwright를 활용한 종단 테스트 맛보기
하드 스킬

0058. Playwright를 활용한 종단 테스트 맛보기

리액트 테스팅에 대한 장정을 마무리하는 주제는 종단(End to End) 테스트입니다. 리액트 애플리케이션에서 컴포넌트 단위 테스트(Vitest+React Testing Library)와 통합 테스트를 잘 구성했다 하더라도, 실제 사용자가 접속해 브라우저 상에서 여러 페이지를 오가며 작업하는 시나리오 전반을 검증하고자 할 때는 종단(End-to-End) 테스트가 유용합니다. 종단 테스트는 애플리케이션의 전 과정을 통째로 체험하는 관점에서 진행되므로, 사용자 경험과 가장 유사한 형태로 기능 동작을 점검할 수 있습니다.

테스트 종단 E2E Playwright
0052. 사용자 정의 훅(Custom Hook) 테스트
하드 스킬

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

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

테스팅 혹 리액트 토이스토리
0046. Vitest에서의 스냅샷 테스트 개념과 활용
하드 스킬

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

리액트 애플리케이션을 제작하다보면, 컴포넌트의 UI 구조가 예상치 못하게 바뀌어버리는 상황을 미리 파악하는 일이 중요한 경우가 있습니다. 스냅샷 테스트(Snapshot Test)는 컴포넌트가 렌더링해내는 결과물(주로 DOM 구조)을 파일 형태로 보관하고, 테스트 실행 시 새로 생성된 결과물과 비교해 차이점을 확인하여 UI 변경 여부를 빠르게 감지 하는 데 사용됩니다. 의도된 변경인지 의도하지 않은 버그인지 파악하기에 좋지요.

스냅샷 테스팅 vitest 리액트
뉴스레터 구독하기