React와 Day.js를 활용한 공수 캘린더 직접 구현하기
React와 Day.js로 공수·메모 등 날짜별 정보를 담는 재사용 가능한 캘린더를 구현했습니다.\n날짜 계산과 UI를 분리하고 빈칸 배열 및 CSS Grid 정렬의 중요성을 설명합니다.
#React#Day.js
2900
프론트엔드 기술 블로그 최신 글
필터 0
critical-script, 배달의민족 웹뷰 로딩 성능을 30% 개선한 인라인 스크립트 로딩 전략 이야기
critical-script, 배달의민족 웹뷰 로딩 성능을 30% 개선한 인라인 스크립트 로딩 전략 이야기
인라인 스크립트로 초기 API 요청을 번들 로딩과 병렬화해 웹뷰 LCP를 37% 개선했습니다. Vite 플러그인으로 타입 공유, 페이지 인접 배치, 스크립트 크기 제한을 지원했습니다.
#React#Next.js
3400
앱 리뷰 자동화 일주일만에 만들기
앱 리뷰 자동화 일주일만에 만들기
약 3년간 방치된 원티드 Android·iOS 앱 리뷰에 다시 답글을 달기 시작했습니다. 이를 위해 일주일 만에 리뷰 답글 자동화를 구축했습니다.
#Android#iOS
3300
Module Federation: singleton이면 당연히 하나겠죠?
Module Federation에서 singleton만으로 해결되지 않는 React·Context 중복 원인을 분석했습니다. 런타임, import 경로, pnpm 설치 사본까지 점검 기준을 제시합니다.
#module federation#React
1900
2026년과 이후 JavaScript의 동향 - 브라우저 밖의 JavaScript
2026년과 이후 JavaScript의 동향 - 브라우저 밖의 JavaScript
브라우저 밖 JavaScript 생태계의 2019년 이후 변화를 Node.js 중심으로 정리했습니다. 런타임 호환성, 내장 기능, 공급망 보안과 릴리스 정책 변화를 살펴봤습니다.
#JavaScript#node.js
4800
2026년과 이후 JavaScript의 동향 - JavaScript(ECMAScript)
2026년과 이후 JavaScript의 동향 - JavaScript(ECMAScript)
2020년 이후 JavaScript 생태계의 ESM·도구 언어·TypeScript 변화를 정리했습니다.\nTC39 절차와 ES2026 기능, 런타임 지원 현황 및 진행 중인 제안을 살펴봤습니다.
#JavaScript#ECMAScript
2000
SI 퍼블리셔를 위한 웹 접근성(A11y) 실전 가이드
React SPA에서 자주 발생하는 웹 접근성 결함과 JSX 마크업 규칙을 정리했습니다. 모달·아코디언·동적 알림의 ARIA 및 초점 제어 검증 방법을 제시합니다.
#React#웹 접근성
1200
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
브라우저에서 SVG 필터로 이미지 보정 기능을 구현하는 활용 사례를 다룹니다. 실제 프로젝트 적용 시 마주치는 실전 이슈를 중심으로 설명합니다.
#SVG#이미지 보정
1100
여기어때 해외투어 프론트엔드 구축기록
여기어때 해외투어 프론트엔드 구축기록
모노레포 기반으로 웹·앱 웹뷰·채팅을 병렬 구축한 과정을 정리했습니다. 컴포넌트 중심 설계와 API 계층화로 QA 대응과 후속 확장을 개선했습니다.
#React#Vite
3100
모바일 앱 QA, 어디서 어떻게 검증해야 할까
모바일 앱 QA에서 실기기로 Safe Area, 키보드, 터치, 화면 전환을 검증해야 하는 이유를 설명했습니다. 출시 전후 목적에 맞춘 이슈 기록과 재검수 운영 원칙을 제안합니다.
#TestFlight#iOS
3000
토스뱅크가 패키지를 관리하는 방식 #2: 토스뱅크 패키지의 세 가지 기준
패키지의 문법과 모듈 구조를 유지하고, 환경별 변환과 번들링은 호스트에 맡겼습니다. declaration sourcemap과 원본 파일을 제공해 사용처의 구현 확인과 디버깅을 지원합니다.
#TypeScript#JavaScript
2700
토스뱅크가 패키지를 관리하는 방식 #1: 패키지를 ESM으로만 제공하기로 했어요
ESM·CJS 이중 배포에서 발생하는 상태 분리와 타입 누락 문제를 분석했습니다. 사내 패키지를 ESM-only로 전환해 관리와 디버깅 복잡도를 줄였습니다.
#ESM#CommonJS
4100
영상 최적화의 대상은 영상만이 아니었다
WebView별 영상 재생 제약에 스틸 이미지·스프라이트 대체 경로를 설계했습니다. 해상도와 인코딩은 실기기 검증으로 사용자 흐름 중심으로 최적화했습니다.
#WebView#video
500
프리로드 API 없는 광고 SDK에 프리로딩을 적용하며 배운 것
프리로드 API 없는 광고 SDK를 hidden 세션으로 선실행해 반복 대기 시간을 줄이는 구조를 설계했습니다.\n우선순위 병합, 노출 신호 보류, 세션 정리와 폴백·관측 기준을 정리했습니다.
#프리로딩#performance
200