Enviar búsqueda
Cargar
예제를 통해 쉽게_살펴보는_뷰제이에스
•
10 recomendaciones
•
2,239 vistas
Dexter Jung
Seguir
Vue.js의 기본 골격과 사용법. 그리고 Vue를 이용하한 프로젝트 예제 코드, 그리고 도입 시 주의 사항에 대해 발표합니다.
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 68
Descargar ahora
Descargar para leer sin conexión
Recomendados
Vuejs를이용한서비스구축
Vuejs를이용한서비스구축
Dexter Jung
vuetiful korea 발표자료
vuetiful korea 발표자료
치웅 이
회사에서 새로운 기술_적용하기
회사에서 새로운 기술_적용하기
Dexter Jung
2020년 10월 24일 개발자 이야기
2020년 10월 24일 개발자 이야기
Jay Park
2020년 7월 19일 개발 이야기 정리
2020년 7월 19일 개발 이야기 정리
Jay Park
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
NAVER D2
2021년 2월 6일 개발자 이야기
2021년 2월 6일 개발자 이야기
Jay Park
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
jeong seok yang
Recomendados
Vuejs를이용한서비스구축
Vuejs를이용한서비스구축
Dexter Jung
vuetiful korea 발표자료
vuetiful korea 발표자료
치웅 이
회사에서 새로운 기술_적용하기
회사에서 새로운 기술_적용하기
Dexter Jung
2020년 10월 24일 개발자 이야기
2020년 10월 24일 개발자 이야기
Jay Park
2020년 7월 19일 개발 이야기 정리
2020년 7월 19일 개발 이야기 정리
Jay Park
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
NAVER D2
2021년 2월 6일 개발자 이야기
2021년 2월 6일 개발자 이야기
Jay Park
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
jeong seok yang
2020년 10월 17일 개발자 이야기
2020년 10월 17일 개발자 이야기
Jay Park
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJS
NAVER D2
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다
정석 양
웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기
Seungmin Lee
2020년 4월 18일 개발 이야기 정리
2020년 4월 18일 개발 이야기 정리
Jay Park
Cooking jquery
Cooking jquery
JinKwon Lee
2020년 12월 20일 개발자 이야기
2020년 12월 20일 개발자 이야기
Jay Park
2021년 3월 27일 개발자 이야기
2021년 3월 27일 개발자 이야기
Jay Park
2020년 5월 9일 개발 이야기 정리
2020년 5월 9일 개발 이야기 정리
Jay Park
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
redribbon1307
Inside node.js
Inside node.js
Jeongsang Baek
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
[DS Meetup] iPad로 가벼운 분석환경 구축해보기
[DS Meetup] iPad로 가벼운 분석환경 구축해보기
Minho Lee
2020년 9월 19일 개발자 이야기
2020년 9월 19일 개발자 이야기
Jay Park
주니어 개발자의 개인프로젝트 개발기
주니어 개발자의 개인프로젝트 개발기
sung yong jung
2020년 10월 10일 개발자 이야기
2020년 10월 10일 개발자 이야기
Jay Park
2020년 4월 25일 개발 이야기 정리
2020년 4월 25일 개발 이야기 정리
Jay Park
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
JinKwon Lee
제 5회 D2 CAMPUS SEMINAR - Swift로 만든 serverframework 개발기
제 5회 D2 CAMPUS SEMINAR - Swift로 만든 serverframework 개발기
NAVER D2
2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리
Jay Park
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
양재동 코드랩
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
KTH, 케이티하이텔
Más contenido relacionado
La actualidad más candente
2020년 10월 17일 개발자 이야기
2020년 10월 17일 개발자 이야기
Jay Park
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJS
NAVER D2
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다
정석 양
웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기
Seungmin Lee
2020년 4월 18일 개발 이야기 정리
2020년 4월 18일 개발 이야기 정리
Jay Park
Cooking jquery
Cooking jquery
JinKwon Lee
2020년 12월 20일 개발자 이야기
2020년 12월 20일 개발자 이야기
Jay Park
2021년 3월 27일 개발자 이야기
2021년 3월 27일 개발자 이야기
Jay Park
2020년 5월 9일 개발 이야기 정리
2020년 5월 9일 개발 이야기 정리
Jay Park
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
redribbon1307
Inside node.js
Inside node.js
Jeongsang Baek
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
[DS Meetup] iPad로 가벼운 분석환경 구축해보기
[DS Meetup] iPad로 가벼운 분석환경 구축해보기
Minho Lee
2020년 9월 19일 개발자 이야기
2020년 9월 19일 개발자 이야기
Jay Park
주니어 개발자의 개인프로젝트 개발기
주니어 개발자의 개인프로젝트 개발기
sung yong jung
2020년 10월 10일 개발자 이야기
2020년 10월 10일 개발자 이야기
Jay Park
2020년 4월 25일 개발 이야기 정리
2020년 4월 25일 개발 이야기 정리
Jay Park
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
JinKwon Lee
제 5회 D2 CAMPUS SEMINAR - Swift로 만든 serverframework 개발기
제 5회 D2 CAMPUS SEMINAR - Swift로 만든 serverframework 개발기
NAVER D2
2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리
Jay Park
La actualidad más candente
(20)
2020년 10월 17일 개발자 이야기
2020년 10월 17일 개발자 이야기
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJS
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다
웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기
2020년 4월 18일 개발 이야기 정리
2020년 4월 18일 개발 이야기 정리
Cooking jquery
Cooking jquery
2020년 12월 20일 개발자 이야기
2020년 12월 20일 개발자 이야기
2021년 3월 27일 개발자 이야기
2021년 3월 27일 개발자 이야기
2020년 5월 9일 개발 이야기 정리
2020년 5월 9일 개발 이야기 정리
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
Inside node.js
Inside node.js
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[DS Meetup] iPad로 가벼운 분석환경 구축해보기
[DS Meetup] iPad로 가벼운 분석환경 구축해보기
2020년 9월 19일 개발자 이야기
2020년 9월 19일 개발자 이야기
주니어 개발자의 개인프로젝트 개발기
주니어 개발자의 개인프로젝트 개발기
2020년 10월 10일 개발자 이야기
2020년 10월 10일 개발자 이야기
2020년 4월 25일 개발 이야기 정리
2020년 4월 25일 개발 이야기 정리
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
제 5회 D2 CAMPUS SEMINAR - Swift로 만든 serverframework 개발기
제 5회 D2 CAMPUS SEMINAR - Swift로 만든 serverframework 개발기
2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리
Similar a 예제를 통해 쉽게_살펴보는_뷰제이에스
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
양재동 코드랩
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
KTH, 케이티하이텔
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
현철 조
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
Rhio Kim
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering
Codex project
Codex project
Lee Jungpyo
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
Daum DNA
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
NAVER D2
프론트엔드 개발자
프론트엔드 개발자
jung kyunghwan
Front end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
V8 add on with middleware modules
V8 add on with middleware modules
Jay Kim
모바일환경에서의 크로스 플랫폼_3D_렌더링엔진_제작과정
모바일환경에서의 크로스 플랫폼_3D_렌더링엔진_제작과정
funmeate
2D games with iOS or Corona
2D games with iOS or Corona
EungShik (Henry) Kim
한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기
Yunhwan Na
[111217 아꿈사연말모임] 웹소켓과온라인게임
[111217 아꿈사연말모임] 웹소켓과온라인게임
sung ki choi
초보 개발자/학생들을 위한 오픈소스 트랜드
초보 개발자/학생들을 위한 오픈소스 트랜드
YoungSu Son
Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.
장현 한
[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기
NAVER D2
Spring boot + java 에코시스템 #1
Spring boot + java 에코시스템 #1
SeungHa Eom
Similar a 예제를 통해 쉽게_살펴보는_뷰제이에스
(20)
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
Codex project
Codex project
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
프론트엔드 개발자
프론트엔드 개발자
Front end dev 2016 & beyond
Front end dev 2016 & beyond
V8 add on with middleware modules
V8 add on with middleware modules
모바일환경에서의 크로스 플랫폼_3D_렌더링엔진_제작과정
모바일환경에서의 크로스 플랫폼_3D_렌더링엔진_제작과정
2D games with iOS or Corona
2D games with iOS or Corona
한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기
[111217 아꿈사연말모임] 웹소켓과온라인게임
[111217 아꿈사연말모임] 웹소켓과온라인게임
초보 개발자/학생들을 위한 오픈소스 트랜드
초보 개발자/학생들을 위한 오픈소스 트랜드
Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.
[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기
Spring boot + java 에코시스템 #1
Spring boot + java 에코시스템 #1
예제를 통해 쉽게_살펴보는_뷰제이에스
1.
1 중앙일보 JunSeok.Jung 예제를 통해 쉽게
살펴보는 Vue.js
2.
2 정준석 (Dexter) (현) 중앙일보 (전)
LG전자 R&D연구소 (전) WISEnut (전) 에듀윌 Email - korcosin@gmail.com Facebook - https://www.facebook.com/junseok.jung.1 GitHub - https://github.com/korcosin SlideShare - https://www.slideshare.net/junseokjung1 * Web Developer * Polyglot Programmer 를 꿈꾸는… (C#,Java,Ruby,…And?) * 집필 중… * 소통 중…
3.
INDEX 3 1. 도입 배경 2.
기본 개념 3. 실전 코드 4. 유용한 레퍼런스 5. 도입 시 주의사항 6. 마무리 오늘 할 이야기
4.
4 도입 배경
5.
5 Mobile Web 도입 배경
6.
6 Dynamic Web (로딩 없이
자연스럽게 움직이는) 도입 배경
7.
7 jQuery? (우리 회사의 기본
기술) 도입 배경
8.
8 도입 배경
9.
9 로직처리 多 스파게티 多 스트레스
多 도입 배경
10.
10 Append를 이용한 Html Drawing은
한계가 있다. 도입 배경
11.
11 요즘은 Front-End Framework도 많던데.. 도입
배경
12.
12 Angular React Vue 도입 배경
13.
13 Vue?? (들어본 적
없음) 도입 배경
14.
14 2017년 1월 Vue.js에
대한 리서치 많은 사용자가 있어서 검증 된 Angular와 React를 대체할 수 있을까? 도입 배경
15.
15 〃Vue.js는 더 유연하고,
관점이 적은 솔루션이다.〃 〃당신이 원하는 방법으로 설계할 수 있도록 한다.〃 도입 배경
16.
16 〃완벽한 SPA보다는, 개별 페이지
안에서 가벼운 기능으로 사용 할 수 있다.〃 도입 배경
17.
17 다른 프레임워크와의 비교
(Vue의 장점) 원본 : https://vuejs.org/v2/guide/comparison.html 번역 : https://kr.vuejs.org/v2/guide/comparison.html 도입 배경
18.
18 도입 배경
19.
19 오늘 발표에서는 Life Cycle
과 기본 문법만 살펴 봅니다. 도입 배경
20.
20 기본 개념
21.
21 우리 프로젝트에 필요
한 것 1. 렌더링 전 후의 스크립트 처리 기본 개념
22.
22 1. 렌더링 전
후의 스크립트 처리 기본 개념
23.
23 기본 개념 LIFE CYCLE
24.
24 기본 개념 DATA와 EVENT
세팅 전, DOM 접근 전 DATA와 EVENT 세팅 완료, DOM 접근 전 DOM 접근 전 DOM 접근 완료 DOM 변경 있기 전 DOM 변경 완료 Vue 인스턴스가 제거 되기 전 Vue 인스턴스 제가 된 후
25.
25 기본 개념 DATA와 EVENT
세팅 전, DOM 접근 전 DATA와 EVENT 세팅 완료, DOM 접근 전 DOM 접근 전 DOM 접근 완료 DOM 변경 있기 전 DOM 변경 완료 Vue 인스턴스가 제거 되기 전 Vue 인스턴스 제가 된 후
26.
26 실전 코드
27.
27 우리 프로젝트에 필요
한 것 1. 렌더링 전 후의 스크립트 처리(Life Cycle) 2. JSON API 처리 및 레이어 그리기 3. 상황 별 레이어의 움직임 처리 실전 코드
28.
28 2. JSON API
처리 및 레이어 그리기 실전 코드
29.
29 Ajax를 이용하여 Data를
가져온다. 실전 코드
30.
30
31.
31 Vue Instance 생성 DOM
영역 지정 DATA 세팅
32.
32
33.
33 Data 접근 및
초기화 DOM 초기 데이터를 위한 함수 호출
34.
34
35.
35 함수 작성
36.
36
37.
37
38.
38 el: “#app” data :
{ input : { movieNm : “” } } methods : { fn_search: function() { } }
39.
39
40.
40 movie.list 에 item
카운팅 반복문
41.
41 3. 상황 별
레이어의 움직임 처리 실전 코드
42.
42 레이어의 숨김/노출 여부는 V-show
와 v-if / v-else 를 이용한다.
43.
43 상황 별 CSS
클래스 및 Style 적용은 v-bind:class와 v-bind:style을 이용한다.
44.
44 Vue.js 프로젝트 결과물 http://www.nachomovie.com (Vue.js로
만들어진 라이브러리 및 콤포넌트) 실전 코드
45.
45 실전 코드
46.
46 실전 코드 Front-End의 모든
기능이 Vue를 이용하여 구성되어 있다.
47.
47 유용한 레퍼런스
48.
48 내가 Vue를 도입한
진짜 이유 유용한 레퍼런스
49.
49 레퍼런스가 정말 다양하고
친절하다. 유용한 레퍼런스
50.
50 친절한 한글 문서 https://kr.vuejs.org/ (Vue.js
가이드) https://ko.nuxtjs.org/ (Nuxt.js 가이드) 유용한 레퍼런스
51.
51 친절한 라이브러리 https://github.com/vuejs/awesome-vue (Vue.js로 만들어진
라이브러리 및 콤포넌트) 유용한 레퍼런스
52.
52 친절한 커뮤니티 https://vuejs-korea.signup.team/ (Vue.js 슬랙) https://vuejs-kr.github.io/ (Vue.js
블로그) https://www.facebook.com/groups/vuejs.korea/ (Vue.js 한국어 사용자 페이스북) 유용한 레퍼런스
53.
53 도입 시 주의사항
54.
54 this 도입 시 주의사항
55.
55
56.
56 Bootstrap Theme (AdminLTE, MatrixAdmin
등등…) 도입 시 주의사항
57.
57 템플릿 내 Script와
충돌 도입 시 주의사항
58.
58 도입 시 주의사항
59.
59 도입 시 주의사항 v-model
자체로 바인딩이 안 된다. jQuery를 사용하여 uniform.update 해야 상태가 변한다…
60.
60 해결책 script file 제거 script
file customizing 도입 시 주의사항
61.
61 해결책 Vue.js로 Wrapping 된
Bootstrap을 사용 하는 것이 좋다. (https://bootstrap-vue.js.org/) 도입 시 주의사항
62.
62 해결책 최근에는 Vue.js용 Bootstrap
Theme도 생겨나고 있다. (https://templateflip.com/vuejs-admin-templates/) 도입 시 주의사항
63.
63 마무리
64.
64 Vue.js를 하면서 느낀
점 마무리
65.
65 API처리 용이 (Axios라는 것도
있어요) 마무리
66.
66 Angular나 React경험이 있다면 더
쉽게 접근할 수 있을 듯… 마무리
67.
67 발전하고 있다는 것이
느껴짐… (사용자도 많아지고, 그만큼 라이브러리도 다양해졌다.) 마무리
68.
68 Thank You !! 〃 잔잔한
바다에서는 좋은 뱃사공이 만들어지지 않는다. - 영국 속담 - 〃
Descargar ahora