개발천재

hook.js:608 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components Error Component Stack at input () at div () ..

React는 원래 "상태(state) 기반의 UI 선언형 프레임워크"이기 때문에, 보통 DOM을 직접 제어하지 않고 상태를 바꾸면 자동으로 UI가 바뀌도록 설계되어 있다. 하지만, 일부 상황에서는 DOM을 직접 제어해야 하는 경우가 있다. 입력 요소에 포커스나 선택 조작이 필요할 때, 스크롤 조작이 필요할 때, DOM의 크기나 위치를 즉정할 때 또는 외부 라이브러리을 연동할 때 외부에서 DOM을 직접 요구하는 경우는 DOM을 직접 제어해야한다. React에서는 가능한 한 상태로 UI를 제어하되, DOM을 직접 건드려야 할 특별한 상황에서는 ref를 통해 안전하게 제어할 수 있다. useRefref(useRef)는 reference(참조)의 줄임말로 React에서 DOM 요소나 컴포넌트에 직접 접근하..

React에서 PDF 다운로드 기능을 구현하는 방법은 여러 가지가 있지만, 사용자 브라우저에서 PDF 파일을 생성하고 다운로드 하도록 하는 방법이 가장 일반적이다. 가장 많이 쓰는 라이브러리는 jspdf, tml2canvas이다. 이 외에도 react-pdf와 pdfmake도 있다. jsPDF + html2canvasjsPDF는 자바스크립트로 클라이언트 측에서 PDF 파일을 생성할 수 있게 해주는 라이브러리이다. 기본적으로 텍스트, 이미지, 테이블, 도형 등을 코드로 직접 그리는 방식이며, save() 함수를 통해 사용자가 PDF 파일을 다운로드할 수 있도록 제공한다. 그러나 기본 내장 폰트는 영문 위주이기 때문에 한글을 출력하려면 별도의 폰트 파일을 등록해줘야 한다. 간단한 영문 PDF 문서나 ..

JSX와 TSX는 모두 React에서 UI를 만들 때 사용하는 문법이지만, TSX는 타입을 명확히 관리할 수 있는 TypeScript 기반이라는 차이가 있다. 초반에는 JSX로 시작할 수 있지만, 프로젝트가 커지거나 팀과 함께 작업한다면 TSX로 전환하는 것이 더 안정적이다.구분.jsx.tsx언어JavaScript + JSXTypeScript + JSX타입 사용타입 사용 불가타입 명시 가능컴파일러Babel 등 JS 컴파일러TypeScript 컴파일러React 문법JSX 문법 사용JSX 문법 + 타입 정의 사용 JSX(JavaScript XML)JSX는 JavaScript XML의 줄임말로, 자바스크립트 안에 HTML 같은 코드를 쓸 수 있게 해주는 문법이다. JSX는 브라우저가 직접 이해할 수 없기 때..

리액트 프로젝트는 모두 React를 기반으로 하지만, 사용하는 개발 도구(빌드 도구)에 따라 다르다.React 앱을 만들 때 주로 사용하는 CRA(Create React App) 과 Vite는 프로젝트를 빠르게 시작하고 실행할 수 있게 도와주는 빌드 도구(혹은 개발 환경 도구)를 말한다. CRA는 전통적인 방식이고, Vite는 최신 방식으로 빠르고 설정이 유연하다는 장점을 가지고 있다. CRA vs Vite 차이항목CRA (Create React App)Vite실행 명령어npm startnpm run dev설정 파일거의 숨겨져 있음 (eject해야 수정 가능)직접 설정 가능 (Vite config 파일 존재)빌드 속도느림 (웹팩 사용)매우 빠름 (ESBuild 사용)사용 기술Webpack 기반ESBuil..

npm error Missing script: "start" 오류 원인이 에러는 npm start를 실행하려고 했지만, package.json 파일 안에 "start" 스크립트가 없어서 생기는 문제이다.npm error Missing script: "start" 에러가 나는 이유는 package.json 안에 아래와 같은 항목이 없기 때문이다."scripts": { "start": "react-scripts start"}또는 "scripts": { "start": "node index.js"} 오류 해결 방법1. package.json 열기 C:\dev\softlanders_platform\softlanders-new\package.json 파일을 연다.2. "scripts" 항목 확인 예: Re..

