React에서 폼을 다루는 일은 번거롭습니다. 입력값을 useState로 하나씩 관리하고 유효성 검사를 직접 구현해야 하며 상태 변화로 인한 불필요한 렌더링도 신경 써야 합니다. 이런 복잡함을 깔끔하게 해결해주는 도구가 바로 React Hook Form입니다.React Hook Form이란?가볍고 성능 좋은 폼 상태 관리와 유효성 검증을 도와주는 리액트 라이브러리입니다. 주요 특징작은 번들 사이즈 (8KB 미만)불필요한 리렌더링 없음유연한 검증 방식 (내장, 커스텀, 스키마 기반)비제어 컴포넌트 기반 (Uncontrolled Component)📝제어 컴포넌트 vs 비제어 컴포넌트제어 컴포넌트 (Controlled Component)useState로 값 상태를 직접 관리값이 변경될 때마다 리렌더링cons..

커스텀 훅(Custom Hook)이란?리액트의 내장 훅(useState, useEffect, 등)을 활용해자주 쓰이는 로직을 함수처럼 재사용할 수 있도록 만든 사용자 정의 훅을 말합니다.// 이름은 반드시 use로 시작해야 함function useSomething() { // 내부에서 다른 훅 사용 가능 return ...;} 왜 커스텀 훅을 사용할까?1. 로직의 재사용같은 useState, onChange 로직을 매번 반복해서 작성하는 건 비효율적 입니다.훅으로 빼서 함수처럼 가져다 쓰면 됩니다.2. 컴포넌트 간 중복 제거 예: 폼 입력 관리, 로딩/에러 처리, fetch 요청 등3. UI가 아닌 로직만 다룬다 (로직 추출 전용) UI 컴포넌트와 로직이 분리되어 코드 가독성/테스트성 향상됩니다.4...

줄거리단편집 7개입동 _007노찬성과 에반 _039건너편 _083침묵의 미래 _121풍경의 쓸모 _147가리는 손 _185어디로 가고 싶으신가요 _223감상평바깥의 여름은 여름 중에서도 눅눅한 여름같다. 무더운 여름 날씨에 무기력해져서 땅바닥에 누워 있는데 어디선가 부는 찬 바람의 쌀쌀함이 느껴지는 듯한 책이다. 7가지의 단편 중에서 기억에 남는 단편이 두 개 있다. 우선 "입동"에서는 사고로 아이를 잃은 부모의 이야기가 나온다. 현실적으로 생각하면 사망 보험금으로 대출을 갚고 이사를 가 새출발을 하는 것이 나을 수도 있다. 하지만 그 어떤 누구도 쉽게 그 돈을 쓰자고 말하지 못한다. 그 돈이 어떤 대가로 들어온 돈인지 모두 알고 있기 때문이다. 그래서 이러지도 저러지도 못하고 마음을 추스르지도 못한 채..

렌더링이란 무엇인가?리액트에서 "렌더링"이란 컴포넌트가 현재 props와 state를 바탕으로 UI를 계산하는 과정입니다.컴포넌트 함수를 호출한다.JSX를 반환한다.JSX를 React 엘리먼트로 변환한다.식당으로 비유해 쉽게 설명하면:UI: 손님이 먹을 음식컴포넌트: 주방장 (음식을 만드는 사람)리액트: 웨이터 (주문을 받고 요리를 전달함)Triggering (렌더링 유발): 손님이 새 음식을 주문한다 (state 변경, props 변경 등)Rendering (렌더링 과정): 주방장이 새 음식을 만든다 (컴포넌트 함수 호출 → JSX 반환)Commit (커밋 과정): 웨이터가 완성된 음식을 손님 테이블에 가져다 놓는다 (DOM 업데이트) 렌더링은 언제 발생하는가?앱이 처음 실행될 때: 처음 화면을 만들 ..

테스트란 작성한 프로그램이 의도한 대로 잘 동작하는지 확인하는 과정입니다. 다양한 프론트엔드 테스트 방법이 존재하며 각각 목적과 범위가 다릅니다.테스트가 왜 필요할까?프런트엔드는 사용자가 직접 마주하는 화면을 만듭니다. 작은 수정 하나가 다른 화면을 깨뜨릴 수도 있고버튼 하나가 동작하지 않아 전체 서비스가 불편해질 수도 있습니다. 이런 문제를 미리 발견하기 위해 테스트를 작성합니다. 하지만 모든 테스트가 똑같이 작성되는 것은 아닙니다. 무엇을, 어떻게 검증하느냐에 따라 다양한 테스트 방식이 존재합니다.테스트 종류 한눈에 보기: 테스트 피라미드 보통 테스트를 이야기할 때 테스트 피라미드라는 그림으로 설명합니다.아래로 갈수록 빠르고 비용이 저렴하며 작성하기 쉽습니다.위로 갈수록 사용자의 실제 사용 흐름과 가..

