chaeon1 님의 블로그

✉️ 기술 스택React, TypeScript, Zustand, Tiptap, DOMPurify, tailwindCSS, FlowbiteTiptap EditorTiptap Rich Text Editor - the Headless WYSIWYG Editor✔️ 쉽게 확장 가능✔️ ProseMirror 기반: 구조적 편집 가능✔️ 확장 기능 커스터마이징 가능✔️ 공식 문서 설명이 잘 되어 있어서 따라하기 편함커스터마이징 에디터 구성✏️ 에디터 설정필요한 extension (StarterKit, Underline, Highlight) 선택적으로 추가prose 기반 스타일링 적용debounce 적용으로 입력 최적화const editor = useEditor({ editorProps: { attribute..

46장 제너레이터와 async/await46.1 제너레이터란?제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.46.2 제너레이터 함수의 정의function* 키워드로 선언, yield 표현식 포함선언문, 표현식, 메서드, 클래스 메서드 형태화살표 함수로 정의 불가new 생성자로 호출 불가46.3 제너레이터 객체일반 함수: 호출 시 코드 블록 실행제너레이터 함수: 호출 시 제너레이터 객체 생성 후 반환제너레이터 객체는 이터러블이면서 동시에 이터레이터Symbol.iteratornext: 호출 시 yield까지 실행하고 { value, done } 객체 반환return:..

41장 타이머41.1 호출 스케줄링함수 호출 지연, 반복 예약 가능타이머 함수: 호스트 객체setTimeout: 일정 시간 후 한 번만 실행setInterval: 일정 시간 간격으로 반복 실행자바스크립트는 싱글 스레드로 동작하므로 타이머는 비동기 처리41.2 타이머 함수setTimeout / clearTimeoutconst timeoutId = setTimeout(func|code[, delay, param1, param2, ...]);매개변수설명func타이머가 만료된 뒤 호출될 콜백 함수delay타이머 만료 시간(ms). setTimeout 함수는 delay 시간으로 단 한 번 동작하는 타이머를 생성한다. 인수 전달을 생략한 경우 기본값 0이 지정된다.param1, param2, ...호출 스케줄링된 ..

36장 디스트럭처링 할당배열이나 객체에서 값을 추출해 변수에 개별적으로 할당하는 문법이터러블 또는 객체 리터럴에서 필요한 값만 뽑을 때 유용36.1 배열 디스트럭처링 할당기본 문법const [a, b] = [1, 2];인덱스 기준으로 순서대로 할당할당 대상은 반드시 이터러블에러 예시: const [x, y] = {}; // TypeError변수 수와 요소 수의 일치는 필요하지 않음부족 시 undefined, 초과 시 무시기본값 설정 가능const [a, b = 10] = [1]; // a:1, b:10Rest 요소 사용 가능const [x, ...y] = [1, 2, 3]; // x:1, y:[2,3]예시 활용: URL 파싱 시 필요한 값만 추출36.2 객체 디스트럭처링 할당기본 문법const { key..