Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
백엔드 개발자,
입문자로서
Vue 이해하고 사용하다
차경묵 ( kay@hannal.net )
kay@hannal.netkay@hannal.net
소개
소개
• 차경묵 (aka. 한날).
• 프리랜서 개발자.
• Back-end
• Python
• Prototype.js, jQuery 세대.
• kay@hannal.net
Vue.js를 도입한 계기
• 엄청 유명한 것 같진 않아서.
• 생태계에 발을 좀 더 들여보니 사용자 많아서 실망(?).
• 공식 문서의 글투가 다정해서.
• 전환 비용이 낮아서.
• EJS + jQuery >&g...
발표 주제와 대상
• 주제와 내용
• Back-end 개발자가 Front-end 개발 사고를 익혀가
는 명랑 성장기.
• 대상
• 입문자 또는 비 Front-end 개발자.
• 저랑 친해지고 싶은 사람.
본론
Vue.js 개념
• 마크업으로 의미 부여.
• DOM 요소를 여행하며 표현
과 의미(데이터) 제어.
• 표현과 의미 혼재.
• 표현단에 데이터를 끼워넣은
관계.
• 표현과 의미 분리
• 내 거친 데이터와 그걸 지켜
보...
첫 시작
• vue-init webpack hell-o
• ➜ hell-o git:(master) ✗ du -sh node_modules
• 215M node_modules
• npm install -D <필요하다고 하...
반응형 동작과 동기식 동작
• 스프레드시트처럼 데이터와 DOM이 연결되어 데이터가 변하면 DOM이
반응.
• AJAX로 서버로부터 비동기로 데이터를 가져와 데이터 반영 >> 데이터
변경 >> 표현단 반응.
• 특정 데이...
반응형 동작과 비동기식 동작
• 데이터의 의존 관계와 계층 구조 설계 필요.
• UI 요소의 의존 관계와 계층 구조를 고민해야 하는데,
Vue.js에서 표현단은 데이터에 대해 반응하므로 결국 UI
가 반응할 데이터의 의...
반복되는 코드
• UI 요소를 단위 요소로 보지 않고 데이터 제어 수단으로 접근한 기존
관점.
• 예) 페이지 마다 단추(button)을 제어하는 코드가 제각각.
• 동일 관심사(목적) 당 한 코드 덩어리로 재사용 가능...
컴퍼넌트
• 표현(템플릿)과 데이터 제어, 지역 데이터 꾸러미.
• 재사용 가능한 UI 요소 단위.
• 관심사 단위로 UI요소를 개체화하여 재사용성과 의존성 관리.
• 단추 컴퍼넌트는 오직 버튼 버튼한 동작을 책임져라!...
컴퍼넌트, 컴퍼넌트, 컴포넌트.
• store 패턴
• 컴퍼넌트 간 상태를 공유할 때 사용하는 객체
• store 패턴 필요성이 대두됐다면 vuex 이해와 활용이 필요한 단계
• 슬롯
• 부모(Vue 인스턴스나 부모 컴...
REST API 관점 변화
• 서버 렌더링
• 표현단에 데이터를 전달하는 방법을 다소 느슨하고 게으
르게 접근
• 기존 RESTful API 구현
• UI 표현에 필요한 데이터를 전달
• 변화하는 관점
• UI가 반응할...
끝맺음
지속 가능한 삽질과 도전
• 서버 렌더링에 jQuery 끼얹어 사용하던 기존 사고와 관점을 전환이 필
요.
• 현재는 최종 HTML을 만들어 응답하는 기존 코드를 단지 *.vue로 옮
긴 수준 (엄청 큰 vue 파일)
...
끝.
고맙습니다.
Upcoming SlideShare
Loading in …5
×

백엔드 개발자, 입문자로서 Vue 이해하고 사용하다.

4,333 views

Published on

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

Published in: Software
  • Be the first to comment

백엔드 개발자, 입문자로서 Vue 이해하고 사용하다.

  1. 1. 백엔드 개발자, 입문자로서 Vue 이해하고 사용하다 차경묵 ( kay@hannal.net ) kay@hannal.netkay@hannal.net
  2. 2. 소개
  3. 3. 소개 • 차경묵 (aka. 한날). • 프리랜서 개발자. • Back-end • Python • Prototype.js, jQuery 세대. • kay@hannal.net
  4. 4. Vue.js를 도입한 계기 • 엄청 유명한 것 같진 않아서. • 생태계에 발을 좀 더 들여보니 사용자 많아서 실망(?). • 공식 문서의 글투가 다정해서. • 전환 비용이 낮아서. • EJS + jQuery &gt;&gt; Vue.js 😍
  5. 5. 발표 주제와 대상 • 주제와 내용 • Back-end 개발자가 Front-end 개발 사고를 익혀가 는 명랑 성장기. • 대상 • 입문자 또는 비 Front-end 개발자. • 저랑 친해지고 싶은 사람.
  6. 6. 본론
  7. 7. Vue.js 개념 • 마크업으로 의미 부여. • DOM 요소를 여행하며 표현 과 의미(데이터) 제어. • 표현과 의미 혼재. • 표현단에 데이터를 끼워넣은 관계. • 표현과 의미 분리 • 내 거친 데이터와 그걸 지켜 보는 뷰 모형. • 표현단이 데이터를 바라보게 만든 반응형 관계. 스프레드시트프리젠테이션
  8. 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. 9. 반응형 동작과 동기식 동작 • 스프레드시트처럼 데이터와 DOM이 연결되어 데이터가 변하면 DOM이 반응. • AJAX로 서버로부터 비동기로 데이터를 가져와 데이터 반영 >> 데이터 변경 >> 표현단 반응. • 특정 데이터의 상태에 의존하는 동작(behaviour)은 예상과 의도대로 동 작하지 않기도 한다. • UI 요소가 잔뜩 널려있는 Front-end의 특성이자 동기식 동작을 전제로 만든 UX 구조에서 초래하는 비극. • 로딩 끝날 때까지 이것 저것 막 누르지 말고 제발 좀 기다려줘... ㅜㅜ
  10. 10. 반응형 동작과 비동기식 동작 • 데이터의 의존 관계와 계층 구조 설계 필요. • UI 요소의 의존 관계와 계층 구조를 고민해야 하는데, Vue.js에서 표현단은 데이터에 대해 반응하므로 결국 UI 가 반응할 데이터의 의존과 계층 구조를 고민. • jQuery로 DOM을 직접 제어하던 관점에서 벗어나 데이터 를 제어하여 UI 요소를 제어한다는 관점 전환. • 동기식이든 비동기식이든 데이터가 변하면 UI가 변한다!
  11. 11. 반복되는 코드 • UI 요소를 단위 요소로 보지 않고 데이터 제어 수단으로 접근한 기존 관점. • 예) 페이지 마다 단추(button)을 제어하는 코드가 제각각. • 동일 관심사(목적) 당 한 코드 덩어리로 재사용 가능하게 묶자?! • 코드 모듈화는 스크롤이냐 탭 이동이냐 차이일 뿐 해결책이 아님. • 코드의 재사용성? 훗, 하루 벌어 하루 사는 프리랜서에게 그런 낭 만이 아직 남아있던가? • 문제는 UI 로직 코드가 아니라 UI를 구성하는 코드 꾸러미. 🤥 🤐 🤕 😩 😏 😒
  12. 12. 컴퍼넌트 • 표현(템플릿)과 데이터 제어, 지역 데이터 꾸러미. • 재사용 가능한 UI 요소 단위. • 관심사 단위로 UI요소를 개체화하여 재사용성과 의존성 관리. • 단추 컴퍼넌트는 오직 버튼 버튼한 동작을 책임져라! • Python의 웹 프레임워크인 Django의 App 단위와 유사. • 재사용의 Javascript 코드단 의미 • 컴퍼넌트의 `data`가 함수여야 하는 이유? • Vue 인스턴스나 부모 컴퍼넌트에 재사용되므로 각 컴퍼넌트 객체가 사용 하는 지역 데이터화 해야 한다. (Javascript는 객체를 참조)
  13. 13. 컴퍼넌트, 컴퍼넌트, 컴포넌트. • store 패턴 • 컴퍼넌트 간 상태를 공유할 때 사용하는 객체 • store 패턴 필요성이 대두됐다면 vuex 이해와 활용이 필요한 단계 • 슬롯 • 부모(Vue 인스턴스나 부모 컴퍼넌트) 컨텐츠와 하위 컴퍼넌트의 템플릿를 섞는 방법 • 어떤 경우엔 헤더가 있는 Modal 창을 쓰고, 어떤 경우엔 헤더 없는 Modal창을 쓴다면? • 분기문이나 추가 컴퍼넌트 없이 슬롯으로 해결. • “뭐야. 컴퍼넌트 체계로 만들고 잘 쓰려고 Vue.js를 만든 거 아냐?!” • Vue.js와 그 생태계에 대한 이해도를 높이려면 Vue 컴퍼넌트를 적극 활용하고 이해.😏
  14. 14. REST API 관점 변화 • 서버 렌더링 • 표현단에 데이터를 전달하는 방법을 다소 느슨하고 게으 르게 접근 • 기존 RESTful API 구현 • UI 표현에 필요한 데이터를 전달 • 변화하는 관점 • UI가 반응할 데이터에 필요한 데이터를 고민
  15. 15. 끝맺음
  16. 16. 지속 가능한 삽질과 도전 • 서버 렌더링에 jQuery 끼얹어 사용하던 기존 사고와 관점을 전환이 필 요. • 현재는 최종 HTML을 만들어 응답하는 기존 코드를 단지 *.vue로 옮 긴 수준 (엄청 큰 vue 파일) • 의존성 없이 독립적인 수준을 넘어서 다른 컴퍼넌트와 협업하지 않는 나의 솔로잉 컴퍼넌트들... • 컴퍼넌트, 컴퍼넌트, 컴포넌트. 나머지는 도울 뿐. • 최소 도구로 시작하여 상황 별 필요성을 느끼면, 필요를 해소해줄 도구에 접근하는 전략이 입문해서 개념과 용어 이해에 좋았다. 🤢
  17. 17. 끝. 고맙습니다.

×