Vue Academy · 강의

모니터링과 유지 관리

프로덕션 앱을 모니터링하고 안정적으로 운영합니다.

모니터링과 유지 관리은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

출시 후의 삶

배포는 끝이 아니라 시작입니다. 정상적인 app을 유지하려면 오류를 포착하는 지속적인 모니터링, 사용 현황을 파악하기 위한 분석, 보안과 최신 상태를 유지하기 위한 정기적인 유지 관리가 필요합니다.

오류를 추적해야 하는 이유

사용자 기기에서 발생하는 오류는 수집하지 않으면 확인할 수 없습니다. 오류 추적은 프로덕션에서 발생한 충돌을 수집하므로 사용자가 제보하기 전에 문제를 해결할 수 있는 경우가 많습니다.

오류 추적을 위한 센트리

센트리는 널리 사용되는 오류 추적 서비스입니다. SDK를 설치하고 app이 시작될 때 초기화하면 처리되지 않은 오류를 자동으로 수집할 수 있습니다.

npm install @sentry/vue

센트리 초기화하기

프로젝트 DSN과 뷰 app 인스턴스로 센트리를 초기화하면 뷰의 오류 처리에 연결할 수 있습니다.

import * as Sentry from "@sentry/vue"
import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
Sentry.init({
  app,
  dsn: "https://example@sentry.io/123"
})
app.mount("#app")

사용자 지정 오류 수집하기

자동 수집 외에도 이미 코드에서 처리하는 오류를 수동으로 보고하여 문제의 상황 정보를 얻을 수 있습니다.

try {
  riskyOperation()
} catch (err) {
  Sentry.captureException(err)
}

분석 기능 추가하기

분석을 사용하면 사용자가 실제로 app을 어떻게 사용하는지 알 수 있습니다. 어떤 페이지를 방문하고, 무엇을 클릭하며, 어디에서 이탈하는지 확인할 수 있습니다. 이 데이터는 제품 관련 결정을 이끄는 데 도움이 됩니다.

페이지 조회 추적하기

뷰 라우터에서는 라우터 후크를 사용하여 탐색할 때마다 페이지 조회 이벤트를 보낼 수 있습니다.

router.afterEach((to) => {
  trackPageView(to.fullPath)
})

의존성 최신 상태 유지하기

오래된 패키지에는 버그와 보안 취약점이 쌓입니다. 주기적으로 업데이트를 확인하고 적용하면서 테스트를 실행하세요.

npm outdated
npm update

취약점 감사하기

보안 감사를 실행하여 의존성 트리에 알려진 취약점이 있는지 확인하고 제공되는 수정 사항을 적용합니다.

npm audit
npm audit fix

프로덕션 성능 모니터링하기

실제 사용자는 다양한 기기와 네트워크를 사용합니다. 실제 사용자 모니터링(오류 도구에 포함되는 경우가 많음)과 로드 시간 같은 지표를 사용하여 출시 후에도 성능이 양호한지 확인합니다.

호환성을 깨는 변경 처리하기

주요 버전 업데이트는 호환성을 깨는 변경을 도입할 수 있습니다. 변경 로그와 마이그레이션 안내서를 읽고, 브랜치에서 업데이트한 다음, 테스트 모음을 실행하여 병합하기 전에 문제를 해결합니다. 테스트가 있으므로 이 작업을 안전하게 수행할 수 있습니다.

빠른 확인

모니터링과 유지 관리에 대한 지식을 확인해 보세요.

복습

출시 후에는 오류 추적(센트리)으로 상태를 모니터링하고, 분석으로 사용 현황을 파악하며, npm outdated와 npm audit으로 패키지를 최신 상태로 유지하고, 프로덕션 성능을 확인합니다. 테스트 모음을 사용하여 호환성을 깨는 변경을 신중하게 처리하세요. 다음에는 고급 패턴과 모범 사례를 살펴봅니다.

자주 묻는 질문

“모니터링과 유지 관리” 강의는 무료인가요?

네 — “모니터링과 유지 관리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“모니터링과 유지 관리”에서 뭘 배우나요?

프로덕션 앱을 모니터링하고 안정적으로 운영합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.

“모니터링과 유지 관리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기