본문 바로가기
728x90
반응형

source-code229

Cannot read properties of null (reading 'useContext') 에러 해결 배경 사내 서비스에서 공통으로 사용하는 모듈들을 위한 패키지를 개발하는 도중, 위 에러와 마주쳤습니다. 문제가 된 상황은 다음과 같았습니다. 1. A 패키지는 B, C 프로젝트에서 공통으로 사용하는 모듈들을 제공합니다. 2. 이때 공통으로 사용되는 모듈들에는, 기본 css가 적용된 styled-components가 포함됩니다. 3. B 프로젝트는 A 패키지가 제공하는 styled-components 컴포넌트를 사용합니다. 4. B 프로젝트는 위 컴포넌트뿐만 아니라, 서비스 내 스타일링을 위해 자체적으로 styled-components를 사용합니다. 문제 상황 개발 환경에서는 아무런 문제도 발생하지 않았습니다. A 패키지에서 styled-components를 사용한 react component(편의상 St.. 2024. 1. 16.
네트워크 기초 정리 (IP 주소, IPv4, Subnet-mask) IP 주소 IP 주소는 Host에 대한 식별자를 의미합니다. 이때 Host는, 인터넷에 연결될 컴퓨터를 의미합니다. IP 주소는 IPv4와 IPv6라는 두 버전이 존재합니다. 두 버전의 가장 큰 차이는 → 주소 길이! (IPv4 : 32bit 주소 체계, IPv6 : 128bit 주소 체계) IPv4 현재 가장 보편적으로 사용되고 있는 IP 버전입니다. 터미널창에 윈도우 기준 ipconfig, 맥 기준 ifconfig 명령어를 통해 자신의 IP주소를 확인할 수 있습니다. IP 주소는 . 을 기준으로 8bit씩 끊어서 표현합니다. (즉 각 자릿수에는 0에서 255까지의 숫자가 가능합니다) Subnet-mask (Net-mask) Subnet-mask는 IPv4에서 network ID의 길이를 의미합니다. .. 2024. 1. 10.
이벤트 캡처링(Event Capturing)을 통한 이벤트 우선 순위 제어 이벤트(Event) 이벤트는 사용자의 행동이나 브라우저 자체에서 발생하는 사건을 의미합니다. 모든 DOM node는 특정한 이벤트를 만들어내며, 키보드 입력, 마우스 움직임 등이 대표적인 예시입니다. 이벤트 발생 시 브라우저는 이벤트 객체 를 생성합니다. 각 이벤트는 이벤트 객체에 의해 표현되며 해당 객체는 이벤트에 대한 상세한 정보를 포함합니다. 이벤트 흐름(Event Flow) 이벤트는 보통 세 단계로 진행됩니다. 캡처링 단계 (Capture Phase): 이벤트가 최상위(루트) 요소에서 시작하여 대상 요소로 향하는 단계입니다. 타겟 단계 (Target Phase): 이벤트가 실제 대상 요소에 도달하는 단계입니다. 버블링 단계 (Bubble Phase): 이벤트가 대상 요소에서 시작하여 최상위(루트).. 2024. 1. 9.
react-dom의 root.render()를 여러 번 호출하면 어떤 일이 생길까? 현재 회사에서 chrome extension을 React를 사용해 개발하고 있다. extension에서는 manifest.json의 content_scripts를 통해, 실행 시 자동으로 js 파일을 동작하게 할 수 있다. → 실행할 content-sciprts 파일에서 react를 사용해 페이지를 그려주면 되는 것. // content-script.ts import React from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const rootElement = document.createElement("div"); document.body.appendChild(rootElement); const ro.. 2024. 1. 4.
네트워크 기초 정리 컴퓨터의 세 가지 구성요소 컴퓨터는 세계는 크게 세 가지 계층으로 구분할 수 있다. → 애플리케이션 수준의 User 계층 / OS 수준의 Kernal 계층 / 물리적 기기 수준의 HardWare 계층 이때 각 네트워크 요소들을 OSI 7 계층의 관점에서 원론적으로 접근하기보다(Abstract), 해당 추상에 대한 구현(Implement)에 집중할 필요가 있겠다. (학습 단계에서는!) (ex TCP/IP, HTTP) User process Kernal TCP IP Driver H/W NIC (Network Interface Card, LAN 카드) User 단계의 Process, 그 밑에 kernal 단계의 프로토콜이 구현되어 있다. 이때 전송/네트워크 계층의 추상을 구현한 것이 → TCP/IP가 되는 것.. 2024. 1. 2.
XState Visualizer 활용하기 XState란?→ 유한 상태 머신(Finite State Machine, FSM)을 구현하고 관리하기 위한 Javascript 및 Typescript 라이브러리! FSM는 시스템이 여러 상태 간에 전이할 수 있는 동작을 정의하는 모델링 도구로 사용되는데, XState는 이러한 상태 머신을 사용해 복잡한 상태 및 이벤트 기반 로직을 간결하게 구현하고 유지 보수할 수 있게 해 준다. FrontEnd 개발 시 상태 관리, UI 논리 제어, 이벤트 핸들링과 같은 상황에서 사용이 가능하며... 2023.10.11 - [source-code/FrontEnd] - 유한 상태 기계를 통한 사용자 선택 UI 개발 (feat xState) 유한 상태 기계를 통한 사용자 선택 UI 개발 (feat xState)프론트엔드 개.. 2024. 1. 1.
[python] pdf 파일 내 특정 키워드 찾아 추출하기 pdf 파일을 순회하면서, 파일 내 텍스트를 추출하고자 했다. PyMuPDF 패키지 설치 pip install PyMuPDF pdf 파일 읽기 import fitz # PyMuPDF pdf_path = './file_name.pdf' pdf_document = fitz.open(pdf_path) 다음과 같이, 해당 경로의 pdf 파일에 접근할 수 있다. 해당 파일의 텍스트를 읽기 위해서는 import fitz # PyMuPDF pdf_path = './file_name.pdf' pdf_document = fitz.open(pdf_path) page_index = 0 # 페이지 번호 (0부터 시작) page = pdf_document[page_index] text = page.get_text() 각 pag.. 2023. 12. 5.
프로그래머스 - 전화번호 목록 https://school.programmers.co.kr/learn/courses/30/lessons/42577 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 아래와 같은 흐름으로 접근을 시작했다. 1. 긴 전화번호는 짧은 번호의 접두사가 될 수 없으므로, 번호의 길이 순으로 정렬한다. 2. 이중 for문을 돌며 i번째 전화번호와 그 이후 index의 전화번호들을 비교한다. 3. startsWith 메서드를 통해 i번 째 전화번호로 시작하는 번호가 있을 경우 false, 이외에는 true를 반환한다. function solution(phone_book).. 2023. 12. 3.
JS 종료 시점 제어되는 ScrollIntoView 구현하기 요구 사항은 다음과 같다. 1. xPath를 통해 target HTMLElement를 조회한다. 2. target element가 존재할 경우, 해당 요소 옆에 툴팁을 띄운다. 3. 툴팁 클릭 시 다음 툴팁으로 이동한다. (1 반복) 3-1. 다음 target element가 스크롤로 인해 화면에 보이지 않을 경우, 해당 요소가 가운데 오게끔 자동으로 스크롤한다. 3-2. 이때 스크롤이 진행되는 동안 이전 툴팁은 보이지 않고, 스크롤 이동 종료 후 다음 툴팁이 뜬다. 3-1, 3-2에 대한 기능을 구현해 볼 예정! 일반적인 자동 스크롤 대부분의 자동 스크롤 로직은 1) 이벤트 발생 시 최하단으로 자동 스크롤 (ex 채팅방) 2) 특정 요소가 화면 상에 계속해서 보이도록 자동 스크롤 (ex 스크롤 포커싱).. 2023. 12. 1.
728x90
반응형

티스토리툴바