frontend

[Next.js] Sentry.io로 프론트엔드 모니터링 하기

가볍게 사용할 수 있지만 다양한 에러를 직관적으로 분석해주며, 알림 설정을 통해 어떤 문제가 생겼는지 알려주고 처리 할 수 있는 Sentry를 알아보자 프론트엔드 모니터링 프론트엔드에서의 오류는 크게 데이터 영역 과 화면 영역 이 두 가지 영역에서의 오류, 그리고 예상할 수 없는 네트워크 이슈나 다양한 런타임 오류로 나눌 수 있다. 이러한 오류는 언제든지 발생할 수 있는 오류이지만 개발자에게 이런 오류를 모두 예측하는 것은 거의가 아니라 불가능 한 일이다. 웹 사이트가 더욱 강력해지고 복잡해짐에 따라 성능 유리 관리가 점점 더 어려워지고 있다. 사용자는 사이트에서 경험하는 것을 기반으로 그 기업의 품질을 평가하기 때문에 사이트가 중단되거나 오류가 발생한다면 그 기업의 신뢰가 떨어질 수 있다. 프론트엔드 ..

웹팩과 바벨 (Webpack vs Babel) 넌 또 누구냐!!

웹팩이란 (WebPack)? 웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러로 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구이다. 의존성을 분석해 모듈을 번들시켜주는 역할을 하며 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build) 과정을 통해 하나의 파일로 짠! 하고 만들어준다. 웹팩의 등장 배경 웹팩이 등장한 이유는 크게 3가지이다 파일 단위의 자바스크립트 모듈 관리의 필요성 웹 개발 작업 자동화 도구 (Web Task Manager) 웹 애플리케이션의 빠른 로딩 속도와 높은 성능 웹팩설치 npm i react react-dom npm i -D we..