프론트엔드 아티클

새로운 기술 블로그가 추가되었어요

아임웹

필터 0

선택된 필터 없음

2024년 6월 7일

프론트엔드

Flutter에서 커스텀 린트 활용하기

Flutter 프로젝트에 custom_lint를 도입해 팀 전용 린트 규칙과 자동 수정 기능을 구성한 사례를 소개했습니다. 웹 빌드에서 Platform 사용 문제를 계기로 PlatformHelper와 린트 규칙을 함께 정리하는 흐름을 설명했습니다.

Vite로 구버전 브라우저 지원하기

Vite 레거시 플러그인으로 구버전 Safari와 Chrome의 흰 화면 문제를 해결한 사례를 다루었습니다. targets 설정만으로는 부족해 modernPolyfills를 함께 조정한 과정도 설명했습니다.

테스트 자동화도 무신사(QA)랑해

무신사 QA팀의 웹 테스트 자동화 운영 방식과 도구 구성을 소개했습니다. 릴리스 전후 회귀 테스트를 통해 품질과 안정성을 높인 사례입니다.

여러 프레임워크에서 사용할 수 있는 라이브러리 만들기

Framework Agnostic 개념을 바탕으로 코어와 어댑터를 분리하는 라이브러리 설계 방식을 소개했습니다. Tanstack Query와 계산기 예시로 프레임워크 독립성과 통합 구조를 설명했습니다.

#JavaScript#TypeScript

30005분

2024년 5월 31일

프론트엔드

B2C 서비스 레거시의 가르침 - Part1. Mental Model

레거시와 기술 부채를 부정적으로만 보지 말고, 문제 정의와 정렬부터 시작해야 한다고 정리했습니다.\n5 Whys와 이해관계자 매핑 같은 프레임워크로 개선의 출발점을 잡는 방법을 제안했습니다.

#legacy#technical debt

24005분

2024년 5월 30일

프론트엔드

드래그 앤 드롭은 사실 편한 UX가 아니다?

드래그 앤 드롭 순서 변경 기능을 접근성 관점에서 재설계한 사례를 소개했습니다. 스크린 리더, 초점 이동, ARIA 적용과 디바이스별 대응 방법도 함께 정리했습니다.

API 없이 웹 애니메이션 구현: 인터랙티브 웹 개발 2편

라이브러리 없이 수학과 물리로 웹 애니메이션을 구현한 과정을 공유했습니다. 카카오페이의 트리 조명 인터랙티브 개발 사례를 중심으로 설명했습니다.

Transpiler, “사용”말고 “활용”하기

토스뱅크는 transpiler를 활용해 클릭 요소에 로깅 속성을 자동 주입하는 방식을 만들었습니다. 이를 통해 개발자는 로깅을 신경 쓰지 않고 비즈니스 로직에 집중할 수 있게 되었습니다.

iOS 멀티 프레임워크 환경에서 리소스 효율적으로 관리하기

iOS 멀티 프레임워크 환경에서 리소스를 효율적으로 관리하기 위한 리소스 모듈 구축 과정을 소개합니다. 앱 용량 영향을 줄이기 위한 분리 관리 방향을 다룹니다.

패키지 매니저의 과거, 토스의 선택, 그리고 미래

JavaScript 패키지 매니저의 동작 원리와 npm, pnpm, Yarn의 차이를 설명했습니다. 토스가 Yarn PnP를 선택한 이유와 Zero-install, Import Map의 방향성도 함께 다뤘습니다.

#Yarn#pnpm

19005분

Biome: 차세대 JS Linter와 Formatter

2024년 5월 16일

프론트엔드

Biome: 차세대 JS Linter와 Formatter

Biome은 JavaScript와 TypeScript를 위한 빠른 포매터·린터 통합 도구를 소개했습니다. 설정 단순화와 속도 향상이 장점이지만, 아직 지원 언어와 레퍼런스는 제한적입니다.

리액트 19 신규 기능 및 개선 사항

리액트 19의 신규 기능과 개선 사항을 Actions, use API, 서버 컴포넌트 중심으로 정리했습니다. 또한 메타데이터, 스타일시트, 스크립트, 자원 preloading 등 운영상 개선점도 함께 소개했습니다.

#React#SSR

1005분