React

React로 폼을 만들고, 입력창에서 Enter 키를 누르면 다음 필드로 포커스를 이동시키는 기능을 구현했다.그런데 한글 입력 시 마지막 글자가 다음 인풋 필드로 이동하는 버그가 발생했다.영어, 숫자, 특수문자는 문제가 없고, 한글에서만 나타났다. 원인: IME 조합 상태와 onKeyDown 이벤트 타이밍의 충돌이 문제는 IME(Input Method Editor, 입력기) 조합 방식과 이벤트 발생 순서가 충돌하기 때문에 발생한다. IME의 입력 방식한글은 조합형 입력 언어다. 예를 들어 ‘사’라는 글자를 입력할 때 실제로는 다음과 같은 과정을 거친다.• 사용자가 ‘ㅅ’ 입력• ‘ㅏ’ 입력 → 조합 → ‘사’ 완성이때 조합이 끝나지 않은 상태는 브라우저에서는 isComposing = true 로 판단된다..

회사 프로젝트에서 거래명세표를 A4 가로 방향(landscape)으로 인쇄하는 기능을 구현해야 했습니다.- 화면에는 왼쪽 영역만 표시- 인쇄 시에는 A4 한 장을 꽉 채워 좌/우 모두 출력 (하나는 고객용 / 하나는 내부용)- 인쇄 시 전용 스타일 적용 (폰트 크기, 여백 등 조정)이를 구현하기 위해 React to Print의 useReactToPrint 훅을 사용하여, 특정 DOM에 대해 인쇄 작업을 진행했습니다. 이 글에서는 React to Print 라이브러리를 사용해 특정 컴포넌트를 인쇄하고, 인쇄 시에만 적용되는 스타일을 설정하여 이 문제를 어떻게 해결했는지 공유해 봅니다! 왜 window.print()가 아닌 React to Print?일반적으로 웹에서 인쇄 기능을 구현할 때 window.p..

프론트엔드 개발에서 라이브러리와 프레임워크는 서로 다른 역할을 수행하며, 개발자에게 제공하는 기능과 사용 방식에서도 차이가 있다. 1. 라이브러리와 프레임워크의 기본 개념라이브러리(Library)라이브러리는 특정 기능을 수행하는 도구들의 집합. 개발자는 필요할 때 라이브러리를 호출하여 특정 작업을 수행할 수 있다.라이브러리는 애플리케이션의 흐름을 직접 제어하지 않는다. 대신, 개발자가 필요한 기능을 선택적으로 사용할 수 있다.프레임워크(Framework)프레임워크는 애플리케이션의 기본 구조를 제공하고, 그 안에서 개발이 이루어지도록 한다. 프레임워크는 코드의 흐름을 제어하며, 개발자는 프레임워크가 제시하는 방식에 맞추어 코드를 작성해야 한다.프레임워크는 “제어의 역전(Inversion of Control..

Context란? : Props Drilling의 대안 Context는 컴포넌트에서 Props를 사용하지 않고 필요한 데이터를 넘겨주는 방식이다. 특정 데이터를 컴포넌트 트리 전체에 걸쳐 쉽게 공유할 수 있게 해준다. Context는 Props Drilling 문제를 해결해 줄 수 있다. Props Drilling : 중첩된 여러 계층의 컴포넌트에게 props 전달. 문제점: 특정 prop을 사용하지 않는 컴포넌트들에게도 해당 prop을 내려주어야 하는 비효율. 가독성 하락. 컴포넌트 결합도 상승으로 불필요한 리렌더링 발생 가능, 코드의 복잡도 증가 context는 리액트 버전 16부터 사용 가능한 리액트 내장 API로, 어떤 리액트 프로젝트라도 리액트를 import 하면 context를 바로 생성하고 ..

React에서 컴포넌트의 생명주기는 크게 세 단계로 구분된다. : 마운팅(Mounting), 업데이트(Updating), 그리고 언마운팅(Unmounting) 각 단계는 컴포넌트의 생성, 업데이트 및 파괴 과정에 해당한다. 1. 마운팅(Mounting) 이 단계는 컴포넌트가 처음으로 생성되어 DOM에 삽입되는 과정이다. 마운트 과정에서는 처음으로 render 메서드가 호출되어 컴포넌트가 화면에 렌더링 된다. 다음과 같은 생명주기 메서드가 마운팅 단계에서 호출된다. (자주 사용되는 생명주기 메서드는 볼드체) constructor(): 컴포넌트의 생성자. 컴포넌트의 초기 상태를 설정한다. static getDerivedStateFromProps(): 컴포넌트가 마운트 되기 전에 호출된다. props에 의해 ..

useMemo 사용 목적 useMemo는 React에서 제공하는 훅(Hook) 중 하나로, 주로 두 가지 목적으로 사용된다. 계산 비용이 높은 연산의 결과를 저장하고 재사용하기 위해 - 만약 컴포넌트가 계산 비용이 많이 드는 연산을 수행하고, 그 결과를 여러 번 재사용해야 한다면 useMemo를 사용하여 해당 결과를 저장하고 필요할 때 재사용할 수 있다. 참조 동일성(Reference Equality)을 유지하기 위해 - React에서 객체나 배열과 같은 복잡한 데이터 타입을 props로 넘길 때, 이 데이터가 매번 새로 생성되면 자식 컴포넌트가 불필요하게 재렌더링될 수 있다. useMemo를 사용하여 이러한 객체나 배열을 저장하면, 컴포넌트의 리렌더링이 발생해도 동일한 참조의 데이터를 유지할 수 있다...

오늘 날짜, 현재 시각 가져오기 const getDefaultDate = () => { const today = new Date(); const year = today.getFullYear(); const month = (today.getMonth() + 1).toString().padStart(2, '0'); const day = today.getDate().toString().padStart(2, '0'); const hours = today.getHours().toString().padStart(2, '0'); const minutes = today.getMinutes().toString().padStart(2, '0'); const seconds = today.getSeconds().toStrin..

interface IDownloadExcelParams { responseType?: ResponseType; } const fileAPI = { downloadExcel: (params: IDownloadExcelParams) => { return JSON.get(`file/excel`, params); }, } API 정의 부분 const [isDownloading, setIsDownloading] = useState(false); const downloadTemplate = async () => { try { setIsDownloading(true); const response = await fileAPI.downloadExcel({ responseType: 'blob', }); if (respon..