Vue.js를 접하고 입문한 후 Vue.js를 학습할 때 알아야 할 중요 사항을 가볍게 소개합니다.

1. 백엔드 개발자,
입문자로서
Vue 이해하고 사용하다
차경묵 ( kay@hannal.net )
kay@hannal.netkay@hannal.net

2. 소개

3. 소개
• 차경묵 (aka. 한날).
• 프리랜서 개발자.
• Back-end
• Python
• Prototype.js, jQuery 세대.
• kay@hannal.net

4. Vue.js를 도입한 계기
• 엄청 유명한 것 같진 않아서.
• 생태계에 발을 좀 더 들여보니 사용자 많아서 실망(?).
• 공식 문서의 글투가 다정해서.
• 전환 비용이 낮아서.
• EJS + jQuery >> Vue.js
😍

5. 발표 주제와 대상
• 주제와 내용
• Back-end 개발자가 Front-end 개발 사고를 익혀가
는 명랑 성장기.
• 대상
• 입문자 또는 비 Front-end 개발자.
• 저랑 친해지고 싶은 사람.

6. 본론

7. Vue.js 개념
• 마크업으로 의미 부여.
• DOM 요소를 여행하며 표현
과 의미(데이터) 제어.
• 표현과 의미 혼재.
• 표현단에 데이터를 끼워넣은
관계.
• 표현과 의미 분리
• 내 거친 데이터와 그걸 지켜
보는 뷰 모형.
• 표현단이 데이터를 바라보게
만든 반응형 관계.
스프레드시트프리젠테이션

8. 첫 시작
• vue-init webpack hell-o
• ➜ hell-o git:(master) ✗ du -sh node_modules
• 215M node_modules
• npm install -D <필요하다고 하는 것만 하나씩>
1. 구린 Javascript 때문에 흥이 다 깨져버렸으니까 책임져!
2. ES 6 : 네, 알겠습니다!
3. npm install -D <babel family>
😱

9. 반응형 동작과 동기식 동작
• 스프레드시트처럼 데이터와 DOM이 연결되어 데이터가 변하면 DOM이
반응.
• AJAX로 서버로부터 비동기로 데이터를 가져와 데이터 반영 >> 데이터
변경 >> 표현단 반응.
• 특정 데이터의 상태에 의존하는 동작(behaviour)은 예상과 의도대로 동
작하지 않기도 한다.
• UI 요소가 잔뜩 널려있는 Front-end의 특성이자 동기식 동작을 전제로
만든 UX 구조에서 초래하는 비극.
• 로딩 끝날 때까지 이것 저것 막 누르지 말고 제발 좀 기다려줘... ㅜㅜ

10. 반응형 동작과 비동기식 동작
• 데이터의 의존 관계와 계층 구조 설계 필요.
• UI 요소의 의존 관계와 계층 구조를 고민해야 하는데,
Vue.js에서 표현단은 데이터에 대해 반응하므로 결국 UI
가 반응할 데이터의 의존과 계층 구조를 고민.
• jQuery로 DOM을 직접 제어하던 관점에서 벗어나 데이터
를 제어하여 UI 요소를 제어한다는 관점 전환.
• 동기식이든 비동기식이든 데이터가 변하면 UI가 변한다!

11. 반복되는 코드
• UI 요소를 단위 요소로 보지 않고 데이터 제어 수단으로 접근한 기존
관점.
• 예) 페이지 마다 단추(button)을 제어하는 코드가 제각각.
• 동일 관심사(목적) 당 한 코드 덩어리로 재사용 가능하게 묶자?!
• 코드 모듈화는 스크롤이냐 탭 이동이냐 차이일 뿐 해결책이 아님.
• 코드의 재사용성? 훗, 하루 벌어 하루 사는 프리랜서에게 그런 낭
만이 아직 남아있던가?
• 문제는 UI 로직 코드가 아니라 UI를 구성하는 코드 꾸러미.
🤥 🤐 🤕 😩 😏 😒

12. 컴퍼넌트
• 표현(템플릿)과 데이터 제어, 지역 데이터 꾸러미.
• 재사용 가능한 UI 요소 단위.
• 관심사 단위로 UI요소를 개체화하여 재사용성과 의존성 관리.
• 단추 컴퍼넌트는 오직 버튼 버튼한 동작을 책임져라!
• Python의 웹 프레임워크인 Django의 App 단위와 유사.
• 재사용의 Javascript 코드단 의미
• 컴퍼넌트의 `data`가 함수여야 하는 이유?
• Vue 인스턴스나 부모 컴퍼넌트에 재사용되므로 각 컴퍼넌트 객체가 사용
하는 지역 데이터화 해야 한다. (Javascript는 객체를 참조)

13. 컴퍼넌트, 컴퍼넌트, 컴포넌트.
• store 패턴
• 컴퍼넌트 간 상태를 공유할 때 사용하는 객체
• store 패턴 필요성이 대두됐다면 vuex 이해와 활용이 필요한 단계
• 슬롯
• 부모(Vue 인스턴스나 부모 컴퍼넌트) 컨텐츠와 하위 컴퍼넌트의 템플릿를 섞는 방법
• 어떤 경우엔 헤더가 있는 Modal 창을 쓰고, 어떤 경우엔 헤더 없는 Modal창을 쓴다면?
• 분기문이나 추가 컴퍼넌트 없이 슬롯으로 해결.
• “뭐야. 컴퍼넌트 체계로 만들고 잘 쓰려고 Vue.js를 만든 거 아냐?!”
• Vue.js와 그 생태계에 대한 이해도를 높이려면 Vue 컴퍼넌트를 적극 활용하고 이해.😏

14. REST API 관점 변화
• 서버 렌더링
• 표현단에 데이터를 전달하는 방법을 다소 느슨하고 게으
르게 접근
• 기존 RESTful API 구현
• UI 표현에 필요한 데이터를 전달
• 변화하는 관점
• UI가 반응할 데이터에 필요한 데이터를 고민

15. 끝맺음

16. 지속 가능한 삽질과 도전
• 서버 렌더링에 jQuery 끼얹어 사용하던 기존 사고와 관점을 전환이 필
요.
• 현재는 최종 HTML을 만들어 응답하는 기존 코드를 단지 *.vue로 옮
긴 수준 (엄청 큰 vue 파일)
• 의존성 없이 독립적인 수준을 넘어서 다른 컴퍼넌트와 협업하지 않는
나의 솔로잉 컴퍼넌트들...
• 컴퍼넌트, 컴퍼넌트, 컴포넌트. 나머지는 도울 뿐.
• 최소 도구로 시작하여 상황 별 필요성을 느끼면, 필요를 해소해줄 도구에
접근하는 전략이 입문해서 개념과 용어 이해에 좋았다.
🤢

17. 끝.
고맙습니다.