StyleSheetManager 하위 컴포넌트의 스타일 처리 방식을 설정하기 위한 모듈이다. iframe 안에 createPortal로 컴포넌트를 집어넣을 때, 컴포넌트와 관련된 스타일이 iframe 내부에 생기지 않아 페이지가 깨지는 현상 때문에 사용하였다. 스타일 적용할 컴포넌트를 StyleSheetManager로 감싸고 target에 ifr...

Youtube 동영상 불러오기 유투브 동영상을 가져오려면 iframe을 이용해야 한다. 유투브에서 공유 -> 퍼가기를 통해 html 코드를 얻거나, https://developers.google.com/youtube/youtube_player_demo 에서 옵션을 체크하여 코드를 얻을 수 있다. Youtube 동영상 컨트롤하기 크게 두 ...

Matplotlib 데이터를 그래프나 차트로 시각화 할 수 있는 라이브러리 그래프 그려보기 x = [1, 2, 3, 4, 5] y = [1, 2, 3, 4, 5] # 선 그리기 plt.plot(x, y) # 그래프 제목 추가 plt.title("First Plot") # x축 라벨 추가 plt.xlabel("x") # y축 라벨 추가 pl...

자꾸 까먹어서 메모 useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념하세요. .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다. React가 DOM 노드에 ref를 attach하거나 detach할 때 어떤 코드를 실행하고 싶다면 대신 콜백 ref를 사용하세요. 콜백 ref DOM 노드의 위치나 크기를...

Pandas Series, Dataframe과 같은 데이터 구조를 생성하고 변경할 수 있도록 도와주는 라이브러리 Array 계산에 특화된 NumPy를 기반으로 설계 Series Data와 Index를 가지고 있다. Numpy의 array는 명시적인 인덱스 없이 0부터 시작하는 인덱스 값을 가지지만 Series는 인덱스를 명시적으로 정할 수 있...

NumPy Python에서 대규모 다차원 배열을 다룰 수 있게 도와주는 라이브러리 아래처럼 모듈을 import 하여 사용한다. import numpy as np dtype dtype에 단일 타입을 입력할 수 있다. dtype을 전달하면 해당 타입으로 배열이 생성된다. dtype 설명 다양한...

location.search URL 뒤의 ?를 포함한 문자열 쿼리이다. 최신 브라우저에서는 쿼리 문자열에서 파라미터 값을 쉽게 찾을 수 있도록 URLSearchParams 및 URL.searchParams를 제공한다. URLSearchParams(location.search) location.search를 구문 분석하여 key-value 형태의...

onLoad 이벤트 핸들러 추가 리액트에서 onLoad를 통해 iframe이 로드되었을 때 이벤트를 실행할 수 있다. 참고로 iframe 내부에서 서버 에러가 발생해도 로드 되었다는 이벤트가 발생한다. <iframe onLoad="{handleOnLoadIframe}" /> iframe 내부 root 체크 contentDocume...

오류 나는 경우 리액트에서 ref를 props로 전달하기 위해서는 forwardRef를 사용해야 한다. forwardRef를 사용하지 않고 자식에게 ref를 전달하면 아래와 같은 에러가 발생한다. // App.jsx const ref = React.createRef(); <FancyButton ref={ref}>Click me!<...

MVC Model - View - Controller 구조의 디자인 패턴 사용자가 View를 조작하면(ex. 버튼 클릭) Controller가 Model을 업데이트하고, 다시 View를 변경한다. 위 그림을 좀 더 보충하자면 아래 그림처럼 Controller에서 View를 바로 변경하기도 한다. 보편적으로 많이 사용되는 패턴이며, Vi...