저번주 프론트엔드 볼거리 #57

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


https://smoores.dev/post/why_i_rebuilt_prosemirror_view/


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


- 2025년 웹 에디터 둘러보기


https://liveblocks.io/blog/which-rich-text-editor-framework-should-you-choose-in-2025


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


- CSS nesting 잘 사용하기


https://piccalil.li/blog/css-nesting-use-with-caution/


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


- 2024년의 React 돌아보기


https://2024.stateofreact.com/en-US/


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


- ESM만 사용하기


https://antfu.me/posts/move-on-to-esm-only


ESM과 CommonJS를 동시에 제공하지 않고 ESM만 제공하기로 한 이유와 언제 ESM만 사용하도록 전환해야 할지를 소개하는 글입니다. 이전에 Bun에서 CommonJS는 사라지지 않는다( https://bun.sh/blog/commonjs-is-not-going-away )며 장점을 소개했지만… [최신 Node.js에서 require(esm)을 지원]( https://socket.dev/blog/require-esm-backported-to-node-js-20 )하고, ESM이 표준인 현재 설정이 어렵긴 합니다.


- TypeScript와 ESLint가 추구하는 방향


https://eslint.org/blog/2025/01/differences-between-eslint-and-typescript/


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


- 웹 확장 기능 기본 알아보기


https://chenhuijing.com/blog/learning-web-extensions/


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


- 창의적인 WebGL 사용법


https://blog.maximeheckel.com/posts/post-processing-as-a-creative-medium/

이전에 소개했던 레트로 효과 구현하기( https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/ )의 저자가 어떻게 영감을 받아 WebGL을 사용해서 여러가지 자신만의 작업물을 구현했는지를 공유하는 글입니다.


- 새로운 엔진 구현하기


https://trynova.dev/blog/internals-of-nova-part-1


https://www.youtube.com/watch?v=_uD2pijcSi4


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


- 새로운 친구


https://nextjournal.com/dubroy/ohm-parsing-made-easy


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


더 오래된 볼 거리를 찾으신다면 https://ones-to-watch.ethansup.net/ 를 참조해주세요. :)

smoores.dev - Why I rebuilt ProseMirror’s renderer in React

smoores.dev

smoores.dev - Why I rebuilt ProseMirror’s renderer in React

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2025년 2월 21일 오후 2:20

댓글 0

    함께 읽은 게시물

    < 보여서 걷는 게 아니라, 걷다 보니 길 >

    1

    ... 더 보기

    진짜 1인 개발자 전성시대

    1

    ... 더 보기

    진짜 1인 개발자 전성시대

    K리그 프로그래머

    진짜 1인 개발자 전성시대

    자바 25를 사용해야 하는 이유

    ... 더 보기

    곧 출시될 자바 25는 가능한 빨리 도입하세요

    kr.linkedin.com

    곧 출시될 자바 25는 가능한 빨리 도입하세요

     • 

    저장 18 • 조회 2,345


    토스 데이터 직군 집중 채용 - 면접만 봐도 100만원!

    ... 더 보기

    토스 DATA·ML 집중채용

    toss.im

    토스 DATA·ML 집중채용

    요구사항 변화에 따른 프로젝트 구조 확장 ⛏

    ... 더 보기

    요구사항 변화에 따른 프로젝트 구조 확장_Bradley 멘토님

    F-Lab : 상위 1% 개발자들의 멘토링

    요구사항 변화에 따른 프로젝트 구조 확장_Bradley 멘토님

     • 

    저장 34 • 조회 3,466


    < 모든 선택지를 검토하다 아무것도 못 하는 당신에게 >

    1

    ... 더 보기

     • 

    댓글 1 • 저장 3 • 조회 654