패키지 매니저의 과거, 토스의 선택, 그리고 미래
JavaScript 패키지 매니저의 동작 원리와 npm, pnpm, Yarn의 차이를 설명했습니다. 토스가 Yarn PnP를 선택한 이유와 Zero-install, Import Map의 방향성도 함께 다뤘습니다.
#Yarn#pnpm
2900
프론트엔드 기술 블로그 최신 글
필터 0
Biome: 차세대 JS Linter와 Formatter
Biome: 차세대 JS Linter와 Formatter
Biome은 JavaScript와 TypeScript를 위한 빠른 포매터·린터 통합 도구를 소개했습니다. 설정 단순화와 속도 향상이 장점이지만, 아직 지원 언어와 레퍼런스는 제한적입니다.
#Biome#JavaScript
800
리액트 19 신규 기능 및 개선 사항
리액트 19 신규 기능 및 개선 사항
리액트 19의 신규 기능과 개선 사항을 Actions, use API, 서버 컴포넌트 중심으로 정리했습니다. 또한 메타데이터, 스타일시트, 스크립트, 자원 preloading 등 운영상 개선점도 함께 소개했습니다.
#React#SSR
1000
네이버 통합 검색의 웹 성능 - 데이터 수집과 시각화
네이버 통합 검색의 웹 성능 - 데이터 수집과 시각화
네이버 통합 검색의 웹 성능을 실제 사용자 환경 기준으로 측정하고 관리하기 위해 LCP 필드 데이터와 대시보드를 구축했습니다. 실시간 모니터링과 상세 분석을 분리해 성능 현황 파악과 원인 분석이 가능하도록 설계했습니다.
#웹 성능#웹 바이털
3200
styled-components가 런타임에 css를 주입하는 방법
styled-components의 런타임 CSS 주입 흐름과 내부 동작 원리를 단계별로 정리했습니다. 또한 동적 스타일링의 편의성과 런타임 성능 부담, 대안 도구까지 함께 살펴보았습니다.
#styled-components#CSS-in-JS
3100
보다 현대적인 UI/UX를 적용하기
부스타 데이터 대시보드를 더 현대적인 UI/UX로 개선한 과정을 소개했습니다. 머티리얼 디자인, 통일성, 반응형을 중심으로 사용자 친화적인 화면을 만들고자 했습니다.
#UI/UX#대시보드
2000
Next.js 캐싱으로 웹 서버 성능 최적화
Next.js Full Route Cache 적용을 위해 상품 페이지를 ISR 기반 정적 경로로 전환했습니다. 평균 TPS를 34에서 220으로 높이고 CPU·응답시간을 개선했습니다.
#Next.js#SSR
200
Next.js 캐싱으로 웹 서버 성능 최적화
Next.js 캐싱으로 웹 서버 성능 최적화
Next.js App Router에서 Full Route Cache를 활용해 상품 목록·상세 페이지의 서버 렌더링 비용을 줄인 사례입니다. 부하테스트에서 TPS를 크게 개선하고 CPU 사용률도 낮췄습니다.
#Next.js#SSR
4700
네이버 통합 검색의 웹 성능 - 모니터링과 성능 개선
네이버 통합 검색의 웹 성능 - 모니터링과 성능 개선
네이버 통합 검색은 성능 리포트와 알람으로 웹 성능 변화를 지속적으로 모니터링했습니다. 또한 JavaScript 로딩 시점을 조정해 LCP를 개선하고 오류를 함께 관리했습니다.
#모니터링#성능
3300
(당근!) 반가운 중고거래 키워드 알림 만들기
키워드 알림의 오픈율 저하와 불필요한 알림 문제를 개선한 사례를 소개했습니다. 별도 모듈화, 공통 데이터 추상화, 섹션 확장 설계로 빠른 실험과 검증을 가능하게 했습니다.
#iOS#module
3300
오버레이 권한을 받았는데 오버레이가 안됩니다. - 제 폰에선 되는데요??
오버레이 권한을 받았는데 오버레이가 안됩니다. - 제 폰에선 되는데요??
오버레이 권한을 받았는데도 일부 기기에서 오버레이가 뜨지 않는 문제를 다룹니다. 작성자 기기에서는 되지만 다른 폰에서는 안 되는 차이를 중심으로 살펴봅니다.
#Android#Compose
2300
개발 파트 소개 - 3. 모바일 앱 개발 파트 (React Native)
React Native 기반 모바일 앱 개발의 기술 스택과 협업·배포 방식을 소개했습니다. 성능 최적화와 오류 추적, 기술 전환 판단의 중요성을 다뤘습니다.
#React Native#TypeScript
100
개발 파트 소개 - 2. 웹 프론트엔드 파트
인프랩 웹 프론트엔드 파트의 기술 스택, 개발·배포·모니터링 방식을 소개했습니다. VanillaJS 기반 레거시를 TypeScript·React 기반 신규 시스템으로 점진 전환하고 있습니다.
#JavaScript#TypeScript
000
Tech Radio : FE 개발자와 디자이너의 협업
Tech Radio : FE 개발자와 디자이너의 협업
FE 개발자와 디자이너가 Nelo 4.0 리뉴얼을 함께하며 협업 방식을 나눈 인터뷰입니다. 서로의 전문성을 존중하고 신뢰를 쌓는 태도가 좋은 결과로 이어졌습니다.
#UI/UX#협업
2600