25-08 FE News 스크랩

Ultimate Guide to Vibe Coding

'Vibe Coding'은 AI 시대에 코딩하는 새로운 접근 방식을 제안하는 가이드다.
이 프로젝트는 전통적인 코딩 방식에서 벗어나 AI 코딩 조수를 활용해 더 효율적이고 창의적으로 개발하는 방법을 설명한다. 가이드는 AI와 함께 코딩할 때의 마인드셋 변화, 효과적인 프롬프트 작성법, 그리고 AI 도구의 한계를 이해하는 방법 등을 포함하고 있다. 'Vibe Coding'의 핵심은 개발자가 세부 구현보다 높은 수준의 설계와 문제 해결에 집중할 수 있게 하는 것이다.
https://github.com/EnzeD/vibe-coding

GitHub - EnzeD/vibe-coding

느낀점) 바이브 코딩이 가십거리로만 그치지 않고 체계적인 개발 절차가 나오고 있다는 것을 알고 변화를 한 번 더 체감했다. AI시대에 이를 활용하지 못하고 비판만 하는 것은 뒤쳐지는 것이라 생각하며, 한 번쯤 시도해보고 익숙해지는 것도 좋을 것 같다.
 

JavaScript broke the web (and called it progress)

JavaScript의 과도한 사용이 웹의 근본적인 가치를 훼손하고 있다는 문제 제기를 다룬다.
글에서는 JavaScript가 웹의 접근성, 성능, SEO, 사용자 경험을 해치는 여러 측면을 분석한다. 특히 서버 사이드 렌더링 대신 클라이언트 사이드 렌더링을 과도하게 사용하면서 초기 로딩 속도가 느려지고, 검색 엔진 최적화가 어려워지는 문제를 지적한다. 또 JavaScript 의존도가 높아지면서 네트워크 환경이 좋지 않은 사용자나 JavaScript를 비활성화한 사용자들이 웹사이트를 제대로 이용할 수 없는 상황이 발생한다.
따라서 글에서는 웹 개발자들이 JavaScript 없이도 작동하는 기본적인 기능을 먼저 구현하고, 점진적으로 JavaScript를 추가하는 방식으로 접근할 것을 권장한다. 웹의 본질인 접근성과 포용성을 유지하면서도 현대적인 기능을 제공하는 균형 잡힌 개발 방식을 제시한다.
https://www.jonoalderson.com/conjecture/javascript-broke-the-web-and-called-it-progress/

JavaScript broke the web (and called it progress)

느낀점) DX보다는 UX를 생각하는 진정한 개발자로서 모던 프레임워크의 발전이 초래한 현재의 상황을 진지하게 고민한 것이 느껴져 존경스러웠다. 하지만 본문 아래 첫 번째 댓글에도 써있듯이, 주니어는 유행을 따라 학습하지 않으면 취업조차 할 수 없기에 내가 주니어로서 이러한 현상의 개선에 기여하기 힘들다는 것이 안타까웠다. (누가 바닐라 자바스크립트만 가지고 취업을 할까,,)
여러 의견이 존재하겠지만 동감하는 댓글들이 꽤 많은 것으로 보아, 앞으로 웹 개발 트렌드가 또 어떻게 변화할지 기대가 된다.
 

The Many, Many, Many JavaScript Runtimes of the Last Decade

지난 10여 년간 Node.js, Deno, Bun, Hermes 등 수많은 JavaScript 런타임이 등장하며 실행 환경이 크게 확장됐다.
이 글은 각 런타임이 어떤 배경에서 탄생했는지, 어떤 특징과 철학을 가졌는지, 그리고 오픈소스 생태계 안에서 어떻게 차별화되고 발전해 왔는지 흥미롭게 풀어낸다. 다양한 런타임의 등장은 개발자에게 더 많은 선택지를 주었지만, 한편으로는 표준화와 호환성이라는 새로운 과제를 안겨주기도 했다.
변화의 흐름 속에서 우리가 고민해야 할 점은 무엇인지, 앞으로의 방향성까지 함께 생각해볼 만한 글이다.
https://buttondown.com/whatever_jamie/archive/the-many-many-many-javascript-runtimes-of-the-last-decade/?ck_subscriber_id=2915906285

The many, many, many JavaScript runtimes of the last decade