Jotai란?"Atom(원자)" 단위로 상태를 관리하는 React 상태 관리 라이브러리 Jotai는 React 애플리케이션에서 상태를 작고 독립적인 단위(atom)로 나누어 관리할 수 있게 해주는 가볍고 선언적인 상태 관리 라이브러리이다. 각 atom은 useState처럼 사용하면서도 전역으로 공유할 수 있고, 필요한 상태만 불러오거나 조합(파생 상태)할 수 있어 유연하고 테스트하기 쉬운 구조를 만들 수 있다. 비동기 상태도 기본적으로 지원하며, Recoil과 비슷한 방식이지만 훨씬 단순하고 가벼운 점이 특징이다. Jotai를 사용해야할 때상태를 작게 쪼개서 조립하고 싶을 때 예를 들어 버튼 클릭 수, 로그인 여부, 토글 상태 등 작고 독립적인 상태를 각각 atom으로 만들고, 필요한 컴포넌트에서만 사..

Zustand란?Zustand는 React에서 상태(state)를 쉽게 관리할 수 있게 해주는 도구(라이브러리)이다. React에서는 일반적으로 useState나 useContext를 쓰는데, 컴포넌트가 많아지면 상태를 공유하거나 관리하는 게 점점 복잡해진다. Zustand는 공용 창고처럼 이걸 한 곳에 다 모아서 관리하게 해주는 역할을 한다. 컴포넌트 간 상태 공유가 필요할 때, 또는 상태를 한 곳에 깔끔히 모아두고 싶을 때 유용하게 쓰인다. Zustand 사용 목적React에서 버튼 컴포넌트에서 숫자를 올렸는데, 헤더, 사이드바, 푸터에도 그 숫자가 보여야 하는 경우가 있다. 이럴 땐 상태를 여러 컴포넌트끼리 공유해야 한다. Zustand는 이런 걸 아주 간단하게 만들어준다. Zustand가 항상 필..

useContext 이해하기useContext는 React의 훅 중 하나로, Context API를 사용하여 컴포넌트 트리에서 값을 쉽게 전달할 수 있도록 도와준다. 일반적으로 부모 컴포넌트에서 Context를 Provider를 사용해 값을 전달하고, 하위 컴포넌트에서는 useContext로 이 값을 쉽게 가져올 수 있다. 주로 전역적인 상태(예: 테마, 로그인 상태 등)를 관리할 때 유용하다. Context는 컴포넌트 트리 전체에서 전역적으로 데이터를 공유할 수 있게 해준다. 하지만 사용은 신중하게 해야 한다. 너무 많은 데이터를 Context로 전달하면 성능 저하가 발생할 수 있기 때문이다.useContext는 값이 변경되면 해당 컴포넌트를 리렌더링한다. 이는 리액트의 기본 동작처럼 상태 값이 변경될..

중첩 라우팅 기본 개념리액트 라우터에서 중첩 라우팅 (Nested Routing)은 부모 컴포넌트 내에서 자식 컴포넌트를 렌더링하는 방식이다. 이를 통해 URL 경로에 따라 부모 컴포넌트와 자식 컴포넌트를 동시에 렌더링할 수 있다. 중첩 라우팅을 사용하면, 특정 경로가 일치할 때 부모 컴포넌트는 계속 렌더링되며, 자식 컴포넌트만 교체되는 형태로 UI를 구성할 수 있다.http://localhost:3000/about/memberhttp://localhost:3000/about/location  리액트 라우터의 중첩 라우팅은 주로 부모 컴포넌트에서 Outlet 컴포넌트를 사용하여 자식 컴포넌트가 렌더링될 자리(공간)를 마련한다. 자식 경로가 일치하면, 해당 경로에 맞는 자식 컴포넌트가 Outlet 위치에 ..