Vue를 활용한 프로젝트 후기

서울 열린 데이터 광장에서 서울에 있는 음식점들을 모아서 검색 사이트를 만들었습니다. React만 사용하다가 Vue를 사용하면서 좋은 점 등을 포스팅하려고 합니다.

 

📌 만들게 된 계기

JSON으로 데이터를 생성해서 다루기만 했지 API를 활용한 프로젝트를 만들어 본 경험이 없었고,

Vue가 React보다 데이터를 다루는 데 훨씬 효율적이라는 지인의 얘기를 듣고 Vue를 기반으로 한 API 프로젝트를 만들게 되었습니다.

 

📌 Vue를 사용하면서 느낀점

1. Vue에서 template와 script가 나눠져 있는 덕분에 가독성이 좋은 코드를 구현할 수 있습니다.

Vue를 처음 접했을 때 다소 어색했던 부분이었습니다. 하지만 HTML과 JavaScript 부분이 따로 나누어져 있어서 프로젝트를 구현할 때 깔끔하게 코드를 작성할 수 있는 좋은 점이었다고 생각합니다.

구인 공고를 볼 때마다 우대 조건에 Vue가 많이 있는 이유가 이 때문인지는 모르겠지만 어느 정도 영향은 있을 것 같다고 생각했습니다.

 

 

2. React보다 데이터를 시각적 그리고 효율적으로 처리할 수 있습니다.

// React 코드

function App() {
  // 변수 생성
  const [datas, setDatas] = useState<apiType[]>([]);
  const [originalData, setOriginalData] = useState<apiType[]>([]);
  const [listLength, setListLength] = useState<number>(0);
  const [filter, setFilter] = useState("구 선택");
  const [keyword, setKeyword] = useState("");
  
  // 함수 생성
  const clickedSearchBtn = () => {
    if (filter === "구 선택" && keyword === "") {
      setDatas(originalData);
      setListLength(originalData.length);
    }

    if (filter !== "구 선택" && keyword === "") {
      const list = originalData.filter((store) => store.CGG_CODE_NM === filter);
      setDatas(list);
      setListLength(list.length);
    }

    if (filter === "구 선택" && keyword !== "") {
      const list = originalData.filter((store) =>
        store.UPSO_NM.includes(keyword)
      );

      setDatas(list);
      setListLength(list.length);
    }

    if (filter !== "구 선택" && keyword !== "") {
      const list = originalData.filter((store) =>
        findStore(store, filter, keyword)
      );

      setDatas(list);
      setListLength(list.length);
    }

    return <ShowList list={datas} listLength={listLength} />;
  };

  const findStore = (store: apiType, filter: string, keyword: string) => {
    return (
      store.CGG_CODE_NM.includes(filter) && store.UPSO_NM.includes(keyword)
    );
  };
}

React는 변수와 함수를 따로 생성하는 부분이 없고 JavaScript처럼 동일하게 사용합니다. 개발자들마다 코드를 작성하는 스타일이 달라서 서로의 코드를 이해할 때 어려운 부분이 생길 수도 있다고 생각합니다.

또는 하나의 파일에 여러 개의 컴포넌트가 있다면 컴포넌트만의 변수와 함수로 인해 가독성이 떨어질 수 있다고 생각합니다.

 

// Vue 코드

<script>
export default {
  // 변수 생성
  data: () => ({
    list: null,
    resetList: null,
    filter: "구 선택",
    keyword: "",
    showModal: true,
    storeInfo: null,
    map: null,
    mark: null,
  }),
  
  // 함수 생성
  methods: {
    clickedSearchBtn() {
      if (this.filter === "구 선택" && this.keyword === "") {
        this.list = this.resetList;
      }

      if (this.filter !== "구 선택" && this.keyword === "") {
        this.list = this.resetList.filter(
          (store) => store.CGG_CODE_NM === this.filter
        );
      }

      if (this.filter === "구 선택" && this.keyword !== "") {
        this.list = this.resetList.filter((store) =>
          store.UPSO_NM.includes(this.keyword)
        );
      }

      if (this.filter !== "구 선택" && this.keyword !== "") {
        this.list = this.resetList.filter((store) =>
          this.findStore(store, this.filter, this.keyword)
        );
      }
    },

    findStore(store, filter, keyword) {
      return (
        store.CGG_CODE_NM.includes(filter) && store.UPSO_NM.includes(keyword)
      );
    }
  },
 }
 </script>

하지만 Vue는 변수와 함수를 따로 선언하는 부분이 있어서 변수나 함수가 많아져도 같이 묶여있기 때문에 가독성이 좋지 않다고 느껴본 적은 없었고, API를 사용하는 만큼 처리해야 하는 데이터의 양이 많은데 이럴 땐 Vue를 사용하는 것이 더 좋은 것 같습니다.

또 변수뿐만 아니라 컴포넌트를 import 해야 할 때 등 Vue가 더 편리하다고 느껴졌습니다.

 

 

3. React와 크게 다르지 않아서 Vue를 따로 배우지 않아도 쉽게 사용할 수 있습니다.

React를 먼저 배운 사람은 Vue에 대한 강의를 따로 듣지 않아도 인터넷에서 조금만 찾아보거나 유튜브에서 간단하게 정리한 영상만 보더라도 프로젝트를 구현할 수 있었습니다.

저는 Vue 문서 사이트에서 튜토리얼 과정을 통해 공부를 했습니다. 쉽게 설명이 되어있고 버전 2와 버전 3 각각 나누어져서 설명이 되어있는 부분 덕분에 이해하는데 큰 도움이 되었습니다.

 

 

📌 결론

Vue를 시작하지 전까진 어려울 것 같아서 망설였는데 막상 하고 나니 React와 비슷해서 어려운 점이 거의 없었습니다.

다음에는 TypeScript까지 적용해서 다른 프로젝트를 구현해보고 싶습니다.