JavaScript

JavaScript import maps are now supported cross-browser

외부 모듈을 ES 모듈 형식으로 사용할 수 있게 도와주느는 <script type="importmap"> 에 대해서 설명하는 글. Webpack, Vite 등의 번들러를 쓰면 의미가 크진 않지만 알아둬서 나쁠 건 없다.

<script type="importmap">
  {
    "imports": {
      "lodash": "https://unpkg.com/lodash@4.17.21/lodash.js"
    }
  }
</script>
<script type="module">
  import _ from "lodash";

  // ...
</script>

ESLint와 AST로 코드 퀄리티 높이기

사내 컨벤션을 위한 ESLint 플러그인을 직접 만들어 사용하는 것에 대한 이야기. 막연하게 정규표현식을 사용하면 만들 수 있지 않을까 라고 생각했었지만, 이 글에서는 acorn 이라는 자바스크립트 파서를 활용한다. "오 나도 필요해지면 만들어볼까?" 라는 생각이 들게끔 만들어주는 글이다.

월간 크롬 이슈 리포트 2023년 3월호

NHN 의 토스트 UI 팀이 정리한, 크롬의 예정된 업데이트들에 대한 글. 모르거나 생소한 항목들도 많지만 "Popover API", "CSS 불연속 속성의 Transition 지원" 등 유용한 정보도 제법 있다. 매월 말에 올라오는 것 같다.

React

[번역] 2023년 버전 리액트 프로젝트를 시작하는 방법

React 측에서 CRA 의 사용을 지양하기로 결정하면서, 어떤 툴로 React 프로젝트를 시작하면 좋을지에 대해 소개하는 글.

일단 React 공식 문서에서는 Next.js, Remix, Gatsby, Expo (네이티브 한정) 를 추천하고 있다. 이 글에서는 Vite, Next.js, Astro(vs. Gatsby) 의 장단점을 소개하고 있다.

글쓴이의 결론은

  1. CSR 위주의 사용, 빠른 초기화, React 에 집중한 교육 목적이라면 Vite 추천
  2. SSR 및 기타 새로운 기능들 사용, 앞으로 발전 및 유지보수 가능성 등을 생각하면 Next.js 추천
    (이미 많은 React 기여자들이 Next.js 관리사인 Vercel 에서 근무하고 있는 것도 중요 포인트)

이 정도다.

useEffect sometimes fires before paint

"useEffect 가 반드시 paint 후에 실행되는 것은 아니다. useLayoutEffect 에 의해 상태값이 바뀌어 리렌더링이 발생한다면, paint 전에도 실행될 수 있다." 라는 요지의 글.

useLayoutEffect는 꼭 필요할 때가 아니면 사용을 지양하라고 권장되는데, 이 글에 의하면 필요에 의해 useLayoutEffect를 사용하게 된다고 해도 그 안에서 상태값을 업데이트하는 것은 지양해야 하겠다. 물론 대안이 없다면 어쩔 수 없겠지만.

Etc

🎥 Lighthouse 성능 지표를 사용한, '웹 애플리케이션 성능 측정 자동화 모듈' 개발기

NHN FORWARD 2021세션.

Lighthouse CLI, Puppeteer, Gatsby.js 로 웹어플리케이션의 성능 측정을 자동화하는 경험에 대한 발표. 이후 Jenkins 등의 CI 와 연동해서 주기적으로 성능을 측정하고 성능 저하에 발빠르게 대응하는 것을 목표로 하고 있다고 한다.

어떤 지표를 측정해야 하는지, 그래서 어떻게 측정하는지, 시각화는 어떻게 하는지 등, 발표와 동일한 환경을 구성할 계획이 없더라도 유익한 정보가 많다.

🎥 웨일 브라우저 오픈 소스 생존기

NAVER DEVIEW 2023세션.

네이버의 브라우저인 웨일이 무엇이고, 어떻게 개발되고, 웹 생태계에 어떻게 기여하고 있는지에 대한 발표다. 가장 인상적인 부분은 개발 속도가 굉장히 빠른 크로미움 프로젝트를 웨일이 어떻게 잘 rebase 하면서 따라가고 있는지에 대한 내용이다.

  • 크로미움 개발자는 대략 1,500명 정도로 개발 속도가 굉장히 빠르고, 크로미움 기반인 웨일도 이 속도를 따라가야 함. 따라서 rebase 가 굉장히 중요함.
  • rebase 가 어려운 이유
    • 크로미움의 소스코드 파일은 6만 개 이상 (빌드 시간이 1시간 50분 이상 걸릴 정도)
    • 윈도우/맥/리눅스/안드로이드 등등 플랫폼 별로 따로 rebase 를 해줘야 함
    • 당연히 테스트할 것도 많음
  • 그래서 rebase bot 도입
    • 주말에 젠킨스에서 자동으로 rebase 가 실행됨
    • 충돌은 (커밋 단위가 아닌) 파일 단위로 관리됨. 이렇게 하면 커밋 순서에 의해 생기는 의존성과 한 커밋 내에서 서로 다른 소스 코드 사이에 생기는 의존성을 줄이고 좀 더 쉽게 관리할 수 있음.
  • 자동화 테스트도 적용
    • 매 PR 마다 15만개의 테스트케이스를 12대의 테스트 봇을 활용해 검증
    • 성능을 위해서도 350여개의 테스트케이스로 검증
    • 네이버 등 주요 사이트들 기준으로 메모리릭을 체크하는 테스트 검증도 있음

이외에도 흥미로운 내용이 많다.

Midjourney 때문에 내 일을 사랑하게 만들었던 모든 것을 잃었어요

그림을 자동 생성해주는 AI 때문에 자신의 일이 창의적인 일에서 프롬프트 작성 및 포토샵 후처리 정도로 변경된 것에 대해 한탄하는 글.

AI 로 인한 미래는 어떻게 변하게 될까? 몇 년 전만 해도 "AI 가 아무리 발달해봐야 개발자의 영역은 굳건하겠지"라고 생각했는데, 개발자를 위해 출시되고 있는 수많은 AI 툴들을 보면 마냥 안심할 수는 없는 상태인 것 같다. 때때로 불안감이 엄습하지만 현재 자리에서 최선을 다하는 것 이외에는 할 수 있는 일이 없다는 것도 안타깝다.

Segment Anything

Meta 에서 공개한 AI. 이미지에서 어떤 객체든 구분해서 분리해준다고 한다. 예제 페이지도 있고 이미지를 직접 올려서 테스트해볼 수도 있다.