"Life is Full of Possibilities" - Soul, 2020

react 12

프론트엔드 에러는 왜 추적해야 할까? (Sentry)

프론트엔드 에러 추적 프론트엔드에서 에러를 추적하는 것은 사용자 경험을 보장하고, 프로덕트의 안정성을 높일 수 있다. QA 단계에서 다양한 시나리오로 테스트를 한다고 해도, 모든 예외 상황을 100% 커버할 수 없다. 사용자가 서비스를 이용하며 에러를 겪게 되면 서비스 동작에 불편함을 느끼고 신뢰도가 떨어져 결국 사용자 이탈로 이어질 수 있다. 따라서 실시간으로 에러를 모니터링하고 빠르게 대응할 수 있는 시스템을 갖추는 것이 중요하다. 에러 추적 도구 중 하나인 Sentry는 에러가 발생한 경로와 에러 발생 시점의 디바이스, 브라우저, 유저가 사용하는 OS 등의 정보까지 함께 제공한다. 심지어 사용자의 화면까지 녹화하여 상황을 그대로 재현할 수 있도록 도와준다. 이를 통해 문제의 원인을 파악하는 데까지 ..

Webpack 적용기

React 프로젝트의 번들러로 Webpack을 사용하기 위해 공부한 내용을 정리해보았다.   1. webpack 설치npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin install 하게 되면 package.json, package-lock.json, node-modules가 생성된다 - html-webpack-plugin : Webpack의 플러그인 중 하나로, Webpack으로 번들링한 자바스크립트 파일을 자동으로 HTML 파일에 삽입해주는 역할을 한다. 이를 통해 수동으로 HTML 파일을 수정할 필요 없이, 번들링된 파일이 HTML 파일에 자동으로 포함되도록 할 수 있다. 1-1. scripts 추가// package...