👩🏻‍💻 Dev/Front-End (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..

제네릭(Generic)이란?C나 자바 같은 정적 언어에서 다양한 타입 간에 재사용성을 높이기 위해 사용하는 문법이다. 타입스크립트도 정적 타입을 가지므로 제네릭 문법을 지원한다.제네릭의 사전적 의미는 일반적인 것(general)을 뜻하는데, 타입스크립트의 제네릭도 이와 비슷하게 '일반화된 데이터' 타입이라 볼 수 있다.제네릭: 함수, 타입, 클래스 등에서 내부적으로 사용할 타입을 미리 정해두지 않고 타입 변수를 사용해서 해당 위치를 비워 둔 다음에, 실제로 그 값을 사용할 때 외부에서 타입 변수 자리에 타입을 지정하여 사용하는 방식-> 이렇게 하면 함수, 타입, 클래스 등 여러 타입에 대해 하나하나 따로 정의하지 않아도 되기 때문에 재사용성이 크게 향상된다.타입 변수는 일반적으로 와 같이 꺾쇠괄호 내부에..

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

CSSCascading Style SheetsHTML 꾸며주는 언어문서 통째로가 아닌, HTML 하나하나 꾸며줌HTML에 CSS 적용 방법 3가지인라인 (inline): HTML 태그 안에 같이 작성내부 스타일 시트 (internal style sheet): HTML 문서 안에 같이 작성외부 스타일 시트 (external style sheet): HTML 문서 밖에 작성하고 연결* HTML 태그 한쌍을 element라고 부른다.  JavaScript특정 HTML요소를 선택하여 제어할 수 있는 스크립트 언어스크립트 언어란?독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌, (프로그램 내부의 구성 요소 중 하나로) 프로그램을 제어하는 스크립트 역할을 하는 언어-> 런타임의 발전으로, 스크립트 언어만..

DOCTYPEDocument Type의 약자.HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다.이를 선언해주지 않으면, 호환 모드(quirks mode)로 동작하며, 이 경우 크로스 브라우징 이슈가 심해지게 된다. 표준 모드와 호환 모드W3C가 웹 표준을 만들면서, 렌더링을 할 때 표준 모드(Standards mode)와 호환 모드(Quirks mode)로 렌더링할 수 있는 옵션이 생겼다. 호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 버전의 브라우저에서도 깨지지 않기 때문에 각 브라우저마다 다르게 보일 수 있다.따라서 특별한 경우가 아니라면 DOCTYPE을 명시하여 브라우저가 표준 모드로 렌더링하게 하는 게 좋다.https://develo..

웹의 이해인터넷과 웹인터넷 (Internet): 전 세계 컴퓨터를 하나의 통신망으로 연결한 것. '우리는 모두 연결되어 있다'는 개념을 상징.웹 (Web): 인터넷에 연결된 컴퓨터를 통해 정보를 공유하는 공간. 월드 와이드 웹 (World Wide Web, WWW)이라고도 불림.웹의 시작과 특징1980년대 스위스 유럽 입자 물리 연구소에서 팀 버너스리가 연구원들 간 빠른 정보 교환을 위해 고안.특징: 정보를 하이퍼텍스트 형식으로 표현하고, 링크를 통해 다양한 정보와 문서를 연결해 제공.웹 페이지와 웹 사이트웹 페이지 간 링크를 통해 이동하는 것: 웹 서핑 (Web Surfing) 또는 웹 브라우징 (Web Browsing).웹 브라우저웹 페이지나 웹 상의 데이터를 찾고 읽을 때 사용하는 도구.웹의 구조클..

프론트 개발을 할 때 아이콘은 필수 요소다. 처음 html css를 배웠을 때 font awesome 을 사용해서, 계속 여기서 아이콘을 찾았었는데 유료도 많고 한정적이라 아쉬움이 있었다. 앞으로는 리액트 프로젝트 아이콘은 React Icons에서 찾도록 하자! 다양한 Font Awesome, Ant Design, Bootstrap, Material Design 등 리액트에서 사용할 수 있는 유용한 아이콘들을 모두 찾을 수 있다. 다음과 같이 간단하게 사용할 수 있다. yarn add react-icons # or npm install react-icons --save import { FaBeer } from "react-icons/fa"; function Question() { return ( Lets..

자동 말줄임 처리 텍스트가 넘칠 때, 자동으로 말줄임 처리를 해줘야할 때가 있다. 이때 텍스트를 축약하는 기준으로는 크게 두 가지가 있다. 글자수에 따라 축약 CSS ellipsis 각각의 방법을 알아보자! 글자수에 따라 축약 텍스트 글자 수에 따라 조건부 렌더링을 해주면 된다. 그리고 잘린 텍스트에 마우스를 올리면 (hover 하면) 전체 텍스트를 볼 수 있도록 Tooltip으로 띄워줄 수 있다. 아래는 name이 10자를 넘으면 앞에서부터 10자를 보여주고, 뒷 부분은 '...'으로 잘라서 보여주는 코드 예시이다. ( 데이터가 없을 때 '-' 를 출력하도록 하는 조건부 렌더링도 포함되어 있다.) cell: ({ row: { original } }) => { return original.name ? (..

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