하루코딩 세싹이

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..

API (Application Programming Interface)API(응용 프로그램 인터페이스)는 소프트웨어 또는 애플리케이션 간의 상호 작용을 가능하게 하는 인터페이스이다. 쉽게 말해, 두 시스템이 서로 정보를 주고받을 수 있도록 정해진 규칙(프로토콜)과 방식(메서드)을 제공하는 것이다. 쉽게 말해, API는 서로 다른 프로그램이나 서비스가 정보를 주고받을 수 있도록 돕는 메뉴판 같은 역할을 한다. 예를 들어, 음식점에서 메뉴를 보고 주문하면 주방에서 음식을 만들어 가져다주는 것처럼, API를 통해 앱이나 웹사이트가 다른 서비스(예: 날씨 정보, 결제 시스템)와 소통할 수 있다. 개발자는 API를 사용해 원하는 기능을 쉽게 추가할 수 있고, 직접 복잡한 시스템을 만들 필요 없이 기존 서비스를 활..