HOME
[Algorithm] 복잡한 DOM 예제로 보는 DFS 탐색 알고리즘
[Algorithm] 복잡한 DOM 예제로 보는 DFS 탐색 알고리즘
2024.05.22목표아래 DOM 구조에서 가장 안쪽 요소부터 시작해 부모 요소로 갈 수록 중첩 레벨이 1씩 늘어나고, class에 대응하는 dataset에 중첩 레벨 값을 할당해야 한다. 예를들어 class가 "clause" 이고, 해당 요소의 중첩 레벨이 2라면 data-clause-lv="2" 속성을 할당한다. Hello ; 만약 자식 요소가 2개 이상일 땐 자식 요소들중 중첩 레벨이 가장 높은 값 + 1이 부모 요소의 중첩 레벨이 된다. 아래 예시를 기준으로 1번째 자식의 중첩 레벨(data-word-lv="1") 보다, 2번째 자식의 중첩 레벨(data-phrase-lv="2")이 더 높으므로, 부모 요소의 중첩레벨은 3이 된다(data-clause-lv="3"). ..
[Algorithm] 데이터 추가, 삭제, 정렬로 보는 BFS / DFS 탐색 알고리즘
[Algorithm] 데이터 추가, 삭제, 정렬로 보는 BFS / DFS 탐색 알고리즘
2024.05.21예시 데이터단어 혹은 문장부호(' 아포스트로피 제외)를 기준으로 분리한 토큰 인덱스 정보가 담기는 Part 객체가 있다. 이 Part 객체는 child 배열을 가지며, child 배열의 각 요소인 Part는 부모 Part의 토큰 인덱스 범위 내의 인덱스를 가진다. 예를들어 부모 Part의 토큰 인덱스 범위가 2~13이라면 자식 Part의 토큰 인덱스는 3~13(3~13, 4~13, ...) 혹은 2~12(2~12, 2~11, ...) 범위를 가진다.[ // parts 배열 { id: 0, // part begin: 2, end: 13, kc: [{ id: 'kc-1', /* ... */ }], child: [ // parts 배열 { id: 1, // ..
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
2024.05.21아래와 같은 문자열이 있을 때 마우스로 드래그해서 텍스트를 선택할 때마다 태그로 감싸도록 구현하는 게 목표. Pharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissim 드래그한 문자열 랩핑❶ 마우스 클릭/텍스트 드래그/클릭 해제 → onMouseUp 이벤트 호출 ❷ 선택한 영역에 대한 Selection 객체 획득const selection =..
행운의 면적
행운의 면적
2024.05.20왜 어떤 사람들은 항상 운이 좋아 보일까? 행운이란 무엇일까? 행운의 면적이라는 개념에 대해 알아보자.행운의 면적 = 했던 일 x 했던 일을 아는 사람의 수 우수한 재능 있음에도 이를 펼칠 기회를 마주하지 못하는 사람들이 많다. 이는 100가지 일을 했지만 그것을 아는 사람은 1명에 불과하기 때문일 수 있다. 지금 해야 할 일은 “100가지 일을 함과 동시에 100명, 1000명에게 알리는 것”이다. Via Koji
[React] 리액트 동시성 렌더링(Concurrent) 톺아보기
[React] 리액트 동시성 렌더링(Concurrent) 톺아보기
2024.05.20사용자가 사용하는 UI는 여러 부분으로 구성되어 있다. 일반적으로 폼 입력 필드는 상호 작용에 즉각적으로 응답하지만, 많은 양의 필터링 목록 같은 부분은 응답하는데 오랜 시간이 소요될 수 있다. React는 기본적으로 동기적인 방식으로 렌더링하는데, UI의 느린 작업(필터링 목록 등)이 다른 빠른 작업(입력 폼 등)을 차단하여 응답이 느려지는 현상이 발생한다. 💡 Render-blocking: Concurrent 기능을 사용하지 않을 때 React는 컴포넌트를 동기적으로 렌더링 하며, 렌더링을 시작하면 예외가 아닌 이상 렌더링을 중단할 수 없다. 즉, 렌더링이 끝나야만 다른 작업을 수행할 수 있다. React 18 버전에 공개한 Concurrent 기능은 이런 문제를 해결하기 위해 개발됐다. Concu..
[Express] req.query vs req.params
[Express] req.query vs req.params
2024.05.19Path Parameter : /books/888 (888 부분이 파라미터)Query Parameter : /search?sort=price (sort=price 부분이 쿼리) 쿼리 스트링(Query String)은 /search?sort=price 주소에서 ? 물음표 이후에 나오는 전체 문자열을 의미하고, 쿼리 파라미터(Query Parameter)는 쿼리 스트링 내의 key=value 쌍을 의미한다. req.params// 요청 URL : /books/888router.get('/books/:id', (req, res, next) => { console.log(req.params); // { id: '888' }}); req.query// URL-encoded 데이터 파싱은 주로 폼 데이터를 제출할..
[JS] 함수형 / 객체 지향 프로그래밍의 닮은 꼴
[JS] 함수형 / 객체 지향 프로그래밍의 닮은 꼴
2024.05.19커링함수형 프로그래밍에서 자주 사용하는 커링 함수는 n개의 인자를 받는 대신 n개의 함수를 만들어서 하나의 인자만 받도록 만드는 패턴이다. 커링을 사용하면 복잡한 함수를 간결하게 만들고, 재사용할 수 있는 함수로 분리할 수 있다. 또한, 지연 평가(필요할 때까지 계산/평가를 미루는 전략)를 통해 유연한 작업을 수행할 수 있다.// 일반 함수const adder = (x, y) => x + y;adder(100, 50); // 150// 커링 함수const adder = (x) => (y) => x + y;const add100 = adder(100);add100(50); // 150 객체 지향 / 일반 함수 / 함수형 비교💡 객체 지향 / 함수형 프로그래밍 각각 다른 방법으로 암시적인 컨텍스트 갖는다...
[TS] TypeScript 타입스크립트 Infer 키워드 활용하기
[TS] TypeScript 타입스크립트 Infer 키워드 활용하기
2024.05.19타입스크립트 infer는 타입을 추론하는데 사용하는 키워드다. 배열 요소 타입, 함수 파라미터 타입, 함수 반환 타입 등 특정 문맥의 타입 추출이 필요할 때 infer를 활용할 수 있다.기본 문법 : T extends infer U ? U : T — U가 추론 가능한 타입이면 U 리턴, 아니면 T 리턴 infer는 타입 구현 영역(할당 연산자 우측)의 조건부 타입(extends 절)에서만 사용할 수 있으며, TS 엔진이 타입을 추론하고 변수(제네릭 타입)에 할당한다. 할당된 변수는 조건부 타입의 true 분기에서만 사용할 수 있다.// Error! 'infer' declarations are only permitted in the 'extends' clause of a conditional type.(t..
[JS] JavaScript 자바스크립트 Map 더 잘 사용하기
[JS] JavaScript 자바스크립트 Map 더 잘 사용하기
2024.05.19Map은 key, value로 이루어진 순서가 있는 컬렉션이다. 삽입 순서를 기억하며 key/value 추가/제거가 빈번할 때 객체보다 더 좋은 성능을 가진다 MDN - Map 페이지를 보면 아래와 같이 적혀있다.Map: 키-값 쌍의 빈번한 추가 및 제거와 관련된 상황에서는 성능이 좀 더 좋습니다.Object: 키-값 쌍의 빈번한 추가 및 제거에 최적화되지 않았습니다. 실제로 랜덤 숫자 10,000개로 구성된 객체를 추가/삭제할 때 Map은 901 ops/s, 객체는 183 ops/s로 측정된다. 즉, 1초 동안 Map은 901번의 작업을 처리하고, 객체는 183번의 작업을 처리한다. Map이 일반 객체보다 거의 4~5배 가량 빠르다는 것을 의미한다. 물론 이 벤치마크를 100% 신뢰할 수 없지만 key..
[macOS] ChatGPT 공식 데스크톱 앱 사용 방법 (접근 권한 없어도 가능)
[macOS] ChatGPT 공식 데스크톱 앱 사용 방법 (접근 권한 없어도 가능)
2024.05.18얼마 전 OpenAI에서 GPT-4o 모델과 함께 macOS 전용 공식 데스크톱 앱을 공개했다(Windows용은 추후 공개). 하지만 현재로선 Plus 요금제를 사용하는 유저 중에서도 접근 권한이 부여된 계정만 데스크톱 앱을 사용할 수 있다(2024-05-18 기준). Public으로 공개된 데스크톱 앱을 다운로드하고 로그인하면...You do not have access to the desktop app yet. You can still use ChatGPT at chatgpt.com 위 메시지 팝업이 표시되고 자동 로그아웃 된다. 아마 Usage Tier가 높은 사용자부터 순차적으로 권한을 풀어주는 게 아닌가 싶다. 참고로 필자 계정은 Tier 3이다. 아쉬워하던 도중 아직 접근 권한을 받지 못한 ..
[CS] 동기 / 비동기, 블로킹 / 논블로킹
[CS] 동기 / 비동기, 블로킹 / 논블로킹
2024.05.18A 함수(호출자)가 B 함수(피호출자)를 호출하는 상황이라고 가정❶ 동기/비동기: 호출자(A)가 피호출자(B)의 처리 결과를 기다리는지 여부동기: 피호출자의 처리 결과를 받아서 다음 작업 수행 → 호출자/피호출자 순차적 수행A는 B 작업이 끝날 때까지 다른 작업을 수행하지 않고 B의 반환값을 기다림 비동기: 피호출자의 처리 결과를 기다리지 않고 다음 작업 수행 → 호출자/피호출자 동시 수행B가 작업을 완료하면 콜백 함수 호출 (혹은 프로미스 활용) ❷ 블로킹/논블로킹: 호출자(A)가 피호출자(B)에게 제어권 전달 여부블로킹: 피호출자에게 제어권 전달 → 피호출자가 작업을 완료할 때까지 대기A가 B를 호출하여 제어권 전달 후, B의 작업 완료를 기다림 논블로킹: 피호출자에게 제어권 전달 안함 → 호출자는 ..
[JS] 정규식의 그룹화(Grouping) / 캡처화(Capturing) 활용하기
[JS] 정규식의 그룹화(Grouping) / 캡처화(Capturing) 활용하기
2024.05.18그룹화 / 캡처화그룹화 Grouping정규식에서 그룹화는 특정 문자들을 단일 표현식(Single Entity)으로 구분하기 위해 사용한다. 그룹화는 보통 캡처링과 함께 사용하므로 이 둘을 함께 알아두는 것이 좋다. 아래 예시에서 사용한 + 수량자는 1번 이상 반복하는 문자열을 찾는다. 따라서 ab(b 1번 일치), abb(b 2번 일치) 등을 모두 일치한다고 판단한다.const str = 'aabbbababaabb';str.match(/ab+/g); // ['abbb', 'ab', 'ab', 'abb'] 특정 문자 그룹의 반복 여부를 판단하려면 소괄호()를 사용해 그룹화하면 된다. 그룹화하면 괄호 안 문자를 하나의 단일 표현식으로 정의한다. 아래 예시에선 (ab)로 묶었으므로 ab가 1번 이상 반복되는 ..