데이블

RSS

게시글: 50
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
Biome: 차세대 JS Linter와 Formatter
이 글은 JavaScript 코드 포맷터와 린터 역할을 동시에 수행하는 Biome이라는 도구를 소개합니다. Biome은 Prettier의 경쟁자로, Rust로 개발되어 성능 개선을 목표로 합니다. Biome은 과거 Rome 프로젝트를 포크하여 탄생했으며, "Bis(다시) + Rome"의 의미를 담고 있습니다. Rome 프로젝트는 번들링, 컴파일, 포매팅, 린팅, 테스트 등 올인원 솔루션을 지향했으나 중단되었고, Biome은 이를 계승하여 웹 프로젝트를 위한 툴체인으로 발전하고 있습니다. Prettier의 독보적인 위치에 대한 대안으로 Biome의 등장 배경과 특징을 설명하며, 웹 개발 생산성 향상에 기여할 수 있는 도구로 주목하고 있습니다.
BiomeJavaScriptLinter
데이블·2024년 5월 16일
Frontend
리액트 19 신규 기능 및 개선 사항
데이블 Service Front-end Team의 이진호님이 작성한 글입니다. 리액트 19의 새로운 기능과 개선 사항을 소개하며, 특히 사용자 액션 제어와 렌더링 자원 관리를 위한 새로운 API에 초점을 맞춥니다. 이전 버전인 리액트 18 이후 2년 만에 출시되는 리액트 19는 개발자 경험 향상을 목표로 합니다. 주요 신규 기능으로는 useActionState, useOptimistic, useFormStatus가 있으며, 이들은 입력 폼 처리와 관련된 복잡한 상태 관리를 간소화합니다. useActionState는 비동기 작업의 상태(에러, 제출 중 여부)를 관리하고, useOptimistic은 UI 업데이트를 최적화하며, useFormStatus는 폼 제출 상태를 쉽게 파악하도록 돕습니다. 이러한 기능들은 프론트엔드 개발의 편의성과 효율성을 높일 것으로 기대됩니다.
React 19FrontenduseActionState
데이블·2024년 5월 14일
Frontend
알쓸신CSS (알아두면 언젠가 쓸 수도 있는 새로운 CSS 속성)
이 글은 아직 널리 지원되지는 않지만 알아두면 유용한 새로운 CSS 속성 6가지를 소개합니다. 소개되는 속성들은 gap, subgrid, ::marker, :is, :where, :root & var(), @supports 입니다. 특히 gap 속성은 grid, flex, multi-column 레이아웃에서 요소 간의 여백을 쉽게 설정할 수 있도록 변경되었으며, grid 레이아웃에서는 가로 및 세로 여백을 개별적으로 설정하는 예시를 보여줍니다. 또한, ::marker는 리스트 마커의 스타일을 변경하고, :is와 :where는 선택자를 더 간결하게 작성할 수 있게 합니다. :root와 var()는 CSS 변수를 활용하는 방법을, @supports는 특정 CSS 기능 지원 여부를 확인하는 방법을 설명합니다. 이 새로운 속성들을 통해 더욱 유연하고 효율적인 웹 페이지 스타일링이 가능해질 것입니다.
CSSgapsubgrid
데이블·2021년 9월 29일
Frontend
ES6 이후의 변경점 총정리
이 글은 ES6(ES2015) 이후 ECMAScript 표준에 추가된 주요 변경점들을 정리합니다. ES2016에서 도입된 Array.prototype.includes() 메서드와 지수 연산자(**)를 소개하고, ES2017에서 추가된 String.prototype.padStart(), String.prototype.padEnd() 메서드, Object.entries(), Object.values() 메서드, 그리고 Object.getOwnPropertyDescriptors() 메서드에 대해 설명합니다. 이러한 새로운 기능들은 자바스크립트 코드의 가독성과 효율성을 높이는 데 기여합니다.
JavaScriptES6ECMAScript
데이블·2021년 9월 12일
Frontend
드디어 Internet Explorer가 은퇴를 합니다
이 글은 오랫동안 웹 개발의 골칫거리였던 Internet Explorer(IE)의 공식적인 은퇴를 알리고, 그 의미와 변화에 대해 다룹니다. IE는 과거 웹 표준을 제대로 지원하지 않아 개발자들에게 많은 어려움을 안겨주었으며, 이로 인해 웹사이트 호환성 문제가 빈번하게 발생했습니다. IE의 은퇴는 웹 개발 환경에 긍정적인 변화를 가져올 것으로 기대됩니다. 개발자들은 이제 최신 웹 표준을 준수하는 브라우저에 집중할 수 있게 되어, 보다 효율적이고 일관된 웹 경험을 제공할 수 있게 될 것입니다. 특히 데이블 위젯 개발팀의 관점에서 IE 지원 중단이 가져올 변화와 앞으로의 개발 방향에 대한 내용을 포함하고 있습니다. IE의 은퇴는 웹 기술 발전의 중요한 이정표가 될 것입니다.
Internet ExplorerIE RetirementWeb Browser
데이블·2021년 8월 23일
Frontend
언론사 웹 사이트가 데이블을 만나면
이 글은 언론사 웹사이트의 불편한 사용자 경험, 특히 과도하고 혼란스러운 광고 문제에 대해 다룹니다. 많은 사용자들이 네이버, 다음 같은 포털에서 뉴스를 읽는 이유가 언론사 사이트의 낮은 사용성과 광고 때문이라고 지적합니다. 언론사는 광고 수익에 의존하지만, 과도한 광고는 오히려 사용자 경험을 해쳐 이탈을 유발하는 악순환을 만듭니다. 데이블은 뉴스 추천 플랫폼으로서 언론사와 협력하며 사용자 편의와 수익 창출을 동시에 추구하지만, 사용자 경험을 해치는 광고는 거부하는 정책을 펼칩니다. HTML5 API, SEO, 웹 접근성 등의 기술을 활용하여 콘텐츠를 가리거나 사용자 경험을 저해하는 광고 유형을 개선하려는 데이블의 접근 방식을 설명합니다.
웹사이트광고사용성
데이블·2021년 4월 14일
Frontend
BFCache 동작에서 발견된 iframe 내 비정상적 이벤트 발생 현상
이 글은 iOS 환경에서 BFCache 사용 시 iframe 내에서 발생하는 비정상적인 이벤트 흐름 문제를 다룹니다. 일반적인 BFCache 관련 이벤트 문제는 페이지 이동 시 발생하는 이벤트가 달라지는 것이지만, 이 문제는 페이지 이동 후 iframe 내부에서 발생하는 이벤트 흐름의 이상 현상입니다. 특정 버전의 iPhone 브라우저(사파리, 크롬, 네이버 앱)에서 간헐적으로 발생하며 안드로이드에서는 재현되지 않습니다. 문제 발생 조건은 뒤로 가기 버튼으로 페이지 전환, iframe src 변경 없음, iframe 내부에 link element 존재입니다. link element가 없으면 이슈가 재현되지 않는 것으로 보아, CSS 파일 로딩 실패와 같은 상황이 이벤트 처리에 영향을 미치는 것으로 추정됩니다. 해결책으로는 이벤트 처리를 조정하는 방안이 제시될 예정입니다.
BFCacheiframeiOS
데이블·2019년 10월 5일
Frontend
TypeScript in the real world - 02
본 글은 'TypeScript in the real world - 02'라는 제목으로, TypeScript에서 함수가 다양한 타입의 인자를 받을 때 이를 효과적으로 처리하는 방법에 대해 설명합니다. 특히 Union 타입과 Generic을 활용하여 유연하고 안전하게 함수 인자의 타입을 정의하는 방법을 다룹니다. 이를 통해 복잡한 타입 시나리오에서도 코드의 가독성과 유지보수성을 높일 수 있습니다. 실제 개발 환경에서의 TypeScript 활용 사례를 통해 Union과 Generic의 유용성을 보여주며, 관련 참고 자료도 함께 제공합니다.
TypeScriptUnionGeneric
데이블·2019년 9월 21일