SlideShare ist ein Scribd-Unternehmen logo
1 von 32
Downloaden Sie, um offline zu lesen
웹 디자이너의
도전
Vue.js 따라하기
Vue ∙ tiful Korea
이승민 | 알고랩
디자이너도 Vue.js를
쓸 수 있다?
디자이너니까 오프라인용 굿즈 쯤이야!
마케팅 컨텐츠
편집 디자인
디자이너도 Vue.js를
쓸 수 있다?
디자이너니까 UX/UI 디자인 쯤이야!
웹 퍼블리싱
Vue.js
개발자에게 친절한
디자이너?
CSS는 제가 만질게요.
API input과 output은 이렇게 해주세요.
왜 jQuery로
만족할 수 없는가?
jQuery vue.js
https://medium.com/js-dojo/vue-js-is-easier-to-learn-than-jquery-abbbb9c12cf8
왜 jQuery로
만족할 수 없는가?
jQuery Vue.js
https://medium.com/js-dojo/vue-js-is-easier-to-learn-than-jquery-abbbb9c12cf8
왜 React로
만족할 수 없는가?
https://vuejs.org/v2/guide/comparison.html#Complexity
React Vue.js
나만의
시간
쉽고 간단하게
JavaScript 쓰기?
시간이 없지만 공부 쯤이야!
Vue.js를
setup하는 방법?
Vue instance를
만드는 방법?
Vue instance
data object
template syntax
{{ textInterpolation }}
binding inline styles
v-bind:style, :style
conditional rendering
v-if, v-else
template syntax directives
v-on:click, @click
Vue instance
methods
Vue ∙ tiful Korea
이승민 | 알고랩
쉽네?
공부하면 되지!
시간이 없지만 공부 쯤이야!
Vue.js &
JavaScript
Vue ∙ tiful Korea
이승민 | 알고랩
공부만으로는 안돼?
밤을 새면 되지!
피곤하지만 밤샘 쯤이야!
Vue.js &
JavaScript
Vue ∙ tiful Korea
이승민 | 알고랩
Vue.js 정복하기?
밤을 새면 되지!
일주일 밤샘 쯤이야... 힘드네. 낮잠을 자볼까?
Vue.js &
JavaScript
Vue ∙ tiful Korea
이승민 | 알고랩
Vue.js 정복하기?
적당히 해!
이렇게 살 바에는 포기가...
Vue.js &
JavaScript
Vue ∙ tiful Korea
이승민 | 알고랩
Vue.js 정복하기?
끝까지 가보자!
Vue.js 꼭 무찌를거야!
list rendering
v-for
감사합니다!
ideas007@naver.com
Vue ∙ tiful Korea
이승민 | 알고랩

Weitere ähnliche Inhalte

Was ist angesagt?

JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰Kenu, GwangNam Heo
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사Kichul Jung
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with AngularJT Jintae Jung
 
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSJavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSNAVER D2
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angularredribbon1307
 
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다정석 양
 
Vuejs를이용한서비스구축
Vuejs를이용한서비스구축Vuejs를이용한서비스구축
Vuejs를이용한서비스구축Dexter Jung
 
Webframeworks.kr의 소개
Webframeworks.kr의 소개Webframeworks.kr의 소개
Webframeworks.kr의 소개WebFrameworks
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문종훈 박
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Sang Seok Lim
 
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)JinKwon Lee
 
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트월간 IT 슬라이드
 
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선NAVER D2
 
최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기Hyeonjin Cho
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기우영 주
 
개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기NAVER D2
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridappNAVER D2
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신Sungwoo Choo
 

Was ist angesagt? (20)

JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with Angular
 
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSJavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJS
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
 
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다
 
Vuejs를이용한서비스구축
Vuejs를이용한서비스구축Vuejs를이용한서비스구축
Vuejs를이용한서비스구축
 
Webframeworks.kr의 소개
Webframeworks.kr의 소개Webframeworks.kr의 소개
Webframeworks.kr의 소개
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
 
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
 
Cooking jquery
Cooking jqueryCooking jquery
Cooking jquery
 
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선
 
