Hannal-vuejs-korea-1st-meetup-20170419.pdf

Transcript

1. ߔূ٘ ѐߊ੗, ੑޙ੗۽ࢲ Vue ੉೧ೞҊ ࢎਊೞ׮ ର҃ޗ ( kay@hannal.net ) kay@hannal.net kay@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. 끝. 고맙습니다.