HOME
[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..
[CS] 오버헤드 / 프로세스 / 스레드
[CS] 오버헤드 / 프로세스 / 스레드
2024.05.18오버헤드오버헤드는 특정 작업을 수행하기 위해 간접 혹은 추가적으로 필요한 작업이나 비용을 의미한다. 여기서 비용은 컴퓨터의 처리 시간, 메모리 등을 말한다. 예를 들어 처리시간 10초가 필요한 A 기능에 안전성을 위한 부가기능 B를 추가한 결과 총 15초가 소요됐다면, 오버헤드는 5초가 된다. 오버헤드는 현실 세계에서 마트에 장보러 가는 것에 비유하면 더 쉽게 이해할 수 있다. 10만 원어치 물건을 구매하기(메인 작업 A) 위해 마트까지 가는 일(부가 작업 B)은 장보기에서 큰 부분을 차지하지 않는다. 하지만 껌 하나만 사기 위해(작업 A) 마트까지 간다면, 마트까지 이동하는 일(부가 작업 B)은 장보기에서 상대적으로 큰 부분을 차지한다. 이때 껌을 사기 위해 마트까지 가는 건 오버헤드가 너무 크다고 말..
[JS] 문장, 단어, 자소별로 문자열 분리하기
[JS] 문장, 단어, 자소별로 문자열 분리하기
2024.05.17split() 메서드의 문제점자바스크립트에서 문자열을 분리할 때 일반적으로 split() 메서드를 사용한다. 하지만 아래처럼 구분자는 결과 배열에서 제외되고 불필요한 공백이 추가된다. 즉, language-sensitive 하지 않는 단점이 있다. language-sensitive는 문맥에 맞는 표현과 용어 사용을 의미한다. 한국어로는 언어 감수성이라고 부른다. 'Hello! How are you?'.split(/[.!?]/);// ['Hello', ' How are you', ''] 💡 정규식 관련 참고표현식을 하나의 단위로 취급하는 포획 괄호를 사용하면 구분자도 결과 배열에 포함할 수 있다[] 문자 그룹은 대괄호 내부 문자열 중 하나라도 일치하는 경우를 의미한다 Intl 자바스크립트 API를 활용하..
[TS] 타입스크립트의 공변성 / 반공변성 / 이변성
[TS] 타입스크립트의 공변성 / 반공변성 / 이변성
2024.05.17TL;DR 엄격 모드비엄격 모드함수 리턴 타입공변적공변적함수 파라미터 타입반공변적이변적그 외공변적공변적공변성 : 슈퍼 타입(넓은 타입)이 서브 타입(좁은 타입)을 커버하는 관계서브 타입을 슈퍼 타입에 대입할 수 있음 e.g. superType = subType타입스크립트 기본 동작반공변성 : 서브 타입(좁은 타입)이 슈퍼 타입(넓은 타입)을 커버하는 관계슈퍼 타입을 서브 타입에 대입할 수 있음 e.g. subType = superType함수 파라미터 동작이변성 : 공변성과 반공변성을 모두 포함하는 관계슈퍼 타입과 서브 타입을 모두 대입할 수 있음strictFunctionTypes 옵션을 껐을 때 함수 파라미터 동작 공변성 | Covariance공변성 : A가 B의 서브 타입이면, T는 T의 서브 타입 아..
[React] 리액트에서 Rendering 렌더링이란?
[React] 리액트에서 Rendering 렌더링이란?
2024.05.16TL;DR마운트 : 컴포넌트가 최초로 DOM에 삽입되는 과정. 컴포넌트 생명 주기에서 한 번만 발생렌더 : 컴포넌트를 실행해서 변경사항을 계산(컴포넌트 출력 결정)하는 과정. 새로운 가상 DOM을 생성하고 이 새로운 가상 DOM과 이전 가상 DOM을 비교하여 실제 DOM에 반영할 변경사항 파악커밋 : 렌더 단계를 통해 파악된 변경사항들이 실제 브라우저 DOM에 적용되는 과정 렌더링이란일반적으로 렌더링(Rendering)은 아래 2가지 과정을 지칭한다. HTML / CSS / JS로 작성된 문서를 해석(파싱)해서 브라우저에 시각적으로 출력하는 과정서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정(SSR) 반면 리액트에서 말하는 렌더링은 브라우저 DOM 수정 비용을 줄이기 위해 수행하는 작업을..