React는 어떻게 빠른 화면 전환을 구현할까요?React의 핵심 최적화 기술인 Virtual DOM, Diffing, Reconciliation, Batch Update의 동작 원리를 살펴보겠습니다.Virtual DOM: 스케치 먼저, 실제 그림은 나중에브라우저의 DOM 조작은 꽤 비싼 작업입니다. DOM에 새 요소 추가 → 브라우저는 레이아웃 재계산, 페인트, 컴포지트까지 수행이런 작업이 잦아지면 렌더링 병목 발생React는 이걸 방지하기 위해 Virtual DOM을 도입했습니다.말 그대로 "가짜 DOM"입니다. 메모리 상의 가벼운 JS 객체 트리로 화면의 상태를 보관합니다. 이 작업을 쉽게 비유해 보면:디자이너가 완성 그림을 그리기 전에 수십 번 스케치를 반복화면에 바로 그리는 대신 스케치북에서 ..

리액트 공식문서에서는 리액트를 이렇게 설명합니다.A JavaScript library for building user interfaces이처럼 ‘React’ 라는 것을 통해서 우리는 UI를 Building할 수가 있습니다.📝 UI를 Building한다? 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(프론트 엔드 영역)을 구축한다는 의미리액트의 특징1. SPA(Single Page Application)📝 리액트에서는 딱 하나의 html 파일만 존재합니다. JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.한 개의 페이지로 이루어진 애플리케이션(SPA) ↔ MPA(Multi Page Application)과는 상반된 개념기존 MPA의 문제점좋아요 누르면 전체가 다시..

테스트란?작성된 코드가 의도한 대로 정확하게 작동하는지 확인하는 과정테스트 코드 작성의 이점사려깊은 설계 가능자유로운 변경과 디버깅 시간 단축, 빠른 배포 가능테스트 코드 또한 문서 자료의 일부다양한 측면에서 검증하는 시간 단축 올바른 테스트 작성을 위한 규칙“내부 구현” 말고 “외부 동작”을 테스트하자함수나 컴포넌트의 구현 방식(예: useState, 내부 로직)이 아니라 겉으로 드러나는 결과를 테스트해야 합니다.무엇을 어떻게 했는가보다 결과가 제대로 나왔는가를 기준으로! 사용자 입장에서 테스트하는 게 핵심입니다."잘 돌아가고 있나?"를 판단하는데 도움이 되는 테스트만 쓰자.예: return a + b 같은 간단한 유틸 함수는 버그 날 일도 없고 테스트해봤자 큰 의미 없습니다.아주 간단한 함수는 과감하..

제어문제어문은 프로그램 흐름을 바꾸거나, 조건에 따라 특정 코드를 반복하거나 건너뛰게 하는 문법입니다. 1. 블록문 {} 중괄호로 묶은 것{ // 여러 줄의 코드를 묶을 때 사용 // 변수의 스코프(유효 범위)를 구분할 때도 사용됨} 2. 조건문조건에 따라 코드 실행합니다.if, else if, else참 또는 거짓 조건을 걸때 주로 사용합니다.if (조건) { // 조건이 true일 때 실행} else if (다른 조건) { // 위 조건이 false이고, 이 조건이 true일 때 실행} else { // 모든 조건이 false일 때 실행}//중괄호 {}는 문장이 1개일 때 생략 가능if (num > 0) kind = "양수"; // 중괄호 생략 가능else kind = "음수 또는 0";sw..

줄거리어느 날 아침, 안진진은 결심했다. 인생을 이렇게 흘려보낼 수는 없다고. 더 이상 이렇게 살아서는 안 된다고. 인생은 탐구하며 살아야 한다고 말이다. 요즘 진진을 가장 괴롭히는 고민은 두 남자 중 누구를 선택해 결혼할지였다. 안정적인 직장을 가지고 있지만 예측 가능한 일상만 반복하는 심심한 나영규와 번듯한 직업은 없어도 자유롭고 감성이 풍부한 김장우. 누구와 함께할지 결정하는 일은 단순히 연애의 연장선이 아니었다. 앞으로의 인생을 어떻게 살아갈 것인지에 대한 방향을 정하는 중대한 선택이었다.​진진은 겉보기엔 평범했다. 외모도, 직장도, 사는 방식도 무던한 편이었다. 그런데 그녀의 가족사만큼은 결코 평범하지 않았다. 술만 마시면 폭력적으로 돌변하는 아버지, 조폭 흉내나 내며 철없이 살아가는 남동생까지..