[Udemy Vue 완벽가이드 Section12] 152. 초기 앱 및 백엔드가 필요한 이유

기본적인 Vue앱이다.

위에 간단한 'learning experience'에 대한 설문조사를 작성하고 제출하면, 데이터가 저장되어 아래에 출력되는 앱.

 

App.vue파일에는 두 개의 주요 컴포넌트가 있다.

설문조사 컴포넌트와 제출된 결과를 출력하는 컴포넌트.

그리고 제출된 설문조사결과 목록은 App.vue 컴포넌트에서 관리하고 있다.

// App.vue
data() {
    return {
      savedSurveyResults: [],
    };
  },

 

제출된 새로운 설문조사를 추가하는 메서드도 있다.

methods: {
    storeSurvey(surveyData) {
      const surveyResult = {
        name: surveyData.userName,
        rating: surveyData.rating,
        id: new Date().toISOString(),
      };
      this.savedSurveyResults.push(surveyResult);
    },
  },

특별할 것 없는 앱이다.

 

# Vue에만 데이터 저장 시 문제점

하지만, 이 앱에는 한 가지 문제가 있다.

설문조사를 제출하면 모든 데이터가 아래에 표시되지만, 페이지를 새로고침 할 때마다 모든 데이터가 손실된다.

이건 버그가 아니라, 모든 데이터를 Vue에만 저장했기 때문.

즉, 컴퓨터 메모리에만 저장을 한거다. 모든 컴포넌트에서 생성한 데이터가 로컬환경 메모리에만 저장이 된 것.

그래서 웹사이트가 새로고침될때마다 Vue앱이 버려지고, Vue앱의 새 인스턴스가 시작된다. 이전에 실행한 Vue앱에 연결된 모든 데이터가 손실된다.

 

브라우저가 원래 이런 식으로 작동하니 이걸 바꿀 수는 없다. 실제로는 애플리케이션을 구축할 때 데이터를 사용자컴퓨터 내의 파일같은 로컬환경에만 저장하지 않고, 개발자가 소유한 서버에 저장하는 경우가 많다.

예를 들어, Amazon.com을 생각해보자. 그 사이트에 나열된 모든 제품은 당연히 Amazon 서버에 저장되어 Amazon사이트에 방문하는 유저에게 보이는것. 데이터를 보유하는 서버가 필요한 경우는 매우 일반적이다.

 

유저의 브라우저에서 실행되는 Vue 애플리케이션은 서버와 연결해서 데이터를 가져오고 내보내야한다.

즉, 설문조사 애플리케이션은 설문조사 결과를 아래에 출력만 하는 것이 아니라 데이터가 저장되는 서버에도 제출해야하는 것.

 

데이터를 보낼 서버가 필요하다. 그게 바로 '백엔드'이다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.