최근 Remix와 React Router의 창립자인 Ryan Florence가 본인의 X(구 트위터) 포스트를 통해 ChatGPT가 Remix를 사용하고 있다고 알렸으며, 이 소식이 여러 곳에서 화제가 되고 있다.
공식적인 OpenAI의 입장은 없지만, 그와 관련된 내용을 잘 정리한 영상 하나를 소개한다.
JavaScript는 세계에서 가장 인기 있는 프로그래밍 언어로, 웹사이트 어디서나 사용된다. JavaScript가 Oracle이 통제하는 상표권이라는 사실을 아는 사람은 많지 않다. 저자는 Oracle에 보내는 공개서한으로 Oracle의 JavaScript 상표권 소유에 문제를 제기하며 상표권 해제를 요구한다. Brendan Eich, Ryan Dahl 등 12,000명 이상의 개발자가 서명에 참여했다.
const [error, response] ?= await fetch("https://arthur.place")이 제안은 함수의 결과를 튜플로 변환하여 오류 처리를 단순화하는 새로운 연산자 ?=(Safe Assignment)를 소개한다. 함수가 오류를 throw 하면 연산자는 [error, null]을 반환한다. 함수가 성공적으로 실행되면 [null, result]를 반환한다. 이 연산자는 promises, async functions 및 Symbol.result 메서드를 구현하는 모든 값과 호환된다.
지난 8월 24일 진행된 국내 프런트엔드 콘퍼런스 행사인 FEConf 2024의 발표 내용이 유튜브에 공개되었다.
- 7가지 플랫폼 서버로 프론트엔드 버프 마법 걸기
- 쉽고 편리한 E2E 테스트 자동화를 꿈꾸며...
- 바퀴 대신 로켓 만들기
- 10만 글로벌 유저들이 생겨버린 Three.js 사이드 프로젝트 ─ShaderGradient 개발기 (feat. 프레이머)
이 외에도 여러 흥미로운 주제들이 발표되었다.
Stack Overflow에서 실시한 설문조사(2022, 2023)에서 Flutter와 React Native는 가장 인기 있는 크로스 플랫폼 도구이다. Flutter와 React Native를 위한 웹 앱 개발 프레임워크의 기능을 안내하며 사용 편의성, 접근성 및 상호 운용성 측면에서 두 프레임워크를 비교한다.
CSS-in-JS가 느린 이유를 CSS 구문 분석 방법부터 시작해서 프레임워크에서 사용되는 CSS-in-JS까지 단계별로 소개한다. 추가로 이러한 문제를 회피하는 컴파일된 CSS-in-JS를 설명한다.
레거시 브라우저 지원을 위해 ES5로 트랜스파일은 필수적인 과정이었다. 하지만 브라우저와 개발 도구들이 크게 발전한 지금, 우리는 여전히 ES5에 의존해야 할까? 저자는 현대 웹 개발에서 ES5와 같은 레거시 지원의 불필요한 관행을 지적하고 새로운 방향성을 제시한다.
CSS 의사 클래스 :has와 흥미로운 사용 사례를 소개한다.
- 상태에 따른 스타일 지정
- 전역 탐지 - 최상위 HTML 태그에 :has 사용
- 다른 요소의 속성과 상태에 따라 모든 요소를 선택
| Library | Operations/sec | Relative speed |
|---|---|---|
| color-bits | 22 966 299 | fastest |
| colord | 4 308 547 | 81.24% slower |
| tinycolor2 | 1 475 762 | 93.57% slower |
| chroma-js | 846 924 | 96.31% slower |
| color | 799 262 | 96.52% slower |
JavaScript에서 색상을 표현하는 다양한 방법을 소개하고 RGBA 표현부터 시작해 효율적인 데이터 구조와 성능 개선 방법을 설명한다.
2024년 10월 5일 ESLint v8.x의 지원이 종료된다. 앞으로 공식 버전 지원 정책을 채택하며 주요 릴리스 정책은 아래와 같다.
- Current - ESLint 팀으로부터 적극적인 유지 관리 및 개발된다.
- Maintenance - 보안 문제를 포함한 중요한 버그 및 호환성을 수정한다. 다음 주요 릴리스에 대한 작업이 시작되면 유지 관리 상태에 들어가고 Current 릴리스가 공급된 후 6개월까지 유지된다.
- End of Life(EOL) - ESLint 팀으로부터 추가 업데이트를 지원받지 않는다.
지원 종료된 버전의 상업적 지원을 제공하기 위해 HeroDevs와 파트너십을 맺었으며 EOL ESLint에 대한 대체(Drop-in replacement)를 제공한다.
1990년대부터 2000년대 중반까지의 오래된 웹사이트, 모바일 앱, 소프트웨어의 수천 개의 스크린숏과 동영상을 볼 수 있다. 미래 세대를 위해 밀레니엄 웹 디자이너의 창의적인 유산을 보존하는 것을 미션으로 한다.
[참고] 유사한 도구로는 Wayback Machine이 있다. 직접 URL을 입력하고, 과거 시점에 저장된 웹사이트를 확인해 볼 수 있다.
일본 최대 규모의 음식 배달 서비스 Demaecan의 ConsumerApp이 웹에서 작동할 수 있도록 Flutter를 사용해 개선한 사례를 소개한다.
Flutter 전환 사례를 공유한 이전 글은 아래와 같다.
TanStack Query의 Infinite Queries에 보고된 버그를 수정하며 Infinite Queries 작동 방식을 설명한다.
(한글 번역) 고급 수준의 자바스크립트 제너레이터에 대한 설명
Generator는 강력한 기능이지만 자주 사용되지는 않는다. push stream과 pull stream을 설명하고 Generator의 주요 사용 사례를 소개한다.
- Lazy evaluation - 요청 시 데이터를 생성하거나 대규모 데이터를 처리한다.
- Asynchronous programming
- Iterator - 복잡한 흐름을 위해 단계 사이에 멈출 수 있다.
const zonedDateTime = Temporal.ZonedDateTime.from({
year: 2024,
month: 8,
day: 16,
hour: 12,
minute: 30,
second: 0,
timeZone: 'Europe/Madrid'
});Temporal API는 날짜 및 시간 작업을 위한 표준 개체와 함수를 제공하며 현재 TC39 Stage 3에 있는 제안이다. 저자는 실생활 속의 날짜와 현재 JavaScript의 날짜를 비교하며 시간대가 있는 날짜와 시간(Zoned Date Time)과 Temporal.ZonedDateTime 객체를 소개한다.
빈 디렉터리에서 시작해 완전한 프로덕션 NPM 패키지를 설정하는 방법을 단계별로 소개한다.
DOM을 조작하여 앱을 빠르게 만들 때 메모리 사용량이 과도하게 증가하지 않도록 하는 모범 사례를 소개한다.
성능에 민감한 웹 앱을 만들 때는 효율적인 DOM 조작 지식이 중요하다. 최신 프레임워크는 편리함과 추상화를 제공하지만, 이러한 낮은 수준의 기술을 이해하고 적용하면 특히 까다로운 시나리오에서 앱의 성능을 크게 향상할 수 있다.
Next.js에서 기본적으로 오류를 처리하는 방법, App Router에서 오류 UI Components를 정의하는 방법과 안전하고 효과적인 오류 처리 모범 사례를 소개한다.
VS Code 기반의 IDE로 현재 편집 중인 코드와 연결된 다른 코드(또는 다른 파일 내 위치한)를 별도 편집창으로 연결해 볼 수 있도록 구성해 준다. 이를 통해 코드의 흐름을 이해하는 데 필요한 부분만을 집중해서 볼 수 있어 코드를 빠르게 이해하고 작업할 수 있게 한다.
[참고] Haystack은 PolyForm 라이선스를 채택하고 있으며, 비상업적 개인 용도로만 사용이 가능하다.
브라우저 버전별로 프런트엔드 웹 기술 지원을 확인할 수 있는 Can I use 웹사이트의 기능을 CLI로 제공한다. caniuse-db와 @mdn/browser-compat-data 를 사용한다.
간편하게 JSON 포맷을 검사하고 편집할 수 있는 온라인 도구다. 다양한 보기 옵션을 제공하며, 편집한 JSON을 링크로 공유하거나 임시 API를 생성하여 호출할 수 있다.
일련의 랜덤한 문자들의 노드들을 구성한 후, 스크롤 진행에 따라 표현하고자 하는 최종 문자열을 보여주는 멋진 효과를 CSS만으로 만들어 낼 수 있다.