느낀점) 사실 자바스크립트 런타임은 노드 밖에 몰랐는데, 이번 기회에 다른 다양한 런타임과 그 배경에 대해 알게 되어 좋았다. 특히 마이크로컨트롤러를 위한 특화된 엔진과 런타임(Duktap, JerryScript 등)이 있다는 사실은 꽤 재밌었다. 리액트 네이티브가 나오면서 이에 최적화된 런타임(Hermes)가 나온 것도 흥미로웠다.
"그렇다면 왜 '최고의' 런타임은 존재하지 않을까요? 단순히 자바스크립트를 실행할 수 있는 다양한 환경이 너무 많아 최적화해야 할 상충되는 요소가 너무 많기 때문입니다. 시작 성능, 런타임 성능, 번들 크기, API 지원, 그리고 네이티브 접근의 용이성 등이 모두 우선순위를 두고 경쟁합니다." 런타임이 많아야 할 수 밖에 없었던 이유를 이 한 문장만으로도 확인 가능했다.
 

Color models for humans and devices

인간의 시각과 기기가 색상을 어떻게 인식하고 표현하는지에 대한 심도 있는 분석을 제공한다.
글에서는 인간의 눈이 빨강, 초록, 파랑에 민감한 세 가지 원뿔세포를 통해 색상을 인식하는 방식을 설명하고, 이를 바탕으로 RGB 색상 모델이 개발된 배경을 다룬다.
CIE(국제조명위원회)가 수행한 실험을 통해 인간의 평균 관찰자가 빛에 어떻게 반응하는지 측정하여 XYZ 색공간을 만들었으며, 이는 음수 값을 가지지 않는 표준화된 색상 표현 방식이다. 특히 인간의 눈이 초록색에 가장 민감하기 때문에 Y(휘도) 계산에서 초록색 계수가 0.7152로 가장 높게 설정되었다.
글에서는 sRGB 색공간의 감마 보정과 같은 비선형 변환을 통해 인간의 시각적 인식에 맞게 색상을 조정하는 방법도 설명한다. 또한 AVIF 같은 현대적인 이미지 포맷에서 색상 프로파일과 CICP를 사용하여 다양한 기기에서 일관된 색상을 유지하는 방법을 다루며, HDR(고동적범위) 이미지의 처리와 톤 매핑에 대해서도 언급한다. 웹 개발자들이 이미지 처리와 색상 관리에 대한 깊은 이해를 얻을 수 있는 포괄적인 글이다.
https://developer.mozilla.org/en-US/blog/color-models-humans-devices/

Color models for humans and devices | MDN Blog

느낀점) 아래와 같은 값이 '감마 보정'이라는 것 때문에 사실은 정확한 선형이 아니라는 사실이 정말 흥미로웠다. 감마 보정은 더 나은 시각적 이미지를 제공하고 비트를 더 효율적으로 저장하는 데 사용된다고 한다.

.first {
  background-image: linear-gradient(
    to right,
    rgb(0 0 0),
    rgb(128 128 128),
    rgb(255 255 255)
  );
}

색을 여러 기기에서 모든 사람에게 일관적으로 보이게 하기 위해 정말 많은 계산이 있었다는 사실을 알게 되었다. 나중에 색과 관련되어 프로젝트를 할 일이 있다면 유용한 기반 지식이 되어줄 것 같다.
 

[NAVER] 윈도잉(windowing) 기법을 적용한 고성능 표 컴포넌트 개발기

네이버 사내 로그 시스템의 성능 개선을 위해 윈도잉 기법을 적용한 고성능 표 컴포넌트 'Big Table'을 개발한 사례를 공유한다.
윈도잉 기법은 데이터를 일정한 '창(window)' 단위로 나눠 처리하는 기술로, 데이터 스트리밍, 머신러닝, 컴퓨터 그래픽스, React 가상화 등 다양한 분야에서 활용된다.
React에서는 화면에 보이는 범위만 렌더링하여 성능을 최적화하는 방식으로 사용되며, react-virtualized, react-window, @tanstack/react-virtual 등의 라이브러리가 대표적이다.
기존 react-window 사용 시 발생한 문제점들을 해결하기 위해 자체 개발한 Big Table은 실제 table 요소를 기반으로 구현하여 CSS 스타일 적용이 용이하고, ResizeObserver를 내장하여 행 접기/펴기 시 자동으로 높이를 계산한다. 30만 건의 데이터를 무리 없이 렌더링할 수 있으며, 컬럼 리사이즈 시 55 FPS 이상을 안정적으로 유지하는 성능을 보여준다.
https://d2.naver.com/helloworld/1450243
느낀점) 윈도윙 기법에 대한 설명, 현재 마주한 문제 상황, 적용 방법, 성과 및 한계 그리고 대안까지 순서대로, 체계적으로 잘 쓰여진 글이자 개발자가 문제를 해결하는 정석적인 방법이라는 생각이 들었다. 비슷한 방식으로 글을 쓸 수 있도록 노력해봐야겠다.