전체 글

자바스크립트 엔진은 `싱글 스레드`이기 때문에, 명시적으로 함수를 호출하면 동기적으로 실행되어 해당 함수가 종료될 때까지 다른 작업을 수행할 수 없다. 하지만, 일정한 시간이 경과된 후에 실행되도록 하는 타이머 함수를 사용하면 비동기적으로 함수를 실행할 수 있다. 이를 호출 스케줄링이라고 한다.자바스크립트는 타이머를 생성할 수 있는 타이머 함수 `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는 ..

Streaming SSR이란?`Streaming SSR`은 서버에서 렌더링된 HTML을 한 번에 완성해서 보내는 방식이 아니라, 준비된 부분부터 점진적으로 스트리밍해서 클라이언트에게 전달하는 기술입니다.기존 SSR은 서버에서 모든 데이터를 처리한 뒤 완전한 HTML을 전송하는 반면, Streaming SSR은 서버가 데이터를 준비하는 즉시 HTML 조각을 스트림 형태로 보내고, 클라이언트는 이를 실시간으로 렌더링합니다. 장점Streaming SSR의 가장 큰 장점은 `초기 로딩 시간`을 단축할 수 있다는 점입니다.HTML의 일부라도 준비되는 즉시 클라이언트가 렌더링을 시작하므로 TTFB(Time To First Byte)가 개선됩니다.데이터가 많거나 복잡한 대규모 어플리케이션에서 효과적이며, 사용자가 중..

1. 이미지 포맷 최적화전통적인 JPEG나 PNG 대신 압축 효율이 높은 최신 포맷을 사용하면 이미지 품질을 유지하면서도 파일 크기를 크게 줄일 수 있습니다.최신 이미지 포맷`WebP``AVIF`이러한 최신 포맷들은 일부 구버전 브라우저에서 지원되지 않을 수 있습니다. 이 경우 요소를 사용해 호환성 문제를 해결할 수 있습니다: 브라우저는 위에서부터 순서대로 지원하는 포맷을 선택하여 표시합니다:AVIF 지원 시 -> image.avif 사용WebP 지원 시 -> image.webp 사용둘 다 미지원 시 -> image.jpg 사용  2. 이미지 사이즈 조정실제 화면에 표시되는 크기보다 큰 이미지는 불필요한 데이터 전송을 야기합니다.최적화 방법서버에서 필요한 크기로 `리사이징`하여 전송`Respo..