목차
•
우당탕탕 회사에 Vue.js를 도입한 삽질기 - 박새미님
•
백엔드 개발자, 입문자로서 Vue 이해하고 사용하다 - 차경묵님
•
웹 디자이너의 도전 Vue.js 따라하기 - 이승민님
•
Vue.js와 Firebase 활용기 - 김인숙님
•
Nuxt로 사내 서비스 구현하면서 얻은 경험 공유 - 조민환님
우당탕탕 회사에 Vue.js를 도입한 삽질기
•
국내 최고 광고 차단 어플 유니콘 개발자
•
관리자 페이지를 Vue.js로 개발하고 실제 서비스 중
•
주제: Vue.js를 사용해서 프로젝트를 진행한 경험 공유
•
Vue.js를 도입한 이유
◦
주먹구구식 코드 작업으로 인해 관리가 안되는 코드
◦
React.js 도입 실패로 인한 시간 손실
▪
컴포넌트 구조에 대한 이해 부족
▪
한번에 모든걸 적용하려고 이것저것 도입
◦
가장 적은 비용으로 도입이 가능할 것 같아서
▪
가장 큰 장점: 공식 홈페이지가 한글이고, 바로 검색해서 자료를 찾을 수 있다.
▪
단일 파일내에 모든 작업을 할 수 있다. ( 단일 파일 컴포넌트 )
◦
심플하면서 모든 기능을 가지고 있어서
◦
회사에서 우려한 사항
▪
대중적이지 못하고, 인수인계에 대한 어려움이 생길 가능성이 높다
▪
Vue의 메이저 후원사 여부
◦
도입 과정
▪
구매한 Bootstrap 테마가 적용 가능한 테마 예제 확보 ( Vue Admin LTE Theme )
▪
Bootstrap 테마 적용 및 프로젝트 구조 잡기
•
사용된 jQuery 라이브러리로 인한 지저분한 코드
•
Router 페이지 이동 처리
•
Rest Paameter 데이터가 없을 때 404 처리
▪
단일 컴포넌트로 구성된것들을 재사용 되는 컴포넌트를 기준으로 분리
▪
레거시 코드들을 순수 vue 코드로 변환할 예정
•
도입 후 느낀점
◦
문서만 보고 사용할 수 있을 정도의 프레임워크
◦
한글 문서가 굉장히 매력적이다
◦
jQuery의 늪
◦
JavaScript의 this가 항상 어렵게 느껴진다
◦
컴포넌트 기반의 작업에 대한 두려움이 사라졌다
◦
삽질이 답이다
백엔드 개발자, 입문자로서 Vue 이해하고 사용하다
•
Python back-end 개발자 ( Prototype.js, jQuery 세대 )
•
Vue.js를 도입한 이유
◦
React, Angular.js에 비해 덜 유명한거 같아서
▪
생태계에 들어와보니 사용자가 생각보다 많아서 실망(?)
◦
공식 문서의 글투가 다정해서
◦
전환 비용이 낮아서
▪
EJS + jQuery ==> Vue.js
•
주제: back-end 개발자가 front-end 개발 사고를 익혀가는 명랑 성장기
•
개념 비유
◦
프리젠테이션
◦
스프레드시트
•
반응형 동작과 동기식 동작
◦
특정 데이터의 상태에 의존하는 동작(behavior)은 예상과 의도대로 동작하지 않기도 한다
◦
데이터의 의존 관계와 계층 구조 설계가 필요하다
▪
UI가 반응할 데이터의 의존과 계층 구조를 고민
◦
데이터를 제어하여 UI 요소를 제어한다는 관점 전환
•
반복되는 코드
◦
UI 요소를 단위 요소로 보지 않고, 데이터 제어 수단으로 접근한 기존 관점
▪
템플릿 코드가 길어져 *.vue 편집이 불편하다
◦
동일 목적당 한 단위 컴포넌트로 작성
•
컴포넌트
◦
재사용 가능한 UI 요소 단위
◦
UI 요소를 개체화하여 재사용성과 의존성 관리
▪
Python의 웹 프레임워크인 Django 의 App과 유사
◦
재 사용의 JavaScript 코드 단 의미
▪
컴포넌트의 data가 함수인 이유는?
•
컴포넌트의 기준은 재사용성 인데, Object로 사용하게 될 경우 데이터가 참조되어 컴포넌트간의 영향을 줄 수 있기 때문이다
◦
store 패턴, slot
•
REST API 관점 변화
◦
SSR
▪
표현단에 데이터를 전달하는 방법은 다소 느슨하고 게으르게 접근
◦
RESTfulAPI 구현
▪
UI 표현에 필요한 데이터를 전달
◦
변화하는 관점
▪
UI가 반응할 데이터에 필요한 데이터를 고민
•
Vue.js는 React에 비해 상대적으로 변화가 적은편이다
웹 디자이너의 도전 Vue.js 따라하기
•
알고랩 디자이너
•
단일 페이지인데 jQuery로 모든 상태 변화 처리 ( 코드는 약 4,000라인 )
•
jQuery 보다 좋아보이고, React 보다 쉽고 좋아보여서 사용하기 시작
•
02:05:29 + a 정도 시간을 투자하여 공부
•
디자이너도 조금만 노력하면 쉽게 접근할 수 있다
Vue.js와 Firebase 활용기
•
가비아 프론트엔드 개발팀
•
Vue.js를 도입한 이유
◦
다른 프레임워크에 비해 러닝코스트가 적게 든다
◦
단일 파일 컴포넌트 (*.vue)
◦
유연함
◦
가벼움
◦
한국어 가이드 문서가 잘되어 있음
•
Firebase를 선택한 이유
◦
웹, iOS, Android 개발에 필요한 서비스를 제공하는 BaaS (Back-end As A Service)
◦
직접 back-end를 구성할 필요가 없어 시간 단축에 도움
•
개발 프로세스
◦
FireBase 셋팅
◦
Vue.js 셋팅
◦
프로젝트에 필요한 라이브러리 추가
▪
VueFire
▪
firebase
▪
firebase-tools
▪
vue-blu
◦
FireBase 연결
◦
빌드
◦
배포
Nuxt로 사내 서비스 구현하면서 얻은 경험 공유
•
데브시스터즈 웹셀 프론트엔드 개발자
•
React 의 Next.js : Vue 의 Nuxt.js
•
Web Development Nowaday
◦
Component, Container, Store
◦
SSR
◦
Router W/History API
◦
ECMAScript
◦
Hot Module Reloading
◦
SASS
•
Full Packages === Nuxt.js
•
Isomorphic JavaScript
◦
주의할점
◦
Diffrent Context
◦
Tree Shaking
•
REST API Mocking Tool: json-server
•
JavaScript를 차단하더라도 일정 부분 컨텐츠를 제공할 수 있음
•
생산성이 정말 좋아짐