HOME
[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# 입력한 키워드(..
[macOS] 맥에서 Windows 설치(부팅) USB 만들기
[macOS] 맥에서 Windows 설치(부팅) USB 만들기
2024.05.15얼마 전 Windows 11 부팅 USB를 사용할 일이 생겼다. 윈도우를 사용한다면 공식적으로 제공되는 설치 미디어 만들기(Windows Media Creation Tool) 도구를 사용하면 쉽게 만들 수 있지만, 아쉽게도 맥(macOS) 사용자를 위한 도구는 따로 제공하지 않는다. 패러렐즈(Parallels)로 윈도우 설치 미디어 만들기 도구를 실행해 봤지만 USB를 인식하지 못하는 문제가 있었다. 그러던 중 WinDiskWriter라는 유용한 도구를 발견해서 소개해볼까 한다. 가장 눈에 띄는 기능은 TPM 우회와 설치 이미지 자동 분할이다. 맥에 내장된 디스크 유틸리티는 기본적으로 HFS+, FAT32, ExFAT만 지원하며, 윈도우에서 사용하는 NTFS 형식의 포맷은 읽을 수는 있지만 쓰기를 지원..
[JS] Promise 프로미스 병렬처리 메서드 톺아보기
[JS] Promise 프로미스 병렬처리 메서드 톺아보기
2024.05.14TL;DR💡 처리(settled) 상태는 이행(fulfilled) 또는 거절(rejected) 상태를 모두 포함한다. Promise.all : 모든 프로미스가 이행되어야만 처리 결과를 배열로 반환한다. 프로미스가 하나라도 거절되면 전체가 거절된다.Promise.allSettled : 모든 프로미스가 처리(이행 또는 거절)될 때까지 기다린 후 결과를 배열로 반환한다.Promise.race : 가장 먼저 처리(이행 혹은 거절) 상태가 된 프로미스 처리를 반환한다.Promise.any : 프로미스 중 하나라도 이행되면 해당 값을 반환한다. 모든 프로미스가 거절되면 거절 이유를 담은 AggregateError를 반환한다. Promise.all💡 프로미스 후속 처리 메서드를 이용한 체이닝은 순차적 처리, P..
[JS] 타입 이름을 반환하는 getType 유틸 함수
[JS] 타입 이름을 반환하는 getType 유틸 함수
2024.05.14value를 인자로 받아 해당하는 타입 이름(소문자)을 반환하는 getType 함수. 프로젝트 공통 유틸리티 파일에 추가해두고 사용하면 유용하게 쓸 수 있다.const getType = (value: any) => { if (value === undefined) return 'undefined'; if (value === null) return 'null'; return value.constructor.name.toLowerCase();};getType(8); // 'number'getType([8]); // 'array'getType(() => {}); // 'function'getType('8'); // 'string'getType({ id: 8 }); // 'object'getType(new ..