HOME
[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번 이상 반복되는 ..
[React] 대수적 효과 Algebraic Effect
[React] 대수적 효과 Algebraic Effect
2024.05.18TL;DR정의부수 효과를 추상화하는 방식 중 하나부수 효과를 발생시키는 연산(Effect)과 그 연산을 처리하는 핸들러(Effect Handler)로 구성코드 관리 방식코드 조각을 감싸는 맥락(context)으로 책임 분리특정 컴포넌트를 감싸는 부모 컴포넌트에게 역할 위임React에서 대수적 효과 — Suspense, ErrorBoundary로딩 UI, 에러 표시 역할을 특정 컴포넌트로 감싸는 형태로 분리자식 컴포넌트에서 발생한 부수 효과를 부모 컴포넌트에서 캐치하고 처리대수적 효과의 장점순수하지 않은 동작에 대한 책임 분리선언적(declarative) 코드 작성 가능What과 How를 분리하여 코드 가독성과 유지보수성 향상 대수적 효과란?대수적 효과는 부수 효과를 다루는 방식 중 하나로, 부수 효과를 ..
[Git] 1Password에 저장한 SSH 키로 Git 커밋 서명하기
[Git] 1Password에 저장한 SSH 키로 Git 커밋 서명하기
2024.05.18Git 2.34 이후 버전부터 SSH 키를 이용한 커밋 / 태그 서명을 지원한다. 1Password SSH 통합 기능을 사용하고 있다면 GPG 키 없이 1Password 앱에서 Git 커밋 서명을 자동으로 구성할 수도 있다. 커밋을 서명하면 GitHub 계정에 연결된 SSH 공개키로 실제 사용자가 변경한 내용인지 검증 할 수 있다. 그럼 다른 사람의 서명하지 않은 커밋을 방지할 수 있다.GPG(Gnu Privacy Guard)는 GNU 프로젝트에서 개발한 오픈소스 암호화 소프트웨어다. 공개키 암호화 방식을 사용하며, 암호화, 서명, 인증 등의 기능을 제공한다. 요구 사항1Password 버전 8이상의 데스크톱 앱Git 2.34 혹은 이후 버전1Password SSH Agent 활성 (참고 포스팅)1Pas..