B2C 서비스 레거시의 가르침 - Part2. Planning
운영 중인 B2C 프론트엔드 레거시를 개선하기 위한 플래닝 과정과 원칙을 정리했습니다. 기술 부채 정렬, 점진적 개선, 공유 문화를 통해 팀워크와 서비스 이해도를 높였습니다.
#레거시#JavaScript
22005분
필터 1
여러 프레임워크에서 사용할 수 있는 라이브러리 만들기
Framework Agnostic 개념을 바탕으로 코어와 어댑터를 분리하는 라이브러리 설계 방식을 소개했습니다. Tanstack Query와 계산기 예시로 프레임워크 독립성과 통합 구조를 설명했습니다.
#JavaScript#TypeScript
31005분
API 없이 웹 애니메이션 구현: 인터랙티브 웹 개발 2편
라이브러리 없이 수학과 물리로 웹 애니메이션을 구현한 과정을 공유했습니다. 카카오페이의 트리 조명 인터랙티브 개발 사례를 중심으로 설명했습니다.
#web#CSS
9005분
Transpiler, “사용”말고 “활용”하기
토스뱅크는 transpiler를 활용해 클릭 요소에 로깅 속성을 자동 주입하는 방식을 만들었습니다. 이를 통해 개발자는 로깅을 신경 쓰지 않고 비즈니스 로직에 집중할 수 있게 되었습니다.
#transpiler#Babel
32005분
패키지 매니저의 과거, 토스의 선택, 그리고 미래
JavaScript 패키지 매니저의 동작 원리와 npm, pnpm, Yarn의 차이를 설명했습니다. 토스가 Yarn PnP를 선택한 이유와 Zero-install, Import Map의 방향성도 함께 다뤘습니다.
#Yarn#pnpm
21005분
Biome: 차세대 JS Linter와 Formatter
Biome은 JavaScript와 TypeScript를 위한 빠른 포매터·린터 통합 도구를 소개했습니다. 설정 단순화와 속도 향상이 장점이지만, 아직 지원 언어와 레퍼런스는 제한적입니다.
#Biome#JavaScript
5005분
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터
네이버 통합 검색의 웹 성능 - 모니터링과 성능 개선
네이버 통합 검색은 성능 리포트와 알람으로 웹 성능 변화를 지속적으로 모니터링했습니다. 또한 JavaScript 로딩 시점을 조정해 LCP를 개선하고 오류를 함께 관리했습니다.
#모니터링#성능
29005분
너무 웃어서 광대가 아팠던 개발팀 워크샵을 돌아보며
개발팀 워크샵을 준비하고 다녀온 과정을 돌아보며 리프레시와 팀워크의 의미를 기록했습니다. 세미나, 게임, 식사, 러닝을 함께하며 서로를 더 잘 이해한 즐거운 시간이었습니다.
#워크샵#세미나
20005분
HEIC 파일 포맷 지원을 통한 사용자 경험 향상 시키기
이미지 업로드에서 HEIC 파일로 인한 오류를 해결하기 위해 파일 시그니처를 검사하는 방법을 소개했습니다. 브라우저에서 HEIC를 감지하고 JPEG로 변환해 사용자 경험을 개선하는 방안을 설명했습니다.
#JavaScript#UI/UX
10005분
GitHub Actions 활용하기
GitHub Actions의 기본 개념과 핵심 구성 요소를 정리하고, JavaScript 액션 예시를 통해 자동 머지 흐름을 소개했습니다. 반복적인 빌드·테스트·배포 작업을 워크플로우로 자동화하는 방법도 함께 설명했습니다.
#GitHub Actions#CI/CD
48005분
Execution Context
실행 컨텍스트를 통해 자바스크립트의 스코프, 호이스팅, this 바인딩을 설명했습니다. 콜스택과 환경 레코드 흐름을 이해하면 디버깅과 코드 해석에 도움이 됩니다.
#JavaScript#비동기
20005분
SVG를 이용하여 Animation 만들기
SVG 도형을 추출해 ID와 그룹 단위로 CSS 애니메이션을 적용하는 방법을 정리했습니다. hover 이동, 클릭 색상 변경, 순차 등장 애니메이션까지 구현 과정을 소개했습니다.
#SVG#Animation
60005분