구조에 따른 장단점

Question

이번 강의에서 vue 공식 홈페이지에 있는 todo앱은 한 페이지에서 다 처리했다고 언급하셔서  vue.js 시작하기 강의에서 알려주신대로 뷰 인스턴스 안에 컴포넌트들로 넣어서 한 페이지에서 구현했나? 라고 생각하면서 공식 홈페이지에서 확인해봤더니 거기에선 컴포넌트를 사용하지않고 한번에 구현했더라구요. ( https://kr.vuejs.org/v2/examples/todomvc.html) 그래서 차이점이 뭘까 생각해봤는데.. 아직 경험이 많지 않아서 어림짐작 해보기로는 강사님께서 한 방법은 재사용성이 좋고 수정도 용이한데, 프로젝트가 커지면 파일이 늘어나서 관리가 힘들고 공식홈페이지는 그 반대지 않을까 하는데 이게 맞나요? 구현방법이 너무 많아서 어떻게 짜는게 어떤 부분이좋고 어떨때 적용해야한다.. 또는 뭐가 더 효율적이다 하는걸 잘 모르겠어요!! 간단하게라도 코멘트 부탁드리겠습니다 ㅠㅠ

캡틴판교 · Answer

안녕하세요 승민님 좋은 질문이네요. 제가 강좌에서 컴포넌트를 구분한 것은 컴포넌트 통신 방법에 대해서 수강하시는 분들이 고민해보시거나 경험해보시길 바라는 측면에서 그렇게 구성했습니다. 공식 홈페이지의 todo 샘플은 에반 유가 작성한 것으로 알고 있고, 자바스크립트나 뷰에 처음 입문하시는 분이 보시기에는 그렇게 쉽지 않은 코드라 판단하여 좀 더 쉬운 코드로 강의를 진행했어요. 할 일 관리 앱은 그렇게 복잡하거나 어려운 앱이 아니기 때문에 하나의 컴포넌트로 작성하셔도 크게 문제가 되진 않습니다. 나중에 더 복잡한 앱을 만드실 때는 제가 강의에서 다룬 컴포넌트 통신 방법을 잘 활용해보시면 좋을 것 같아요 :) 수강해주셔서 감사합니다 :)