Next/Image를 활용한 이미지 최적화
Next/Image로 지연 로딩·WebP 변환·반응형 이미지를 적용해 이미지 전송량과 로딩 시간을 줄였습니다. `sizes`와 srcSet 설정을 조정해 과도한 고해상도 요청 및 최초 생성 지연을 해결했습니다.
#Next.js#Next/Image
100
프론트엔드 기술 블로그 최신 글
필터 0
Next/Image를 활용한 이미지 최적화
Next/Image를 활용한 이미지 최적화
Next/Image로 lazy loading, WebP 변환, placeholder를 적용해 이미지 전송량과 로딩 시간을 줄였습니다. layouts와 sizes 설정을 조정해 과도한 고해상도 요청 및 이미지 생성 비용을 해결했습니다.
#Next.js#Next/Image
3700
신입 웹프론트엔드 개발자 2개월 차 후기
신입 웹프론트엔드 개발자 2개월 차 후기
2개월 온보딩에서 Next.js 렌더링, 모노레포, Storybook의 동작과 활용 방식을 학습했습니다. 빌드·배포·협업 흐름을 경험하고 온보딩 문서화와 과제 구성 개선점을 제안했습니다.
#Next.js#SSG
3800
React Query와 함께 Concurrent UI Pattern을 도입하는 방법
React Query의 Suspense 옵션과 Error Boundary로 로딩·오류 UI를 선언적으로 분리했습니다. 경계 구성으로 복잡한 비동기 화면의 유지보수와 UX 설계를 개선하는 방식을 소개합니다.
#React#React Query
2700
Android 비트맵 로딩 라이브러리에 대한 벤치마크 테스트
유지 보수가 중단된 AUIL의 대안으로 Glide와 Coil을 이미지 로딩 조건별로 비교했습니다. 성능과 자원 사용량의 균형, 중복 4K 이미지 처리 결과를 근거로 Glide를 도입했습니다.
#Android#Glide
3000
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
Webpack의 Babel-Loader와 Terser를 Esbuild 기반 구성으로 교체해 빌드 시간을 비교했습니다. 개발·프로덕션·CI 환경에서 Esbuild 적용 시 상대적인 빌드 시간 단축을 확인했습니다.
#Webpack#esbuild
300
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
Webpack의 Babel-Loader와 Terser를 Esbuild-Loader·Minify로 교체해 빌드 시간을 비교했습니다. 개발 서버와 CI 프로덕션 빌드에서 Esbuild 조합의 유의미한 단축 효과를 확인했습니다.
#webpack#esbuild
2100
올리브영 테크블로그 Gatsby 전환&개발기
Jekyll 기술 블로그를 Gatsby 기반으로 전환한 배경과 설계·배포 과정을 정리했습니다. React 구조와 Plugin, Netlify로 개발·운영 편의성과 SEO를 강화했습니다.
#Gatsby#React
12200
웹 애니메이션을 구현하는 4가지 방법 (feat. animation API)
CSS transition·animation, SVG, Animation API로 메뉴 전환 애니메이션을 구현했습니다. 복잡한 상호작용에는 Promise와 그룹 관리를 지원하는 Animation API를 제시합니다.
#CSS#SVG
100
웹 애니메이션을 구현하는 4가지 방법 (feat. animation API)
웹 애니메이션을 구현하는 4가지 방법 (feat. animation API)
햄버거 메뉴를 X 버튼으로 전환하는 예제로 웹 애니메이션 구현 방식 4가지를 비교했습니다. 단순 전환부터 복잡한 인터랙션까지 CSS, SVG, Animation API의 특성을 설명합니다.
#CSS#SVG
5400
함수형 프로그래밍 (Functional Programming) 어떻게 적용할까?
함수형 프로그래밍 (Functional Programming) 어떻게 적용할까?
함수형 프로그래밍의 순수 함수·불변성·선언적 추상화·커링 개념을 설명했습니다. RxJS와 React Custom Hook 사례로 OOP와 FP를 상황에 맞게 혼용하는 방법을 소개합니다.
#JavaScript#함수형 프로그래밍
2500
Gatsby를 어떻게 적용할 수 있을까? (+ gatsby에 typescript 적용하기)
Gatsby의 JAMstack 기반 사전 렌더링 구조와 React·SEO 측면의 선택 이유를 소개했습니다. Jekyll 기술 블로그 마이그레이션 계획과 Gatsby에 TypeScript를 설정하는 과정을 정리했습니다.
#Gatsby#React
2300
쮸니어 안드로이드 개발자의 카카오페이 입사 후 적응기
안드로이드 신입 개발자의 온보딩 스터디와 채용 과제 리팩토링 경험을 공유했습니다. 계정 서비스 업무 적응과 Gradle version catalog 도입 사례를 소개합니다.
#Android#Kotlin
3300
Webpack Module Federation 도입 전에 알아야 할 것들
Webpack Module Federation의 원격 모듈 통합 원리와 핵심 용어를 설명했습니다. 독립 배포의 장점과 타입·환경별 경로 관리의 제약을 함께 짚었습니다.
#Webpack#Module Federation
000