1. 리액트 라우터리액트 라우터는 싱글 페이지 애플리케이션(SPA)에서 다중 페이지 경험을 구현하기 위한 표준 라이브러리이다.SPA는 초기 로딩 후 새로운 HTML 페이지를 요청하지 않고 현재 페이지 내에서 컴포넌트를 교체하는 방식으로 작동한다.리액트 라우터는 URL에 따라 적절한 컴포넌트를 렌더링하여 다중 페이지 웹사이트처럼 보이게 한다. 1.1. 라우팅의 필요성단일 페이지 애플리케이션도 여러 페이지처럼 보이는 UI와 탐색 기능이 필요하다.사용자가 특정 URL을 북마크하거나 공유할 수 있어야 한다.브라우저의 뒤로가기/앞으로가기 버튼과 같은 기본 탐색 기능이 정상적으로 작동해야 한다. 1.2. 라우터 설치 및 기본 설정React Router v6부터는 createBrowserRouter API를 사용한 ..
1. React 상태 관리상태는 사용자 입력, 서버 응답, 시간 경과 등에 따라 변경되는 애플리케이션의 데이터를 말한다.상태 관리란 이러한 데이터의 생성, 저장, 변경, 사용을 체계적으로 다루는 방법이다.React의 선언적 프로그래밍 모델에서 상태는 UI 렌더링의 기반이 되며, 상태가 변경되면 UI가 자동으로 업데이트된다. 1.1. 상태의 종류React 애플리케이션에서 상태는 범위와 영향력에 따라 분류할 수 있다. 1) 로컬 상태(Local State)단일 컴포넌트 내에서만 사용되는 상태이다. 주로 useState 또는 useReducer 훅으로 관리한다.ex) 폼 입력 값, 토글 버튼 상태, 로컬 UI 상태 등 2) 크로스 컴포넌트 상태(Cross-Component State)여러 관련 컴포넌트에서 공..
1. Form Action이란?React 19에서는 기존 HTML 폼의 action 속성을 재해석하여 새로운 방식의 폼 처리 메커니즘을 도입했다.이전에는 폼 제출과 관련된 작업을 처리하기 위해 onSubmit 이벤트 핸들러를 사용하고 event.preventDefault()를 호출하여 페이지 새로고침을 방지해야 했다.React 19의 formAction은 더 간결하고 직관적인 방식으로 폼 처리를 가능하게 한다. 1.1. 기존 HTML vs React의 차이점기존 HTML에서 action 속성은 폼이 제출될 URL을 지정하는 방식이다. 제출 반면, React 19에서는 action 속성에 JavaScript 함수를 직접 할당할 수 있다.이 접근법은 폼 처리 로직을 더 직관적으로 작성할 수 있게 해준다..
1. Form이란?React에서의 Form은 사용자로부터 데이터를 수집하기 위한 중요한 UI 요소이다.Form은 입력 필드의 집합으로, 주로 다음 세 가지 용도로 사용된다.1) 사용자 입력 값 양식화2) 입력 값 추출3) 데이터 유효성 검증 이 중 값을 추출하는 것은 비교적 간단하지만, 검증 과정은 여러 가지 고려사항이 필요하다. 1.1. HTML Form vs React FormHTML Form은 기본적으로 자체 상태를 관리하고 페이지를 새로고침한다.React 애플리케이션에서는 이런 동작이 사용자 경험을 방해할 수 있으므로, JavaScript를 통해 Form의 동작을 제어한다.React에서는 컴포넌트의 state를 "신뢰 가능한 단일 출처(single source of truth)"로 만들어 Form..
1. 프론트엔드와 백엔드 통신의 기본 원칙1.1. 보안 측면프론트엔드를 DB에 직접 연결하면 인증정보가 클라이언트 코드에 노출되어 보안 취약점이 발생한다.민감한 정보는 백엔드에 보관하고 프론트엔드에서 API를 통해 요청하는 방식이 표준 아키텍처이다.이러한 분리는 보안뿐만 아니라 유지보수성과 확장성도 향상시킨다. 1.2. 클라이언트-서버 모델프론트엔드는 UI 렌더링과 사용자 상호작용에 집중한다.백엔드는 데이터 처리, 비즈니스 로직, 인증, 데이터베이스 작업을 담당한다.API를 통해 두 계층이 통신하며, 각 계층은 독립적으로 개발 및 스케일링이 가능하다. 2. fetch API2.1. 기본 개념fetch API는 브라우저 내장 API로, 리액트 고유 기능이 아닌 웹 표준 API이다.네트워크 요청을 보내고 응..
1. Million.js란?Million.js는 React 애플리케이션의 성능을 향상시키기 위한 컴파일러와 런타임 최적화 라이브러리이다.기존 React 코드에 최소한의 변경만으로도 상당한 성능 향상을 제공하는 드문 라이브러리 중 하나이다.React의 가상 DOM 위에 추가적인 성능 최적화 층을 제공하여 동작한다 2. 작동 원리1) 선택적 재렌더링 방식Million.js는 일반 React의 재조정(reconciliation) 과정을 개선한 '선택적 가험반 재조정' 방식을 사용한다.React는 상태가 변경되면 컴포넌트 트리를 처음부터 다시 완성하고 차이점을 찾는데 반해, Million.js는 변경된 부분만 선택적으로 재렌더링한다. 2) 블록 컨셉(Block)Million.js의 핵심은 '블록(Block)'..
