저번주 프론트엔드 볼거리 (#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
새로운 자바스크립트 엔진인 nova를 소개하는 글, BoaJS를 소개하는 영상입니다. 첫 번째 글은 nova 자바스크립트 엔진을 소개하며 ECMAScript 사양에 있는 객체와 기존 엔진들이 어떻게 이를 해석하는지 소개하는 시리즈 글입니다. 두 번째 영상은 Rust로 JS 엔진을 처음부터 만들면서 JS의 구문분석 과정, 렉시컬 환경에 대해 소개하고, 최신 엔진들이 구문 분석을 하기 위해 적용한 기술들을 소개합니다.
- 새로운 친구
https://nextjournal.com/dubroy/ohm-parsing-made-easy
파싱을 도와주는 도구인 Ohm 라이브러리입니다. Ohm 언어를 사용해야 하지만, 파싱 라이브러리를 빠르게 제작해야 할 때 도움이 될 수도 있습니다.
더 오래된 볼 거리를 찾으신다면 https://ones-to-watch.ethansup.net/ 를 참조해주세요. :)
콘텐츠를 더 읽고 싶다면?
원티드에 가입해 주세요.
로그인 후 모든 글을 볼 수 있습니다.
로그인 후 모든 글을 볼 수 있습니다.
・댓글 2