소요유(逍遙遊)

💥 이벤트 버블링을 이용하여 마우스 이벤트 충돌 방지하기 리액트에서 마우스 이벤트 충돌을 방지하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 이벤트 버블링(Event Bubbling)을 이용하여 이벤트를 처리하는 것입니다. 이벤트 버블링을 이용하여, 하위 요소에서 발생한 이벤트가 상위 요소로 전파되어 중복된 이벤트가 발생하지 않도록 처리할 수 있습니다. 참고 : 이벤트 버블링이란, 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 말합니다. 🧑🏻‍💻 적용하기 예를 들어, 다음과 같은 코드에서는 Parent 컴포넌트와 Child 컴포넌트가 있으며, 각각 onClick 이벤트를 처리하는 함수가 정의되어 있습니다. function Parent() { function handleClick() { ..

FrontEnd/React 2023. 2. 18. 00:18

이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)은 이벤트가 DOM 트리에서 어떻게 전파되는지에 대한 두 가지 방법입니다. 이벤트 캡처링은 이벤트가 상위 요소에서 하위 요소로 전파되는 방식이며, 이벤트 버블링은 이벤트가 하위 요소에서 상위 요소로 전파되는 방식입니다. 이 글에서는 이벤트 캡처링과 이벤트 버블링의 개념 그리고 장단점에 대해서 알아봅니다. 1. 이벤트 캡처링 📸 이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 하위 요소로 전파되는 방식입니다. 이벤트 캡처링의 장점 이벤트 캡처링을 이용하면 다음과 같은 장점이 있습니다. 👍🏻 이벤트 처리 순서 이벤트 캡처링은 상위 요소에서 하위 요소로 이벤트가 전파되는 방식으로 이벤트를 처리합니다. 이러한 방식으로 이벤..

FrontEnd/Java Script 2023. 2. 17. 23:58

1. EventEmitter란? Node.js에서 이벤트 기반(Event-driven) 프로그래밍은 이벤트를 발생시키고 처리하는 데 사용되는 EventEmitter 클래스를 사용합니다. EventEmitter 클래스는 Node.js에서 가장 기본적인 이벤트 처리 방식 중 하나입니다. EventEmitter 클래스를 상속한 객체를 만들고, on() 메서드를 사용하여 이벤트 리스너를 등록하면, 이벤트가 발생할 때마다 등록된 콜백 함수가 실행됩니다. 이벤트는 문자열 형태의 이름과 함께 발생하며, 이벤트에 대한 데이터를 선택적으로 전달할 수도 있습니다. 예를 들어, EventEmitter 클래스를 사용하여 간단한 이벤트 처리를 구현할 수 있습니다. 아래는 EventEmitter 클래스를 사용한 간단한 예제 코드..

Development/BackEnd 2023. 2. 16. 03:22

1. Stream API란? Node.js에서 Stream API는 데이터를 읽고 쓰는 데 사용되는 유용한 기능을 제공합니다. 스트림은 데이터를 작은 조각으로 나누어 처리할 수 있으며, 이는 큰 파일이나 네트워크 통신 등에서 유용합니다. 2. Stream API의 유형 Node.js의 Stream API는 크게 4가지 유형으로 구분됩니다. Readable Streams: 데이터를 읽는 데 사용됩니다. 예를 들어, 파일 시스템에서 파일을 읽거나, HTTP 요청에서 데이터를 가져오는 데 사용됩니다. Writable Streams: 데이터를 쓰는 데 사용됩니다. 예를 들어, 파일 시스템에 파일을 쓰거나, HTTP 응답에 데이터를 쓰는 데 사용됩니다. Duplex Streams: 데이터를 읽고 쓰는 데 모두 사..

Development/BackEnd 2023. 2. 16. 02:47

😭 에러 발생 원인 참고 : "Expected static flag was missing" 오류는 React 18에서 새롭게 도입된 정적 렌더링(Static Rendering)과 관련된 에러입니다. 이 오류는 React 18에서의 새로운 기능 중 하나인 정적 렌더링과 관련하여 발생합니다. 정적 렌더링은 서버 측에서 React 애플리케이션을 렌더링하여 초기 HTML을 생성한 후, 클라이언트 측에서 React 애플리케이션을 마운트하여 상호작용성을 제공하는 방법입니다. 이를 위해 React는 렌더링된 컴포넌트가 정적인지 동적인지 구분하기 위한 "정적 플래그(Static Flag)"라는 새로운 개념을 도입하였습니다. "Expected static flag was missing" 오류는 이 정적 플래그가 누락되었..

FrontEnd/React 2023. 2. 16. 02:33

1. URL 매개변수 이용하기 URL 매개 변수를 사용하여 데이터를 전달할 수 있습니다. 예를 들어, /products?category=shoes와 같은 URL을 사용하여 카테고리가 "신발"인 제품 목록 페이지로 이동할 수 있습니다. 이 방법은 React Router의 Link 컴포넌트를 사용하여 구현할 수 있습니다. import { Link } from 'react-router-dom'; function MyComponent() { const categoryId = 123; return ( 상품 목록 ); } 2. React 컴포넌트 props로 전달하기 Link 컴포넌트 대신, 다른 페이지로 이동할 때 React 컴포넌트 props를 전달하여 데이터를 전달할 수도 있습니다. 예를 들어, 아래와 같이 ..

FrontEnd/React 2023. 2. 16. 02:25

😮 Objects are not valid as a React child 에러 발생 원인 "Objects are not valid as a React child" 오류는 일반적으로 React에서 문자열, 숫자 또는 React 구성 요소와 같은 유효한 자식 요소가 아닌 객체를 렌더링하려고 할 때 발생합니다. 이 오류는 일반적으로 다음과 같은 상황에서 발생합니다. 컴포넌트에서 객체를 반환하고 있거나 컴포넌트의 자식 요소 중 하나가 객체입니다. 🙌🏻 해결 방법 해결 방법은 다음과 같습니다. 확인해야 할 첫 번째 사항은 렌더링하는 컴포넌트의 반환 값입니다. 컴포넌트가 객체를 반환하고 있다면 해당 객체를 문자열, 숫자 또는 유효한 자식 요소로 변환해야 합니다. 만약 자식 요소가 객체인 경우 해당 객체를 문자열, ..

FrontEnd/React 2023. 2. 16. 01:51

1. TTL (Time To Live) 🕰️ TTL은 "Time to Live"의 약자로, 네트워크에서 데이터 패킷이 유효한 시간을 나타내는 값입니다. 데이터 패킷은 인터넷상에서 전송될 때, 여러 라우터를 거쳐 목적지로 전송됩니다. 이때, 데이터 패킷이 네트워크에서 무한정 반복되는 것을 방지하고, 라우터들이 패킷을 처리하는데 오버헤드를 방지하기 위해 TTL 값이 사용됩니다. IP 패킷에서의 TTL IP 데이터그램이 인터넷 시스템 내에서 존재할 수 있는 시간의 상한선을 의미합니다. TTL 값은 패킷을 전송할 때 설정되며, 패킷이 라우터를 거칠 때마다 1씩 감소합니다. 이때 TTL 값이 0이 되면, 패킷은 폐기되고 보낸 곳으로 에러 메시지가 전송됩니다. 이렇게 함으로써 패킷이 무한정 반복되는 것을 방지하고,..

Development 2023. 2. 16. 01:26