[Javascript] URL query string

컴포넌트에서 컴포넌트로 데이터를 전달해줄 때 Prop을 사용할 수 있지만, URL을 통해 정보를 넘기는 방법도 있다. 변수에 값을 담아 URL로 보내는 것이 바로 query string 이다.
다음 코드는 query string을 Vue 프로젝트에서 사용하는 방법이다.

import router from "../router/index.js";

export default {
  setup() {
    const score = ref(0);
    const timer = ref(0);

	// score, timer 올라가는 코드

    router.push({
      path: "/result",
      query: {
        score: score.value,
        timer: timer.value,
      },
    });
  },
};

router.push는 지정한 path로 이동하는 함수이며, 이때 query에 값을 전달할 수 있다. 만약 score: 10, timer: 15를 전달한다면 아래와 같은 형식으로 URL이 찍힐 것이다.

https://fourlettersquizz.web.app/result?score=10&timer=14.22

위의 사진과 같이 result page에서는 이 URL을 사용해서 score와 timer를 추출해서 활용할 수 있게 된다. 해당 코드는 다음과 같다.

import { useRoute } from "vue-router";

export default {
  setup() {
    const route = useRoute();
    const score = route.query.score;
    const timer = route.query.timer;
  },
};

useRoute를 통해 URL의 query에 접근할 수 있고 거기에서 score, timer를 뽑아서 활용할 수 있게 되었다. 즉 다른 page에서 URL에 query로 넘겨준 data를 result page에서 받아서 사용할 수 있게 된 것이다! 
근데 여기서 생기는 하나의 의문점은 URL을 통해 data를 이렇게나 투명하게 주고 받는다면 user가 악용할 가능성이 있지 않을까? URL의 query를 조작함으로 접근해서는 안되는 data에 접근할 수 있게 되는 것은 아닐까? 이에 대한 해결방법은 다음 포스팅에서 알아보자!