분류 전체보기 3

confeti 웹 성능 최적화 여정

성능 최적화가 왜 중요할까?웹에서 이미지는 페이지 로딩 속도와 사용자 경험에 큰 영향을 미친다. 최적화되지 않은 이미지는 페이지 로딩을 느리게 하고 사용자 이탈률을 높이며, SEO에도 부정적인 영향을 미칠 수 있다. 여러 요소들을 개선하여 이미지를 비롯한 전체적인 성능 최적화를 진행하려고 한다. 성능 개선에 앞서, 간단하게라도 브라우저 렌더링 과정을 알아보자.브라우저 렌더링 과정HTML 파싱 → DOM 생성 → CSS 파싱 → CSSOM 생성 → 렌더 트리 구성 → 레이아웃(리플로우) → 페인트 → 컴포지트이때 HTML을 파싱하다가 CSS나 JavaScript를 만나면 브라우저는 파싱을 중단하고 해당 리소스를 처리한다. 특히 CSS는 CSSOM 구성을 위해 완전히 다운로드되고 파싱될 때까지 렌더링을 차단..

개발 2025.05.27

Amplitude로 사용자 이벤트 추적하여 탈퇴 사유 수집하기

내가 참여 중인 프로젝트에서는, 탈퇴 사유 수집을 서버 DB에 저장해놓지 않고 Amplitude에 분석 데이터로 저장해놓는 방법을 선택했다. Amplitude란?Amplitude는 서비스를 이용하는 사용자가 취하는 모든 행동(클릭, 페이지 방문, 구매 등)을 트래킹할 수 있는 툴이다. 기존에 사용하던 툴인 GA는 개인별 추적을 지원하지 않고, 데이터가 실시간으로 수집되지않아 즉각적인 변화를 확인할 수 없다. 그러나 Amplitude는 이러한 단점을 모두 보완한다. Amplitude는 다양한 방식으로 활용할 수 있지만, 우리 서비스에서는 회원탈퇴 페이지에서 '탈퇴하기' 버튼을 누른 사용자와 그들이 선택한 탈퇴 사유를 추적하는 데 활용하기로 했다. 사용자가 선택한 옵션 값은 Amplitude 대시보드에서 바..

개발 2025.04.15

[Typescript] Typescript를 왜 사용하는지에 대해 알아보자

타입스크립트는 타입이 컴파일 시점에 결정되어 런타임 도중에 오류가 발생하는걸 방지한다 정도로만 알고, 많이들 사용하니까 나도 사용하고 있었다. 현재 대부분의 IT 기업들이 Typescript를 필수 스택으로 지정해놓다시피 하는데, 그 이유가 무엇인지 제대로 알아야 공부를 하는 목적이  와닿을 것 같아 조금 더 자세히 Typescript를 왜 써야하는지, 왜 많이들 쓰는지에 대해 알아보려고 한다. 타입스크립트는 자바스크립트에 타입을 정의하는 문법을 추가한 것으로, 자바스크립트의 한계를 극복하기 위해 등장했다.// JavaScriptlet a = 1;let b = 2;console.log(a+b);//TypeScriptlet a:number = 1;let b:number = 2;console.log(a+b)..

개발 2025.04.06