최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
 
Hands-on Vue Springboot Simple Admin
Hands-on Vue Springboot Simple AdminHands-on Vue Springboot Simple Admin
Hands-on Vue Springboot Simple Admin
 
개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
 

Ähnlich wie 웹 디자이너의 도전: Vue.js 따라하기

Vue and nuxt architect 20180807
Vue and nuxt architect 20180807Vue and nuxt architect 20180807
Vue and nuxt architect 20180807Aron Kim
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께지수 윤
 
2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나korea_simgoon
 
어흥~!이번발표
어흥~!이번발표어흥~!이번발표
어흥~!이번발표korea_simgoon
 
Webdevmobile 2011 01
Webdevmobile 2011 01Webdevmobile 2011 01
Webdevmobile 2011 01korea_simgoon
 
JavaScript Debugging (동영상강의자료)
JavaScript Debugging (동영상강의자료)JavaScript Debugging (동영상강의자료)
JavaScript Debugging (동영상강의자료)지수 윤
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자jung kyunghwan
 
2017 제주코딩해커톤 Ruby On Rails 첫째주
2017 제주코딩해커톤 Ruby On Rails 첫째주2017 제주코딩해커톤 Ruby On Rails 첫째주
2017 제주코딩해커톤 Ruby On Rails 첫째주범재 이
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁WebFrameworks
 
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기나의 jQuery 실력 향상기
나의 jQuery 실력 향상기정석 양
 
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개미래웹기술연구소 (MIRAE WEB)
 
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Sa-ryong Kang
 
평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기
평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기
평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기clearboth
 
Create App Easier With SVC Pattern - DroidKnights 2019 @Seoul
Create App Easier With SVC Pattern - DroidKnights 2019 @SeoulCreate App Easier With SVC Pattern - DroidKnights 2019 @Seoul
Create App Easier With SVC Pattern - DroidKnights 2019 @SeoulBansook Nam
 
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...탑크리에듀(구로디지털단지역3번출구 2분거리)
 
Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정leejungwang
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs PrerenderChangwan Jun
 
드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서draghome
 
2020년 12월 5일 개발자 이야기
2020년 12월 5일 개발자 이야기2020년 12월 5일 개발자 이야기
2020년 12월 5일 개발자 이야기Jay Park
 

Ähnlich wie 웹 디자이너의 도전: Vue.js 따라하기 (20)

Vue and nuxt architect 20180807
Vue and nuxt architect 20180807Vue and nuxt architect 20180807
Vue and nuxt architect 20180807
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께
 
2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나
 
어흥~!이번발표
어흥~!이번발표어흥~!이번발표
어흥~!이번발표
 
Webdevmobile 2011 01
Webdevmobile 2011 01Webdevmobile 2011 01
Webdevmobile 2011 01
 
JavaScript Debugging (동영상강의자료)
JavaScript Debugging (동영상강의자료)JavaScript Debugging (동영상강의자료)
JavaScript Debugging (동영상강의자료)
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자
 
2017 제주코딩해커톤 Ruby On Rails 첫째주
2017 제주코딩해커톤 Ruby On Rails 첫째주2017 제주코딩해커톤 Ruby On Rails 첫째주
2017 제주코딩해커톤 Ruby On Rails 첫째주
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
 
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기나의 jQuery 실력 향상기
나의 jQuery 실력 향상기
 
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
 
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
 
평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기
평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기
평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기
 
Create App Easier With SVC Pattern - DroidKnights 2019 @Seoul
Create App Easier With SVC Pattern - DroidKnights 2019 @SeoulCreate App Easier With SVC Pattern - DroidKnights 2019 @Seoul
Create App Easier With SVC Pattern - DroidKnights 2019 @Seoul
 
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
 
Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs Prerender
 
드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서
 
2020년 12월 5일 개발자 이야기
2020년 12월 5일 개발자 이야기2020년 12월 5일 개발자 이야기
2020년 12월 5일 개발자 이야기
 

웹 디자이너의 도전: Vue.js 따라하기