몽환화

https://react.dev/reference/react/Suspense – React" data-og-description="The library for web and native user interfaces" data-og-host="react.dev" data-og-source-url="https://react.dev/reference/react/Suspense" data-og-url="https://react.dev/reference/react/Suspense" data-og-image="https://scrap.kakaocdn.net/dn/k1erZ/hyYG4DfTY9/09KSOXc0YxgEKJPtKc7hf0/img.png?width=1080&height=567&face=0_0_1080_56..

사실 이번에는 물고뜯기까지는 못하고 앙 물어보기만 해서 물고뜯기라고 못함 그냥 시작해보자고  모종의 이유로 드래그앤드롭을 활용할 일이 매우 많아졌습니다.. 그리고 주로 사용하는 라이브러리가 바로 이react-beautiful-dnd 였기에 공부를 해보았어요사실 냅다 적용부터 해보고 뒤늦게 공부중; 이럴줄 알았으면 토이플젝때 투두리스트 내가맡을걸! 아무튼 시작https://github.com/atlassian/react-beautiful-dnd GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with ReactBeautiful and accessible drag and drop for lists ..

먼저 내부 슬롯 interneal slot과 내부 메서드 internal method란?자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드.ECMAScript 사양에 등장하는 이중 대괄호 ([[...]]) 로 감싼 이름들이 내부 슬롯과 내부 메서드 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아님내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직으로 원칙적으로 접근이나 호출 불가그러나 일부 내부 슬롯과 내부 메서드에 한해 간접적으로 접근할 수 있는 수단 제공  자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함프로퍼티의 상태 : 값, 값의 갱신 여부, 열거..

방향을 거스르지 않으면서 순서대로 방문하는 것을 위상정렬이라고 한다.유향 그래프의 정점들을 변의 방향을 거스르지 않도록 나열하는 것!순서가 정해져 있는 작업들을 차례대로 수행해야 할 때, 그 순서를 결정해주는 알고리즘이다.유향 그래프의 구조에 따라 여러개의 종류가 나올 수 있다. 사이클이 존재하면 안된다=> 위상 정렬이 불가능하다? 사이클이 존재한다 BFS 사용하기1. 진입 차수가 0인 노드를 모두 큐에 넣는다.=> 진입 차수가 0 : 해당 정점을 가리키는 정점이 없다. 즉 순서의 시작이 되는 놈이다.2. 큐에서 진입 차수가 0인 노드를 꺼내 자신과 인접한 노드의 간선을 제거한다.=> 인접한 노드의 진입 차수를 1씩 감소시킨다.3. 간선 제거 후 진입 차수가 0이 된 노드가 있다면 큐에 넣는다.4. 큐가..

페이스북에서 만든 상태 관리 라이브러리리액트 훅의 개념으로 상태 관리를 시작한다아직 1.0.0 버전이 출시되지 않았다...  Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태 값을 동기 또는 비동기 방식을 통해 변환한다.  ~기본적인 사용법~RecoilRoot를 선언해 스토어를 만들고 atom이라는 상태 단위를 만들어 스토어에 등록한다.이 atom들을 key값으로 구별해 atom의 상태 변화를 구독하고 값이 변경되면 forceUpdate를 통한 강제 렌더링으로 최신 atom값을 가져오게 한다.  R..

https://www.acmicpc.net/problem/1107문제수빈이는 TV를 보고 있다. 수빈이는 채널을 돌리려고 했지만, 버튼을 너무 세게 누르는 바람에, 일부 숫자 버튼이 고장났다.리모컨에는 버튼이 0부터 9까지 숫자, +와 -가 있다. +를 누르면 현재 보고있는 채널에서 +1된 채널로 이동하고, -를 누르면 -1된 채널로 이동한다. 채널 0에서 -를 누른 경우에는 채널이 변하지 않고, 채널은 무한대 만큼 있다.수빈이가 지금 이동하려고 하는 채널은 N이다. 어떤 버튼이 고장났는지 주어졌을 때, 채널 N으로 이동하기 위해서 버튼을 최소 몇 번 눌러야하는지 구하는 프로그램을 작성하시오.수빈이가 지금 보고 있는 채널은 100번이다. 입력첫째 줄에 수빈이가 이동하려고 하는 채널 N (0 ≤ N ≤ 5..

