bkdragon's log

useImperativeHandle은 ref로 노출되는 핸들을 사용자가 직접 정의할 수 있게 해주는 React 훅이다. 무슨 소리냐면 컴포넌트 내부 함수를 부모 컴포넌트에서 실행할 수 있게 해준다는 소리이다.import React, { forwardRef, useRef, useImperativeHandle, Ref } from 'react';interface MyInputProps extends React.InputHTMLAttributes {}export interface MyInputHandle { focus: () => void; scrollIntoView: () => void;}const MyInput = forwardRef(function MyInput( props, ref: Ref) {..

Web Speech API 는 웹에서 음성 데이터를 인식할 수 있는 API 이다.주요 개념SpeechRecognition인식을 위한 인터페이스이다. 문법 , 언어 중간값 반환등의 옵션을 지정하고 음성 인식을 시작 또는 종료할 수 있다.speechstart, speechend, result, error 등의 이벤트 리스너를 등록할 수 있다.const grammar = "#JSGF V1.0; grammar colors; public = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | ind..

React에서 useRef로 DOM 요소에 대한 참조를 얻을 수 있다. 근데 ref는 컴포넌트에는 사용할 수 없는데 그 이유는 컴포넌트는 DOM 요소를 반환하는 함수이기 때문이다. 그래서 컴포넌트에 ref를 넘기려면 forwardRef 가 필요하다.import React, { forwardRef, Ref } from 'react';interface MyInputProps extends React.InputHTMLAttributes {}const MyInput = forwardRef( (props, ref: Ref) => { return ; });MyInput.displayName = "MyInput";export default MyInput;forwardRef로 감싸서 컴포넌트를 만들면 된다. ..

Portal을 사용해서 렌더링하는 컴포넌트는 play 함수의 canvasElement 내에 없기 때문에 찾을 수 없다. 따라서 @storybook/test에서 제공하는 screen을 사용해줘야 한다.import { expect, screen, waitFor, fireEvent, fn } from "@storybook/test";export const Default: Story = { name: "모달 창 기본", args: { onClose: fn(), isOpen: true, }, play: async ({ args, _ }) => { await waitFor(() => { expect(screen.getByTestId("..

storybook 의 play 함수를 사용하면 스토리가 렌더링 된 이후 사용자 상호작용을 시뮬레이션할 수 있다.설정play 함수를 사용하기 위해서는 스토리북 설정 파일에서 interactions 플러그인울 추가해야한다.npm install @storybook/test @storybook/addon-interactions --save-dev// .storybook/main.jsmodule.exports = { stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], addons: ["@storybook/addon-interactions"],};방법사용자 상호작용 시뮬레이션의 전반적인 과정을 먼저 살펴보고 예제 코드..

스레드는 프로세스 내에서 실행되는 가장 작은 단위의 작업이다. 프로세스는 운영체제에서 실행 중인 프로그램을 의미하며, 각 프로세스는 최소 하나 이상의 스레드를 포함한다. 스레드는 같은 프로세스 내에서 자원을 공유하며, 독립적으로 실행될 수 있다. 프로세스가 하나의 스레드를 가지면 싱글 스레드 프로세스이고, 여러 개의 스레드를 가지면 멀티 스레드 프로세스이다.메인 스레드메인 스레드는 프로그램이 시작될 때 자동으로 생성되는 스레드로, 프로그램의 기본 작업을 수행한다. 메인 스레드는 프로그램의 주요 작업을 수행하며, 프로그램의 종료와 함께 종료된다.스레드의 사용이유스레드는 주로 병렬 처리를 위해 사용된다. 예를 들어, 대규모 데이터 처리를 할 때 여러 스레드를 사용하여 작업을 분할하고 동시에 처리함으로써 처리..

이전에 작성한 글 중에 '합성 컴포넌트 패턴과 React Children API 를 활용한 컴포넌트 설계' 라는 글이 있다.그 글에서 Tab.Item 을 변경해보자.const Item: FC = ({ children, index }) => { const { activeTab, setActiveTab } = useContext(TabContext); if (index === undefined) { throw new Error("index is required"); } return ( setActiveTab(index)}> {children} );};이전 글에선 원래 이렇게 내부에서 스타일을 지정하는데 children을 ..

싱글톤 패턴은 하나의 클래스에 단 하나의 인스턴스만 존재하도록 보장하는 디자인 패턴이다. 이 패턴은 동일한 인스턴스를 공유함으로써 메모리 사용량을 줄이고, 특정 리소스를 여러 객체가 공유해야 할 때 유용하다.싱글톤 패턴 구현 방법타입스크립트로 싱글톤 패턴을 구현하는 방법은 아래와 같다:1. 클래스의 생성자를 private으로 설정하기private 생성자는 외부에서 클래스를 인스턴스화하는 것을 막아준다. 이를 통해 클래스 외부에서는 new 키워드로 새로운 인스턴스를 만들 수 없게 된다.2. 클래스 내부에서 static 변수를 통해 인스턴스를 저장하기static 변수는 클래스 자체에 종속되며, 인스턴스를 한번만 생성한 후 공유할 수 있도록 한다.3. 클래스 메서드를 통해 인스턴스 접근 제공getInstanc..

자바 스프링을 공부하다보면 서블릿, 서블릿 컨테이너, 디스패처 서블릿 등의 용어를 심심치 않게 볼 수 있다. 이런 용어들은 사실 웹 기술의 발전 과정과 관련이 있다. 웹 기술은 시간이 지나면서 많은 발전을 이루어 왔는데 오늘 그 과정을 간단하게 살펴보려고 한다.초기 웹은 정적 컨텐츠만 보여주면 됐지만 시간이 지남에 따라 동적 컨텐츠의 필요성을 느끼게 되었다. 그래서 처음 나온게 CGI이다.CGI(Common Gateway Interface)CGI는 초기 웹 서버와 외부 프로그램 간의 인터페이스로 사용되었다. 웹 서버는 정적인 HTML 파일만 제공할 수 있었기 때문에, 동적인 콘텐츠를 생성하기 위해 CGI가 필요했다. 그러나 CGI는 각 HTTP 요청마다 새로운 프로세스를 생성하여 응답을 처리했기 때문에 ..

브라우저 처럼 드래그로 이동이 가능한 모달창을 만들어보자.기본 아이디어는 아래와 같다:마우스로 모달창을 클릭한 순간 현재 마우스 위치와 모달의 좌측 상단 모서리와 차이를 저장하고 드래그 중임을 알려주는 flag 상태를 true로 만든다.flag 가 true가 되면, movemove 이벤트 리스너를 등록하고, 움직이는 위치로 위치 상태값을 업데이트 시킨다.현재 마우스 위치와 모달의 좌측 상단 모서리와의 차이가 왜 필요한지는 예를 들면 쉽게 이해된다.만약 모달의 현재 위치가 (100, 100) 이고, 마우스 클릭 위치가 (120, 130) 이라면차이(dragOffset)는 (20, 30) 이 된다.그리고 마우스를 (150, 160) 으로 이동 하면새로운 모달 위치를 dragOffset 을 빼면 얻을 수 있..