Sentry를 바로 도입하지 않고 200줄 에러 트래커를 만든 이유
Sentry를 바로 도입하지 않고 200줄 에러 트래커를 만든 이유
Sentry 대신 필요한 기능만 남긴 작은 에러 트래커를 직접 만들어 운영한 사례를 정리했습니다.재배포 없이 기준을 조정하고 반복 에러만 선별하는 방식의 장단점을 공유했습니다.
#Sentry#Edge Function
105005분
필터 1
개인화 추천 템플릿 메인 페이지에 유저를 부드럽게 랜딩시키기
개인화 추천 템플릿 메인 페이지에 유저를 부드럽게 랜딩시키기
개인화 추천 템플릿 메인 페이지의 LCP 지연을 줄이기 위해 CSR을 유지한 채 전환 애니메이션과 네트워크·API·이미지 로딩 최적화를 적용했습니다. 그 결과 부드러운 랜딩을 확보하면서도 첫 화면 성능을 개선했습니다.
#성능#CSR
110005분
쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)
쏘카 디자인 시스템 2.0 웹 개발에서 컴포넌트 구조, 패키지 전략, LLM 활용 방식을 정리했습니다. 상태 결합도에 따라 Hook과 객체를 분리하고, rollup과 Instructions 체계로 운영성을 높였습니다.
#React#Next.js
93005분
CSR 환경에서 Dynamic OpenGraph 구현하기
CSR 환경에서 소셜 공유용 OpenGraph 메타 태그를 동적으로 제공하는 방법을 다뤘습니다. CloudFront Function으로 봇만 분기해 엣지에서 HTML을 응답하고 기존 CSR 구조는 유지했습니다.
#CloudFront#OpenGraph
66005분
한 방울의 변화로 공동체를 변화시키다
한 방울의 변화로 공동체를 변화시키다
밸런스히어로가 TERI와 협력해 물 보존과 교육을 중심으로 농촌 공동체 지원 프로젝트를 마무리했습니다. 빗물 수집, 태양광, 역량 강화 활동으로 지속 가능한 ESG 임팩트를 만들었습니다.
#ESG#CSR
0005분
한 방울의 변화로 공동체를 변화시키다
밸런스히어로가 TERI와 함께 물 보존과 교육을 결합한 CSR 프로젝트를 마무리했습니다. 빗물 수집, 태양광, 역량 강화로 지역사회에 지속 가능한 변화를 만들었습니다.
#ESG#CSR
10005분
신세계백화점 PC 메인 React 전환기
신세계백화점 PC 메인 페이지를 Spring에서 React와 Next.js 기반으로 전환했습니다.\n초기 로딩, 인피니트 스크롤, SEO까지 함께 고려해 사용자 경험과 유지보수성을 개선했습니다.
#React#Next.js
241005분
2024 네이버 통합검색의 웹 성능 리뷰
2024 네이버 통합검색의 웹 성능 리뷰
네이버 통합검색의 2024년 웹 성능 지표와 개선 사례를 정리한 글입니다. LCP와 INP를 관리하고, 서치 피드에는 FUPP와 FILT를 도입해 무한 스크롤 성능을 측정했습니다.
#웹 성능#LCP
131005분
Airpage CSR: 한달에 400억번 요청되는 페이지 크기 60% 줄이기
한달에 400억번 요청되는 광고링크 중계페이지를 2.1KB에서 0.9KB로 줄인 개발 경험을 공유했습니다. 초고빈도 페이지의 전송 크기 최적화에 초점을 둔 사례입니다.
#CSR#성능
100005분
리액트 19 신규 기능 및 개선 사항
리액트 19 신규 기능 및 개선 사항
리액트 19의 신규 기능과 개선 사항을 Actions, use API, 서버 컴포넌트 중심으로 정리했습니다. 또한 메타데이터, 스타일시트, 스크립트, 자원 preloading 등 운영상 개선점도 함께 소개했습니다.
#React#SSR
0005분
Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
SSR의 개념부터 Vanilla JS와 Vue를 이용한 적용 흐름까지 단계적으로 설명했습니다. 또한 Hydration, state 동기화, 선택적 SSR과 실패 시 CSR 대체 방법까지 정리했습니다.
#Vue#SSR
0005분