웹 에디터 렌더링을 새로 구축한 이유

웹 에디터 렌더링을 새로 구축한 이유

PromiseMirror 웹 에디터는 훌륭하지만 React 렌더링과 충돌하는 이유를 차근차근 설명하고 view 로직을 다시 만드는 것으로 해결한 것을 소개하는 글입니다. React 렌더링을 짚어보면서 어떤 부분이 충돌하는지 살펴보므로, React UI을 다른 렌더링하는 라이브러리와 합쳐야 할 경우 어떻게 대응해야 할지, 혹은 요구사항은 어떻게 파악해야 할지 잘 설명해주므로 보는 것을 추천드립니다.

2025년 웹 에디터 둘러보기

수많은 웹 에디터를 기반 라이브러리, 활용방식, 협업… 여러 기준을 바탕으로 장단점을 소개하는 글입니다. 웹 에디터를 고민할 경우 그냥 Tiptap을 사용할 수도 있지만, 글에 쓰인 장단점을 비교해서 적용해보는 것을 고려해보세요. 위에서 소개한 PromiseMirror도 장단점을 소개하고 있습니다.

CSS nesting 잘 사용하기

최신 기능인 CSS nesting은 Sass/SCSS와 작동 방식이 다르기 때문에, CSS 전처리기를 사용할 때에는 &을 어떻게 사용했는지, Native CSS nesting은 작동방식이 어떻게 다른지, 사용하기 위해 주의해야 할 점을 소개합니다.

2024년의 React 돌아보기

React에서는 가장 큰 React 19/React 컴파일러 출시, 그리고 <Suspense>의 발전이 있었습니다. React 사용자가 어떤 라이브러리를 사용하는지, 그리고 어떤 것을 선호하는지 알 수 있는 설문 결과입니다.

ESM만 사용하기

ESM과 CommonJS를 동시에 제공하지 않고 ESM만 제공하기로 한 이유와 언제 ESM만 사용하도록 전환해야 할지를 소개하는 글입니다. 이전에 Bun에서 CommonJS는 사라지지 않는다며 장점을 소개했지만… 최신 Node.js에서 require(esm)을 지원하고, ESM이 표준인 현재 설정이 어렵긴 합니다.

TypeScript와 ESLint가 추구하는 방향

두 가지 모두 정적 분석 테스트 도구지만, ESLint는 린터로서, TypeScript는 유형 검사기로서 기능이 다릅니다. 두 기능이 어떻게 다른지, 기능의 어느 부분이 겹치는 영역이 있는지를 소개하는 글입니다.

웹 확장 기능 기본 알아보기

웹 확장 기능을 만들기 전에 알아야 할 개념들을 가볍게 소개하는 글입니다.

창의적인 WebGL 사용법

이전에 소개했던 레트로 효과 구현하기의 저자가 어떻게 영감을 받아 WebGL을 사용해서 여러가지 자신만의 작업물을 구현했는지를 공유하는 글입니다.

새로운 엔진 구현하기

새로운 자바스크립트 엔진인 nova를 소개하는 글, BoaJS를 소개하는 영상입니다. 첫 번째 글은 nova 자바스크립트 엔진을 소개하며 ECMAScript 사양에 있는 객체와 기존 엔진들이 어떻게 이를 해석하는지 소개하는 시리즈 글입니다. 두 번째 영상은 Rust로 JS 엔진을 처음부터 만들면서 JS의 구문분석 과정, 렉시컬 환경에 대해 소개하고, 최신 엔진들이 구문 분석을 하기 위해 적용한 기술들을 소개합니다.

새로운 친구

파싱을 도와주는 도구인 Ohm 라이브러리입니다. Ohm 언어를 사용해야 하지만, 파싱 라이브러리를 빠르게 제작해야 할 때 도움이 될 수도 있습니다.