문제상근이의 여동생 상냥이는 문방구에서 스티커 2n개를 구매했다. 스티커는 그림 (a)와 같이 2행 n열로 배치되어 있다. 상냥이는 스티커를 이용해 책상을 꾸미려고 한다.상냥이가 구매한 스티커의 품질은 매우 좋지 않다. 스티커 한 장을 떼면, 그 스티커와 변을 공유하는 스티커는 모두 찢어져서 사용할 수 없게 된다. 즉, 뗀 스티커의 왼쪽, 오른쪽, 위, 아래에 있는 스티커는 사용할 수 없게 된다.모든 스티커를 붙일 수 없게된 상냥이는 각 스티커에 점수를 매기고, 점수의 합이 최대가 되게 스티커를 떼어내려고 한다. 먼저, 그림 (b)와 같이 각 스티커에 점수를 매겼다. 상냥이가 뗄 수 있는 스티커의 점수의 최댓값을 구하는 프로그램을 작성하시오. 즉, 2n개의 스티커 중에서 점수의 합이 최대가 되면서 서로 ..

useLayoutEffect 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect하하하하하하 그래도 알아보긴 하자  기본적인 사용 방식은 useEffect와 같다컴포넌트의 최상위 레벨에서 또는 자체 훅에서만 호출할 수 있다. 예시)대부분의 컴포넌트는 무엇을 렌더링할지 결정하기 위해 화면에서의 위치와 크기를 알 필요까지는 없다!  그러나 가끔 예외의 경우가 존재하는데, 마우스오버 시 요소 옆에 툴팁을 표시하는 경우 등이 있다. 공간이 충분하다면 툴팁이 적당히 표시되면 되지만, 공간이 충분하지 않다면 툴팁을 아래에 표시하는 등 위치를 변경할 필요성이 있다. 이를 위해서 툴팁의 렌더링을 위해 화면에서의 위치를 알아야 한다. 순서는 다음과 같다 툴팁을 원하는 위치에 렌더링한다(위치가 잘못된 경우..

useImperativeHandle컴포넌트의 최상위 레벨에서 useImperativeHandle을 호출해 노출할 ref핸들을 사용자가 직접 정의할 수 있다  import { forwardRef, useImperativeHandle } from 'react';const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { return { // ... your methods ... // ... 메서드는 여기에 작성합니다 ... }; }, []); // ...useImperativeHandle(ref, createHandle, dependencies?) ref : forwardR..

타입스크립트 TypeScript: 기본 자바스크립트 문법에 타입을 가미한 것뭔가 파란색을 써야할 것 같ㅇ ㅏ 자바스크립트타입스크립트동적 타입 언어정적 타입 언어인터프리터 언어컴파일 언어(자바스크립트로 컴파일됨)런타임 단계에서 오류 발견컴파일 단계에서 오류 발견 자바스크립트 => 동적 타입 언어로 코드를 실행했을 때인 런타임 단계에서야 오류를 발견할 수 있다타입스크립트 => 정적 타입 언어, 컴파일 단계에서 타입을 검사하기 때문에 실행 전 오류를 발견할 수 있다인터프리터 언어가 아닌 컴파일 언어이다 동적 타입 : 변수의 타입이 런타임 시점에 결정되는 것인터프리터 언어 : 코드를 한줄한줄 읽어가며 바로 명령을 처리하며 컴파일 변환 없이 바로 사용되는 언어 타입스크립트는 결국 자바스크립트로 컴파일해서 사용하는..