자바스크립트 엔진은 `싱글 스레드`이기 때문에, 명시적으로 함수를 호출하면 동기적으로 실행되어 해당 함수가 종료될 때까지 다른 작업을 수행할 수 없다. 하지만, 일정한 시간이 경과된 후에 실행되도록 하는 타이머 함수를 사용하면 비동기적으로 함수를 실행할 수 있다. 이를 호출 스케줄링이라고 한다.자바스크립트는 타이머를 생성할 수 있는 타이머 함수 `setTimeout`과 `setInterval`, 타이머를 제거할 수 있는 타이머 함수 `clearTimeout`과 `clearInterval`을 제공한다. 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니라 브라우저 환경과 Node.js 환경에서 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체(실행 환경에서 제..
1. BEM이란?BEM(Block, Element, Modifier)은 CSS 클래스 네이밍 방법론으로, 코드의 가독성과 유지보수를 높이는 데 도움을 준다. 각 개념은 다음과 같다.Block : 독립적인 요소 (예: button, card, header)Element : Block 내부의 구성 요소 (예: button__icon, card__title)Modifier : Block이나 Element의 상태나 스타일 변형 (예: button--primary, card__title--large) 2. Styled Components와 BEMStyled Components는 `CSS-in-JS 방식`으로 스타일을 작성하는 라이브러리다. BEM을 적용하면 스타일 구성과 컴포넌트 구조를 명확하게 정리할 수 있다..
TiptapTiptap은 Headless WYSIWYG(What You See Is What You Get) 에디터로, 웹에서 텍스트 편집 기능을 구현할 때 사용하는 라이브러리특징ProseMirror 기반Tiptap은 ProseMirror 위에서 동작하며, 이를 보다 쉽게 사용할 수 있도록 래핑한 라이브러리ProseMirror 자체는 강력하지만 설정이 복잡한데, Tiptap은 이를 쉽게 활용할 수 있도록 API를 제공Headless기본 UI가 제공되지 않으며, 개발자가 원하는 대로 커스터마이징할 수 있음버튼, 툴바 등의 UI는 직접 구현해야 하지만, 덕분에 원하는 디자인을 자유롭게 적용확장성플러그인(Extensions) 형태로 기능을 추가할 수 있음기본 제공되는 확장(볼드, 기울임, 링크 등) 외에도 직..
프로젝트에서 필요한 마인드맵을 구현하기 위해 라이브러리를 찾던 중 가장 적합한 라이브러리에 대해서 학습한 내용을 정리하고자 한다. 요구사항노드의 크기가 3개 이상일 것엣지 커스텀 유무데이터를 자유롭게 추가, 삭제 가능마인드맵 라이브러리다양한 라이브러리를 찾아봤는데 커스텀에 용이하고 대규모 그래프를 위한 레이아웃 엔진을 제공하는 `Cytoscape`로 선정했다. Cytoscape(Github / Cytoscape.js)대규모 그래프를 위한 레이아웃 엔진 내장그래프 데이터 구조와 스타일을 JSON 형식으로 관리 가능복잡한 노드 스타일링과 인터랙션 지원Cytoscape 라이브러리기본 세팅1. next 프로젝트 생성npx create-next-app@latest .2. cytoscape 라이브러리 및 타입 설치..
React18부터 추가된 Streaming SSR을 찾아보면서 기존 렌더링 방식(CSR, SSR)도 복습할겸 공부한 내용을 정리해보고자 한다. 웹 성능 지표(Web Performance Metrics)웹사이트나 웹 애플리케이션의 로딩 속도와 사용자 경험을 측정하는 데 사용되는 다양한 측정 기준입니다.TTFB(Time To First Byte) : 클라이언트(브라우저)가 서버에 요청을 보낸 후 첫 번째 바이트를 받기까지의 시간을 의미한다. 즉, 요청을 보낸후 다시 응답을 받기 시작한 시간이다.FCP(First Contentful Paint) : 페이지가 로드되기 시작한 시점부터 컨텐츠의 일부가 화면에 렌더링될 때까지의 시간이다. 요청에 대한 응답을 받기 전에는 유저가 빈 화면을 보고 있기 때문에 FCP는 ..
`제어문`은 코드의 실행 흐름을 제어하는 문입니다. 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용합니다. 1. 블록문 (Block Statement)0개 이상의 문을 `중괄호`로 묶은 코드 블록자바스크립트는 블록문을 하나의 실행 단위로 취급{ var foo = 10; console.log(foo);}2. 조건문 (Conditional Statement)2.1 if...else 문주어진 `조건식`의 평가 결과에 따라 실행할 코드 블록 결정if (조건식) { // 조건식이 true일 때 실행} else { // 조건식이 false일 때 실행}2.2 switch 문주어진 표현식의 평가 결과와 일치하는 case 문으로 실행 흐름 이동switch (표현식) { case 값1: // 표현식..
