HOME
[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 수정 비용을 줄이기 위해 수행하는 작업을..
[TS] TypeScript 타입스크립트 satisfies 연산자
[TS] TypeScript 타입스크립트 satisfies 연산자
2024.05.16타입스크립트 4.9 버전부터 안전한 *업캐스팅을 지원하는 satisfies 연산자를 사용할 수 있다. satisfies 연산자를 활용하면 타입을 변경하지 않고도 변수에 *제약 조건(constraint)을 적용할 수 있다. 즉, 객체 프로퍼티에 제약 조건을 적용하면서 각 프로퍼티의 타입을 올바르게 추론할 수 있다. 💡 용어 설명캐스팅 : 타입 변환업캐스팅 : 자식 클래스를 부모 클래스 타입으로 캐스팅 (상위 타입으로 변환)다운캐스팅 : 부모 클래스를 자식 클래스 타입으로 캐스팅 (하위 타입으로 변환)제약 조건 : 특정 타입이나 구조를 강제하여 코드의 안정성과 일관성을 보장하는 방법 문제아래 참가자 정보를 나타내는 attendee 객체가 있다. 객체를 선언하면 타입스크립트는 객체의 각 프로퍼티 타입을 자동..
[React/JS] Promise 프로미스를 활용한 UX 개선 — 턴 미루기
[React/JS] Promise 프로미스를 활용한 UX 개선 — 턴 미루기
2024.05.16동기 작업을 기다리는 프로미스프로미스는 모든 동기 작업을 완료한 후에 실행할 수 있다. 아래 예시에서 then 후속 처리 메서드에 넘긴 console.log는 절대 실행되지 않는다.// 코드 참고 via 오늘의 프로그래밍new Promise((resolve) => { console.log('1'); // 동기 영역 resolve('2');}).then(console.log); // 비동기 영역let i = 0;while (true) { i += 1;} 프로미스 생성자에 넘긴 콜백 함수는 동기적으로 처리하므로 콘솔에 1을 출력한다. resolve 함수가 실행되면 프로미스는 이행(fulfilled) 상태가 되고 결과 값과 함께 새로운 프로미스를 리턴한다. 그럼 then 후속 처리 메서드로 실행 턴이 넘..
[React] 리액트 Profiler 프로파일러의 Hook 순서
[React] 리액트 Profiler 프로파일러의 Hook 순서
2024.05.16리액트 컴포넌트의 리렌더링 원인을 파악할 때 리액트 개발자 도구의 Profiler(프로파일러) 탭을 활용한다. 만약 Profiler 탭에서 Hook 1 changed를 표시한다면, Hook 1은 Components 탭 → 해당 컴포넌트의 hooks 항목에서 1번째 내장 훅을(useState 등) 가리킨다. 이때 주의할 점은 Profiler에서 훅을 카운트할 때 useContext, 커스텀 훅은 생략한다는 것이다. 대신 커스텀 훅은 내부에 있는 모든 내장 훅(useContext 제외)을 카운트 한다. 예를 들어 내장 훅 1개와 커스텀 훅을 사용하는 컴포넌트가 있다고 가정해보자. 커스텀 훅 안에선 내장 훅 2개를 사용하고 있다. 그럼 이 컴포넌트의 훅 인덱스는 컴포넌트 내장 훅 1, 커스텀 훅 내장 훅 2,..
[DevTools] iPhone 아이폰 사파리에서 디버깅 / 콘솔 사용하기
[DevTools] iPhone 아이폰 사파리에서 디버깅 / 콘솔 사용하기
2024.05.16Safari 개발자 도구💡 아이폰 화면이 잠겨있을 땐 콘솔을 사용할 수 없다. ❶ 맥북 ⇄ 아이폰 USB 연결❷ 아이폰 설정 → Safari → 고급 → 체크❸ macOS 사파리 설정 → 고급 → 체크❹ macOS 사파리 상단 메뉴 → 개발자용 → 아이폰 기기 이름 → 아이폰 사파리에 열려있는 웹사이트 선택❺ macOS 사파리 콘솔 창에서 현재 연동중인 웹사이트의 속성 확인 iOS Simulator💡 Status bar(노치 영역), Nav bar, Tab bar(주소창 영역), Home indicator 같은 아이폰 UI를 그대로 표현하므로 실물 기기를 이용할 때 어떻게 보일지 확인할 수 있다. 설정을 완료한 후 Xcode 실행 없이 스포트라이트에서 Simulator를 검색한 후 바로 실행할 수..
[JS/React] input 필드에 숫자만 입력 허용하기 (한글 입력 방지)
[JS/React] input 필드에 숫자만 입력 허용하기 (한글 입력 방지)
2024.05.16text 타입일 때onKeyDown, onKeyPress 이벤트는 핸들러 안에서 e.preventDefault() 메서드를 호출하면 입력을 막을 수 있다. 하지만 한글을 포함한 CJK 문자(조합 문자)는 메서드를 호출해도 그대로 입력된다. 이 방법은 숫자나 영어 입력을 막을때만 유효하다. 아래 방법으로 해결할 수 있다.export default function App() { const OnKeyDown = (e) => { e.preventDefault(); }; return ( Only allow numbers in input Text Type );} 💡 React에선 onKeyDown → onKeyPress → onC..
[macOS] 터미널 고급 명령어(커맨드) 모음
[macOS] 터미널 고급 명령어(커맨드) 모음
2024.05.15슬립 모드 방지 : caffeinate💡 caffeinate 명령을 실행하는 동안 슬립 모드로 전환하지 않음(^ C 단축키로 명령 종료)# 슬립 모드 방지caffeinate# 지정한 초(seconds) 만큼 슬립 모드 방지caffeinate -u -t # 명시한 pid 프로세스가 종료되면 caffeinate 명령 자동 종료caffeinate -w # 주어진 명령어를 실행하고, 해당 프로세스가 종료될 때까지 슬립 모드 방지caffeinate 문서 변환기 : textutil💡 txt, html, rtf, doc, docx 포맷 지원# journal.doc 파일을 journal.html로 변환textutil -convert html journal.doc 스포트라이트 검색 : mdfind# 입력한 키워드(..