react7 [Next] Sentry로 실시간 Error 모니터링 하기 들어가며 최근 우리 회사의 Next.js 기반 웹 애플리케이션의 복잡성이 급격히 증가하면서, 운영 환경에서 발생하는 문제가 프론트엔드에서 비롯된 것인지, 아니면 백엔드에서 기인한 것인지 구분하기 어려운 상황이 자주 발생했습니다. 기존에는 Datadog을 사용하여 API 관련 에러를 추적하고 있었지만, 프론트엔드에서 발생하는 에러에 대한 로그 수집과 추적이 미흡하여 문제 해결에 많은 어려움을 겪었습니다. 이러한 도전을 극복하기 위해, 우리는 애플리케이션의 안정성과 성능을 지속적으로 개선해야 할 필요성을 느꼈고, 그 해결책으로 Sentry의 도입을 결정하게 되었고, 이번 포스팅에서는 간단하게 Sentry란 무엇이고 next.js에 적용하는 방법을 포스팅 하려고합니다. 1. Sentry란 무엇인가? Sentr.. 2024. 4. 22. [React] image 파일 불러오기 들어가며 프로젝트 초기 설정에서 React와 함께 이미지를 불러오는 데 문제가 발생하는 것은 종종 겪게 되는데, 이러한 문제를 해결하기 위해 몇 가지 주요 원인과 해결 방법을 정리해 보려고한다. 이슈 발생 배경 React 프로젝트를 CRA(create-react-app) 없이 npm init으로 시작하고, webpack과 babel 등을 직접 설정하는 과정에서 이미지를 제대로 불러오지 못하는 문제가 발생. 주요 문제 원인 환경 변수 설정: public 폴더가 webpack에 의해 직접 관리되지 않음으로 인해, 이 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수의 사용이 필요. loader 미설치: 이미지와 같은 정적 자원을 처리하기 위해 file-loader 또는 url-loader 같은 webpa.. 2024. 2. 7. [Error]ModuleFederation Shared module is not available for eager consumption(웹팩 모듈 페더레이션과 즉시 로딩: react 모듈 사용 시 발생하는 오류 해결하기) 에러 발생 애플리케이션 개발 중, 웹팩의 모듈 페더레이션 기능을 사용하여 react 모듈을 공유하려 할 때 다음과 같은 오류 메시지가 나타났다. Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react 에러 발생 소스 이 오류는 웹팩의 ModuleFederationPlugin을 사용하여 마이크로프론트엔드 아키텍처에서 공유 모듈(react 및 react-dom 등)을 설정할 때 발생했다. 특히, react 모듈을 애플리케이션의 다른 부분에서 "즉시(eagerly)" 사용하고자 할 때 이 문제가 나타났다. 웹팩 설정 예제: plugins: [ new ModuleFederation.. 2024. 2. 4. [MFA] 자바스크립트 트랜스파일러란? 트랜스파일러란? 트랜스파일러는 한 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어로 변환하는 도구입니다. 주로 웹 개발 분야에서 활발히 사용되며, 이 도구의 가장 대표적인 사용 사례는 최신 버전의 언어로 작성된 코드를 이전 버전의 언어로 변환하는 것입니다. 예를 들어, 최신 ECMAScript 표준을 사용하여 JavaScript 코드를 작성한 경우, 트랜스파일러는 이 코드를 구형 브라우저에서도 이해할 수 있는 이전 버전의 JavaScript로 변환합니다. 이러한 변환 과정을 통해 개발자는 최신 언어 기능을 자유롭게 활용할 수 있으면서도, 다양한 브라우저와 운영 환경에서 코드가 원활하게 작동하도록 할 수 있습니다. 트랜스파일러의 주요 장점 최신 언어 기능의 활용 개발자는 최신 프로그래밍 언어의 기능과.. 2024. 1. 28. 이전 1 2 다음
