영화 검색 사이트 : Any Search

깃허브: https://github.com/Jeong-jeong/-Any-Search
배포: https://objective-jang-bed822.netlify.app/

시작하기 전에

Vanila JS 회고

이전에 vanila JS로 노션 클론을 진행했었다.
참고 ) 고뇌록 | 노션 클로닝

프레임워크나 라이브러리없이 오직 vanila JS만으로 컴포넌트 단위로 분리하고 state를 기반으로 DOM을 렌더링하는 연습을 했다. 그때 필요한 것이 state, setState 메서드, render 메서드이다. state를 직접적으로 변경하지 않고 setState로 변경하고, rendering 관련 작업은 render 메서드 내부에 작성한다.

아쉬웠던 점

vanila JS만으로 필요한 기능들을 구현했기 때문에 state가 흘러가는 로직을 이해할 수 있었던 반면에 아쉬웠던 부분들도 있었다.

가장 크게 어려웠던 점은 최상위 컴포넌트에서 state를 갖고 있다가 자식 컴포넌트가 필요한 state를 가공해서 전달하는 방법에 대한 이해이었고,

두번째로 어려웠던 점은 render가 실행될 때 필요한 컴포넌트만 렌더링 하는 작업을 하나하나 설정해줘야 하는데 코드가 복잡해지고 효율적으로 작성하기 어려웠다는 점이다.

마지막으로는 state 정합성 체크와 validation을 어디까지 해야 하는지에 대한 문제였다.
state가 받는 데이터가 많아져도 하나하나 체크를 해야 할까?
사전에 state의 type을 체크해서 차후에 생길 문제를 미리 예방할 순 없을까?
참조 형태의 데이터의 경우 내부 요소들의 정합성 체크도 모두 해야 할까?
등등.

Vue와 비교

이번에는 open API와 Vue를 활용해 영화 검색 사이트를 만드는 프로젝트를 진행했다.
이번 프로젝트를 진행하며 느꼈던 점은 Vue는 가시성이 좋아 로직의 흐름을 쉽게 이해할 수 있다는 것이다.

• 컴포넌트 라이프 사이클이 확실히 구분되어 있어 로직이 들어가야 할 시점이 명확하게 보인다. 예를 들어 가장 많이 쓰이는 라이프 사이클 훅인 created, mounted 훅에서
  vue 인스턴스가 생성됐을 때, DOM이 연결됐을 때의 작업을 구분할 수 있다.
  그 외에도 updated나 destroyed 등 다양한 라이프 사이클 훅 이름에 맞게 간단히 적용하면 된다.
• template, script, style 부분이 나눠져 있어 html, JS, css를 명확히 분리할 수 있다.
• 다양한 디렉티브를 활용해 코드를 짧고 간결하게 적용할 수 있다.
  대표적으로 v-if, v-show, v-for, v-model 등등 단 몇 글자만으로도 JS에서 사용하는 코드들을 가시성 있고 간단하게 적용할 수 있다.

궁금했던 점 해결!

Vue의 경우
첫번째 문제: 자식 컴포넌트가 필요한 state를 가공해서 전달하는 방법에 대한 이해를
props & $emit, provide & inject , vuex로 보완한다.

기본적으로 자식 컴포넌트에게 데이터를 전달할 땐 props를 사용하고, $emit을 통해 자식 요소에서 상위 요소로 데이터를 전달할 수도 있다 !! 내 경우 자식 요소에서 상위 요소로 데이터를 전달하는 걸 Vanila JS에선 커스텀 이벤트로 해결했는데 여기선 $emit으로 더 간편하게 보낼 수 있어서 아주 좋았다!! 자손 컴포넌트에게도 provide와 inject로 바로 쏴줄 수도 있다.
관련이 없는 컴포넌트들끼리의 데이터는 vuex라는 store에서 해결한다.
👍👍👍👍

두번째 문제: 필요한 컴포넌트만 렌더링 하는 작업은 Vue-Router로 해결한다. 렌더링할 컴포넌트들의 path를 설정하고 로 라우팅하면 새로고침없이 렌더링된다. 추가적으로 computed 옵션으로 데이터를 캐싱하면 데이터가 변화하지 않을 경우 리렌더링되지 않는다.

세번째 문제는 state 정합성 체크와 validation이다.
Vue에선 props의 type과 default 값을 사전에 작성할 수 있다. 이것만으로도 해당 state가 어떤 type을 받아야 하는지 한 눈에 파악할 수 있고, 정합성 체크까지 동시에 할 수 있기 때문에 오류 발생 가능성이 많이 줄어든다 생각한다.
다만 데이터를 받는 부분이 props 외에도 store나 컴포넌트의 기본 data도 있기 때문에 validation 체크를 따로 진행해야 한다.

아쉬웠던 점

• provide, inject를 적극적으로 활용하지 못함
• 반복되는 로직들이 대게 존재하고 컴포넌트화를 시키지 못함 (mixin, props 활용)
• validation을 잘 적용하지 못함
• SPA > 검색 엔진 최적화 (SEO)
• computed와 methods 옵션을 잘 구분하여 적용하지 못함

개요