The Software House에서 발표한 프런트엔드 개발 설문 보고서다. 사용 기술, 개발 경험, 트렌드 등을 다루며, 중간중간 설문 결과에 대한 업계 전문가들의 인사이트가 정리되어 있어 흥미롭게 읽을 수 있다.
구글은 2024년 10월 18일, 웹 브라우저에서 클라이언트 측 기계학습 모델을 활용하는 개발자들을 위한 첫 번째 Web AI Summit을 개최했다. 이 서밋에서는 Chrome, MediaPipe 등 구글 팀뿐만 아니라 Intel, Hugging Face, Microsoft, LangChain 등 다양한 기업의 전문가들이 참여하여, 웹에서의 AI 구현 사례와 기술을 공유했다. 특히, 웹 브라우저 내에서 기계학습 모델을 실행하여 낮은 지연 시간, 비용 절감, 프라이버시 보호 등의 이점을 제공하는 방법들이 논의되었다.
발표 영상이 유튜브에 공개되어 확인할 수 있으며, 클라이언트 측 기계학습에 관심이 있다면 살펴볼 만한 자료다.
공식 요약 글을 남긴다. https://developers.googleblog.com/en/web-ai-summit-2024-recap/
지난 10월 열렸던 Next.js 콘퍼런스에서, Next.js 15는 self-hosting을 위한 새로운 핵심 지원과 문서를 제공하며, 새로운 캐시 API도 곧 출시될 예정임을 밝혔고, Vercel의 프로덕트 VP인 Lee Robinson은 이에 맞춰 Self-Hosting Next.js라는 튜토리얼 영상을 공개했다.
[참고] 지난 23년 12월 소식을 통해 Next.js 애플리케이션은 Vercel 플랫폼이 아닌 다른 서버리스 플랫폼에서의 호스팅이 제공되지 않아, 커뮤니티에서 OpenNext 프로젝트 개발이 진행되고 있음을 공유하기도 했었다.
지난 10월 7일 열렸던 당근 테크 밋업의 모든 세션들이 공개 되었다. Front-end 세션들은 다음과 같다.
- 프레임워크부터 플랫폼까지: 당근 웹뷰 플랫폼
- 프론트엔드에게 배포플랫폼이란 - nothing or everything
- 내 타입스크립트 코드가 이렇게 느릴 리 없어!
- 아이콘, 브랜딩 에셋까지 디자인시스템으로
- GraphQL Schema 기반으로 협업하고 생산성 높이기
- 웹/웹뷰 코드 합치면 개발 2배 빨라지는 거 아니었어요?
- 아니, 여기도 웹뷰였어요?
이 글은 React Native의 새로운 아키텍처를 소개하며, 공식 문서를 바탕으로 이를 그림과 함께 쉽게 설명한다.
새로운 구조는 기존의 Bridge를 삭제하고, JSI(JavaScript Interface) 기반으로 변경해 네이티브와 JavaScript 간의 통신 속도를 대폭 개선했다. 또한, Fabric이라는 새로운 UI 렌더러를 도입해 더 빠른 렌더링과 배치 업데이트를 지원하며, 유연성과 성능을 강화했다.
공식 문서의 링크도 함께 남긴다. https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here
TypeScript 5.7버전이 출시되었다, 주요 기능은 다음과 같다.
- 초기화되지 않은 변수 검사
- 컴파일러가 초기화되지 않은 변수 사용을 감지하도록 개선되었다. 특히, 중첩 함수 안에서 선언된 변수도 검사 대상에 포함되어 초기화 문제를 방지한다.
- 상대 경로 재작성
--rewriteRelativeImportExtensions옵션을 통해 상대 경로로 가져오는 TypeScript 확장자를 JavaScript 확장자로 재작성할 수 있는 새로운 옵션을 추가했다.
- ECMAScript 2024 기능 지원
--target es2024및--lib es2024옵션을 추가해 ECMAScript 2024 기능을 지원한다.Object.groupBy,Map.groupBy,Promise.withResolvers등의 새로운 기능을 포함한다.
- 프로젝트 구성 해석 개선
tsconfig.json파일을 찾는 과정이 더 유연해졌다. 디렉터리 트리를 계속 탐색하며 적합한 설정을 찾을 수 있어, 복잡한 프로젝트 구조에서도 올바른 설정을 적용할 수 있다.
더 자세한 변경 사항은 원문에서 확인할 수 있다.
GitHub의 CSS-Next 저장소에서 커뮤니티 투표를 통해 CSS의 새로운 공식 로고가 결정되었다. 이 디자인은 JavaScript, TypeScript, WebAssembly 등 다른 웹 기술 로고의 디자인 언어를 따르며, 색상은 rebeccapurple (#663399)을 사용한다.
[참고] rebeccapurple 색상은 2014년 뇌암으로 6살 생일에 세상을 떠난 Eric A. Meyer(웹표준, 특히 CSS 영역에 많은 공헌)의 딸 Rebecca를 기리기 위해 CSS Color Level 4에 추가되었었다.
이 글은 Google Chrome의 데이터 수집 관행과 웹 통제 문제를 비판하며, Firefox와 같은 독립적인 브라우저로의 전환을 제안한다. Chrome이 개인정보 보호와 사용자 자유를 저해한다고 평가하며, 더 건강한 웹 생태계를 위해 대안 브라우저를 고려해야 한다고 주장한다.
US Justice Department wants Google to sell Chrome, more
한편, 미국 법무부는 Google의 시장 지배력을 문제 삼으며 Chrome 브라우저 매각을 요구하고 있다. 이는 Google의 독점적 행태가 경쟁을 제한한다는 반독점 소송의 연장선에서 이루어진 조치다.
UI 컴포넌트 개발에 사용되는 4가지 추상화 패턴에 대해 설명한다.
- Headless UI
- 기능과 구조가 있으나 스타일이 없는 경우
HTML+JS- 예시: React Aria, Radix Primitives, MUI BaseUI, Tailwind HeadlessUI
- Boneless UI
- Skinless UI
- 구조만 있는 경우
HTML- 예시: React Aria, ArkUI
- Lifeless UI
- 기능만 있는 경우
JS- 예시: TanStack, Downshift, React Aria Hooks
Nielsen Norman Group은 대체 텍스트는 이미지의 시각적 설명이 아니라 의미와 목적에 중점을 둬야 한다고 주장한다. 대체 텍스트는 사용자가 이미지의 기능과 맥락을 이해하도록 돕는 역할을 해야 하며, 장식용 이미지는 빈 대체 텍스트(alt="")로 설정해 화면 읽기 프로그램의 방해를 줄여야 한다고 강조한다. 이러한 내용을 실제 사례를 통해 설명하며, 웹 접근성과 사용자 경험을 향상시키는 실질적인 가이드를 제공한다.
올해 React 커뮤니티에서 가장 많이 언급된 뉴스는 아마도 React 컴파일러일 것이다. 모두가 재 렌더링의 고통에서 벗어나 다시는 useCallback/useMemo를 작성하지 않아도 되기를 고대하고 있지만 React 컴파일러가 실제로 그런 것들을 달성할 수 있을까? 세션에서는 답을 찾기 위해 몇 가지 실제 앱에서 실행해 본 경험과 React 컴파일러가 무엇인지, 어떤 문제를 해결하는지, 간단한 코드 예제와 실제 애플리케이션에서 어떻게 작동하는지 살펴볼 수 있다.
프런트엔드에서 프레임워크는 사용은 필수일까? 토스 프런트엔드 개발자들의 대화를 통해 프레임워크와 라이브러리의 차이, 사용 시점, 그리고 기술 선택의 기준에 대한 그들의 생각을 들어보자.
이 영상에서는 JavaScript의 fetch 함수가 왜 두 번의 await를 필요로 하는지 설명한다. 첫 번째 await는 네트워크 요청 후 응답 객체를 반환하지만, 이 객체는 스트림 형태로 제공되기 때문에 두 번째 await로 데이터를 읽어야 한다. 데모를 통해 과정을 시각적으로 보여주는 점이 특히 흥미롭다.
이 글은 간단한 알고리즘부터 시작해 점점 복잡한 미로를 생성하는 과정을 단계별로 안내한다. 각 단계에서 코드를 포함한 자세한 설명과 시각적 예제를 제공해 이해를 돕는다. 특히, 미로 생성 알고리즘을 학습하거나, 게임 개발에 관심 있는 사람들에게 유용한 자료다.
이 글은 JavaScript 라이브러리를 가져오는 다양한 방법을 소개하며, 빌드 시스템을 사용하지 않는 프로젝트에서도 안전하게 라이브러리를 import 하는 방법을 다룬다. ESM(ECMAScript Modules)과 CommonJS의 차이, import와 require의 사용법, 그리고 브라우저 환경과 Node.js 환경에서 차이를 명확히 설명한다.
저자는 이전 블로그에서 간단한 사이트에서는 빌드 시스템을 사용하지 않는 것이 더 쉽다고 주장했다.
https://jvns.ca/blog/2023/02/16/writing-javascript-without-a-build-system/
이 글은 React의 내부 동작 원리를 직접 구현하며 이해할 수 있는 튜토리얼이다. React의 상태 관리, DOM 업데이트 등 저수준 메커니즘을 분석하고 재구현하면서, 라이브러리가 왜 특정 설계를 선택했는지에 대한 통찰을 제공한다. 직접 구축하는 과정을 통해 숨겨진 동작과 설계 의도를 체감할 수 있어 React를 깊이 이해하려는 개발자들에게 유익하다.
NOVA는 Rust로 개발된 새로운 JavaScript 및 WebAssembly 엔진으로, 데이터를 숫자나 문자열 등 유형별로 벡터에 저장해 메모리 안전성과 효율성을 강화하고, 참조를 인덱스로 관리해 포인터 사용을 줄이는 등 데이터 지향적 설계를 통해 성능 최적화를 목표로 한다. 객체 데이터를 유형별로 분리해 불필요한 데이터 접근을 방지하며, Rust의 안정성과 성능을 활용해 메모리 취약점을 방지하는 데 초점을 맞췄다.
NOVA는 아직 개발 초기 단계로, ECMAScript 테스트 제품군(test262)의 약 47%만 통과한 상태지만, 새로운 아키텍처와 설계 접근 방식으로 JavaScript 엔진 개발에 흥미로운 가능성을 제시한다. V8 같은 기존 엔진과 달리 메모리와 데이터 접근을 효율적으로 처리하도록 설계되어, 특히 IoT나 게임 스크립팅 같은 특정 환경에서 활용 가능성이 크다. NOVA의 발전과 활용 사례가 기대된다.
다음 발표 영상에서 NOVA의 설계 철학과 기술적 세부 사항을 설명한다. https://www.youtube.com/watch?v=WKGo1k47eYQ
이 도구는 HTML 요소를 React 컴포넌트나 Figma 디자인으로 변환해 주는 크롬 확장 프로그램이다. Tailwind CSS와 같은 스타일 변환 기능을 지원하며, 빠른 프로토타이핑과 레이아웃 작업에 유용하다. 다만, 컴포넌트 분할 기능이 제한적이고 추가적인 코드 정리가 필요할 수 있다. 레이아웃 추출과 디자인 변환 작업에 적합한 도구다.
React Scan은 기존 React DevTools의 한계를 보완하며, 컴포넌트 렌더링 빈도와 재 렌더링 원인을 시각적으로 보여주는 도구다. 성능 병목을 쉽게 진단하고 최적화를 돕는 강력한 기능을 제공한다. React 성능 관리에 관심 있다면 한 번 시도해 볼만하다.
아래는 github에 적용한 사례를 보여준다.
https://x.com/i/status/1859267710498263073
Todoctor는 코드에 남겨둔 TODO와 같은 주석을 효율적으로 관리할 수 있는 오픈소스 도구다. Git 리포지터리에서 주석을 자동으로 스캔하고, 이를 정리해 문서화하며, 차트와 인사이트를 제공해 남은 TODO를 시각적으로 관리할 수 있다. 저자, 위치, 내용, 시간별로 모든 TODO를 체계적으로 관리할 수 있어 프로젝트 유지보수에 큰 도움을 준다. 설정이 간단하여 다양한 프로젝트에 쉽게 적용할 수 있다.
Music-Metadata는 오디오 파일의 메타데이터를 읽고 처리할 수 있는 오픈소스 라이브러리다. MP3, FLAC, WAV 등 다양한 오디오 포맷을 지원하며, ID3 태그, Vorbis 댓글, APE 태그 등 파일에 포함된 메타데이터 정보를 효율적으로 추출할 수 있다. 이 도구는 Node.js 환경에서 사용 가능하며, 스트리밍 데이터를 처리할 수 있는 기능도 제공해 대규모 오디오 파일 작업에도 적합하다. 오디오 파일 관련 프로젝트를 개발 중이라면 참고할 만한 도구다.
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@betaReact Compiler(A.K.A. React Forget)가 babel plugin beta로 릴리스되었다. 개발자의 실수를 줄여주기 위한 eslint-plugin도 함께 릴리스되었다. 지원 범위는 React 17+이다.
해당 포스트에서는 We recommend everyone use the React Compiler linter today라고 밝히고 있는데, React 컴파일러가 안정화되어 릴리스되었을 때 바로 적용할 수 있게 준비를 시키는 것으로 보인다.
eslint-plugin은 실제 코드 동작에 영향을 끼치지 않기때문에 안전하다.
코딩 폰트를 비교하며 자신에게 맞는 폰트를 찾을 수 있도록 돕는 웹사이트이다. 토너먼트 방식과 블라인드 모드를 통해 가독성과 디자인을 평가할 수 있으며, 최종 선택된 폰트를 다운로드해 바로 사용할 수 있다.
NPM 패키지의 상태를 종합적으로 분석해주는 도구로, 품질, 유지관리성, 보안 등 점수화된 평가와 함께 다운로드 통계, 의존성, 풀 리퀘스트 및 이슈 현황, 릴리즈 기록, 기여자 정보, 사용된 언어 통계를 한눈에 확인할 수 있다. 패키지의 신뢰성과 안정성을 파악하려는 개발자들에게 유용한 도구다.