Sentry를 바로 도입하지 않고 200줄 에러 트래커를 만든 이유
Sentry 대신 필요한 기능만 남긴 작은 에러 트래커를 직접 만들어 운영한 사례를 정리했습니다.재배포 없이 기준을 조정하고 반복 에러만 선별하는 방식의 장단점을 공유했습니다.
#Sentry#Edge Function#Postgres
10800
Sentry를 바로 도입하지 않고 200줄 에러 트래커를 만든 이유
태그
CSR 기술 블로그 글
CSR 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 17개최신 17개 표시
관련 태그
최신 게시글
17개 표시
개인화 추천 템플릿 메인 페이지에 유저를 부드럽게 랜딩시키기
개인화 추천 템플릿 메인 페이지의 LCP 지연을 줄이기 위해 CSR을 유지한 채 전환 애니메이션과 네트워크·API·이미지 로딩 최적화를 적용했습니다. 그 결과 부드러운 랜딩을 확보하면서도 첫 화면 성능을 개선했습니다.
#성능#CSR#React
11100
개인화 추천 템플릿 메인 페이지에 유저를 부드럽게 랜딩시키기
쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)
쏘카 디자인 시스템 2.0 웹 개발에서 컴포넌트 구조, 패키지 전략, LLM 활용 방식을 정리했습니다. 상태 결합도에 따라 Hook과 객체를 분리하고, rollup과 Instructions 체계로 운영성을 높였습니다.
#React#Next.js#SSR
9400
CSR 환경에서 Dynamic OpenGraph 구현하기
CSR 환경에서 소셜 공유용 OpenGraph 메타 태그를 동적으로 제공하는 방법을 다뤘습니다. CloudFront Function으로 봇만 분기해 엣지에서 HTML을 응답하고 기존 CSR 구조는 유지했습니다.
#CloudFront#OpenGraph#CSR
6600
한 방울의 변화로 공동체를 변화시키다
밸런스히어로가 TERI와 협력해 물 보존과 교육을 중심으로 농촌 공동체 지원 프로젝트를 마무리했습니다. 빗물 수집, 태양광, 역량 강화 활동으로 지속 가능한 ESG 임팩트를 만들었습니다.
#ESG#CSR#지속 가능성
000
한 방울의 변화로 공동체를 변화시키다
한 방울의 변화로 공동체를 변화시키다
밸런스히어로가 TERI와 함께 물 보존과 교육을 결합한 CSR 프로젝트를 마무리했습니다. 빗물 수집, 태양광, 역량 강화로 지역사회에 지속 가능한 변화를 만들었습니다.
#ESG#CSR#지속 가능성
1200
신세계백화점 PC 메인 React 전환기
신세계백화점 PC 메인 페이지를 Spring에서 React와 Next.js 기반으로 전환했습니다.\n초기 로딩, 인피니트 스크롤, SEO까지 함께 고려해 사용자 경험과 유지보수성을 개선했습니다.
#React#Next.js#SSR
24100
2024 네이버 통합검색의 웹 성능 리뷰
네이버 통합검색의 2024년 웹 성능 지표와 개선 사례를 정리한 글입니다. LCP와 INP를 관리하고, 서치 피드에는 FUPP와 FILT를 도입해 무한 스크롤 성능을 측정했습니다.
#웹 성능#LCP#INP
13200
2024 네이버 통합검색의 웹 성능 리뷰
Airpage CSR: 한달에 400억번 요청되는 페이지 크기 60% 줄이기
한달에 400억번 요청되는 광고링크 중계페이지를 2.1KB에서 0.9KB로 줄인 개발 경험을 공유했습니다. 초고빈도 페이지의 전송 크기 최적화에 초점을 둔 사례입니다.
#CSR#성능#web
10000
SEO 톺아보기 – 정말 SSR이 SEO에 좋을까?
SSR이 SEO에 유리한 이유를 크롤링·인덱싱·랭킹 관점에서 설명했습니다. 다만 서비스 성격과 검색 엔진 특성에 따라 CSR도 충분할 수 있으며, SEO는 렌더링 방식 외 요소까지 함께 봐야 합니다.
#SEO#SSR#CSR
2500
리액트 19 신규 기능 및 개선 사항
리액트 19의 신규 기능과 개선 사항을 Actions, use API, 서버 컴포넌트 중심으로 정리했습니다. 또한 메타데이터, 스타일시트, 스크립트, 자원 preloading 등 운영상 개선점도 함께 소개했습니다.
#React#SSR#CSR
200
리액트 19 신규 기능 및 개선 사항
CSR 환경에서 Suspense로 발생한 문제 해결하고 성능 개선하기
react-router-dom 기반 CSR 환경에서 Suspense 사용 시 발생한 순차적 API 호출 문제를 프리패칭으로 개선한 사례입니다. 데이터 대기 구간을 줄여 렌더링 흐름과 성능을 높인 경험을 공유했습니다.
#React#CSR#Suspense
2100
픽업전용 장바구니
픽업 주문 진입 경로를 장바구니로 모아 고객 접근성을 높인 개발 사례입니다. 매장 선택과 렌더링 방식을 개선하고, 모니터링까지 구성했습니다.
#SSR#CSR#MSA
3400
적정기술 딜레마
적정기술을 개발 환경에 맞춰 선택해야 한다는 관점을 설명했습니다. 최신 기술의 무조건적 도입보다 요구사항, 팀 역량, 유지보수성을 함께 봐야 한다고 정리했습니다.
#React#Next.js#SSR
2200
적정기술 딜레마
라이브관 프론트엔드 입장에서 바라보기
올리브영 라이브관을 신규 아키텍처와 SSR 기반으로 전환한 프론트엔드 경험을 공유했습니다. 이미지·영상 최적화와 공통 코드 관리, 크로스 브라우징 대응 방향도 함께 정리했습니다.
#Next.js#TypeScript#SSR
2700
올리브영 메인페이지 성능 개선기
온라인몰 메인페이지의 초기 렌더링 지연과 느린 LCP 문제를 분석하고, 불필요한 지연 로직 제거와 탭 렌더링 순서 조정으로 개선했습니다. 또한 데이터 분리와 모니터링을 통해 FID, LCP, 로딩 타임을 함께 줄였습니다.
#성능#웹#모니터링
3200
Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
SSR의 개념부터 Vanilla JS와 Vue를 이용한 적용 흐름까지 단계적으로 설명했습니다. 또한 Hydration, state 동기화, 선택적 SSR과 실패 시 CSR 대체 방법까지 정리했습니다.
#Vue#SSR#CSR
100
Vue SSR 제대로 적용하기 (feat. Vanilla SSR)