본문 바로가기

vue.js 인터넷 강의20

[Hoon] Vuejs 강의 - Markdown Editor 개발 Vue Example - Markdown Editor 개발 vue.js Example 원본 -> https://github.com/vuejs/vue/tree/dev/examples/markdown [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ JSFiddle 에 바로 적용해 분석해 보기 [html] [css] html, body, #editor { margin: 0; height: 100%; font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; } textarea, #editor div { display: inline-block; width: 49%; height: 100%; vertical-align: top; .. 2020. 5. 29.
[Hoon] Vuejs 강의 - Vue Router 시작하기 Vue Router 기본 https://router.vuejs.org/kr/ Vue 라우터는 Vue.js의 공식 라우터입니다. Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다. 동적 라우트 매칭 중첩된 라우트 프로그래밍 방식 네비게이션 이름을 가지는 라우트 이름을 가지는 뷰 리다이렉트와 별칭 라우트 컴포넌트에 속성 전달 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동작 등을 포함합니다. 위 기능에 대해서는 2부에서 자세히 다루도록 하겠습니다. 지금은 Vue Router 에 대해 기본적인 이해에 집중하겠습니다. Vue Router 설치 https://router.vuejs.org/kr/install.. 2020. 5. 22.
[Hoon] Vuejs 강의 - 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 실습 bit.ly/3fXOzon 인프런 인강 선착순 30%(7,700원) 마지막 할인 쿠폰 - Vue.js 핵심 강의! 강좌명 - [Vue.js 입문] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 실습 인프런 인터넷 강의 선착순 100명 30% 할인쿠폰! (7,700원으로 수강) 강의 수강평도 부탁드립니다. bit.ly/2TtRHis [Vue.js 입문.. plogger.tistory.com bit.ly/2TtRHis [Vue.js입문~초급] Javascript 초보 Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런 이 강의는 초보 Javascript 개발자가 직접 Real 웹앱을 개발할 수 있는 개발자가 되는 것에 초점을 맞추고 있습니다. 이 강의를 수강하시면 Vu.. 2020. 5. 20.
[Hoon] Vuejs 강의 - Simple To Do App 개발하기 Simple To Do App 개발하기 https://codesandbox.io/s/o29j95wx9 index.html index.js App.vue variables.scss SCSS는 SASS(https://ko.wikipedia.org/wiki/Sass_(스타일시트_언어)) 세번째 버전에서 추가되엇습니다. SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌습니다. scss를 공통적으로 활용하고자 할때 이런식으로 import 하여 진행할 수 있음 TodoList.vue TodoListItem.vue BaseInputText.vue 컴포넌트에서 v-model 위 문장은 아래와 같습니다. 컴포넌트에서는 v-model 을 쓸 수 없고 v-bind:value 와 v-on 을 이용해서.. 2020. 5. 19.
[Hoon] Vuejs 강의 - codesandbox 로 Vue SFC 환경 맛보기 codesandbox 로 Vue SFC 환경 맛보기 https://codesandbox.io CodeSandbox: Online IDE for Rapid Web Development CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster codesandbox.io Create a Sandbox, it's free Vue main.js render - https://kr.vuejs.org/v2/guide/render-function.html // very short - es6 arrow function render: h => h (App) // short render: fu.. 2020. 5. 13.
[Hoon] Vuejs 강의 - Component Basic Component Basic https://kr.vuejs.org/v2/guide/components.html 컴포넌트는 무엇인가요? 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 컴포넌트 사용하기 # 전역 등록 Vue.component('my-component', { // 옵션 template: '사용자 정의 컴포넌트 입니다!' }) // 루트 인스턴스 생성 new Vue({ el: '#app' }) # 지역 등록 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 상위 템플릿에서만 사용할 수 있는 컴포넌트를 .. 2020. 5. 12.
[Hoon] Vuejs 강의 - 반복문 - 리스트 렌더링 반복문 - 리스트 렌더링 https://kr.vuejs.org/v2/guide/list.html v-for로 엘리먼트에 배열 매핑하기 v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 item in items 형태로 특별한 문법이 필요합니다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭 입니다. #기본 사용방법 {{ item.message }} var vm = new Vue({ el: '#app', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있습니다. v-for는 또한 현재 항목의 인덱스에.. 2020. 5. 11.
[Hoon] Vuejs 강의 - 폼 입력 바인딩 폼 입력 바인딩 https://kr.vuejs.org/v2/guide/forms.html 기본 사용법 v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. # input 메시지: {{ message }} new Vue({ el: '#app', data: { message: '안녕하세요!' } }) # textarea 여러 줄을 가지는 메시지: {{ message }} # checkbox v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다... 2020. 5. 11.
[Hoon] Vuejs 강의 - 이벤트 핸들링 이벤트 핸들링 https://kr.vuejs.org/v2/guide/events.html 이벤트 청취 v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다. Add 1 클릭한 횟수는 {{ counter }} 번 new Vue({ el: '#app', data: { counter: 0 } }) 메소드 이벤트 핸들러 Greet var vm = new Vue({ el: '#app', data: { name: 'Vue.js' }, methods: { greet: function (event) { alert('Hello ' + this.name + '!') // `event` 는 네이티브 DOM 이벤트입니다 if (event) { alert(event.targe.. 2020. 5. 11.
[Hoon] Vuejs 강의 - computed 와 watch computed 와 watch https://kr.vuejs.org/v2/guide/computed.html 이번 시간에는 Vue 의 강력한 속성인 computed 와 watch 에 대해서 알아보도록 하겠습니다. 앞에서 Vue 가 angularjs 비해서 훨씬 빠르고, react 보다 조금 더 빠르다고 비교를 했었는데요. 이 computed 와 watch 를 잘 활용해야지만 그러한 결과를 만들 수 있습니다. 1. computed 속성 앞에서 본 템플릿 내에 표현식을 넣는 방식은 편리하지만, 간단한 연산일 때만 이용하는 것이 좋습니다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 그래서 Vue 는 computed 라는 속성을 제공합니다. {{ message.split(''.. 2020. 5. 8.
[Hoon] Vuejs 강의 - 조건부 렌더링 조건부 렌더링 https://kr.vuejs.org/v2/guide/conditional.html v-if Vue에서는 v-if 디렉티브를 사용 Yes new Vue({ el:'#app', data: { ok: true } }) v-else Yes No #template 에 v-if을 갖는 조건부 그룹 만들기 v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다 Title Paragraph 1 Paragraph 2 #v-else v-else 디렉티브를 사용하여 v-if에 “else 블록” 이제 나를 볼 수 있어요 이제는 안보입니다 v-else 엘리먼트는 v-if 엘리먼트 또는 v-else-if 엘리먼트 바로 뒤에 있어야 합니다. 그렇지 않으면 인식할 수 없습니다. #v-else-if v-else-.. 2020. 5. 8.
[Hoon] Vuejs 강의 - 클래스와 스타일 바인딩 클래스와 스타일 바인딩 https://kr.vuejs.org/v2/guide/class-and-style.html Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공합니다. 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다. HTML 클래스 바인딩하기 # 객체 구문 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다. 1 new Vue({ el:'#app', data: { isActive: true } }) 객체에 필드가 더 있으면 여러 클래스를 토글 할 수 있습니다. 또한v-bind:class 디렉티브는 일반 class 속성과 공존할 수 있습니다. 2 new Vue({ el:'#app', data: { isActive: tru.. 2020. 5. 7.
[Hoon] Vuejs 강의 - Vue 핵심 문법 실습 ( 공식 가이드 문서 오류 해결 ) 템플릿 문법 https://kr.vuejs.org/v2/guide/syntax.html 보간법(Interpolation) - 삽입법 #문자열 데이터 바인딩의 가장 기본 형태는 “Mustache” 구문(이중 중괄호)을 사용한 텍스트 보간입니다. 메시지: {{ msg }} new Vue({ el:'#app', data: { // 1. 선언적 렌더링 msg: 'Hello Vue!' } }) 다시는 변경하지 않습니다: {{ msg }} 메시지: {{ msg }} 다시는 변경하지 않습니다: {{ msg }} var vm = new Vue({ el:'#app', data: { // 1. 선언적 렌더링 msg: '안녕하세요 Vue!' } }) vm.msg = 'Hi Vue!' #원시 HTML Using mustach.. 2020. 5. 6.
[Hoon] Vuejs 강의 - Vue Instance Vue Instance https://kr.vuejs.org/v2/guide/instance.html 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니댜. new Vue 가 바로 Vue Instance 입니다. var vm = new Vue({ // 옵션 }) 엄격히 MVVM 패턴과 관련이 없지만 Vue의 디자인은 부분적으로 그것에 영감을 받았습니다. Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용합니다. https://ko.wikipedia.org/wiki/모델-뷰-뷰모델 Vue Instance 는 MVVM(model–view–viewmodel, MVVM) 패턴 의 ViewModel 역활 이다. 속성과 메소드 https://kr.vuejs.o.. 2020. 5. 6.
[Hoon] [Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 실습 bit.ly/2TtRHis [Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 �� www.inflearn.com 이 강의는 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 이런 걸 배울 수 있어요 Vue, PWA, SPA, SFC 등 Vue와 관련된 기본 개념 이해하기 Vue 코딩 맛보기 Vue 인스턴스 .. 2020. 4. 17.
[Hoon] Vuejs 강의 - 조건문과 반복문 조건문과 반복문 https://kr.vuejs.org/v2/guide/index.html#조건문과-반복문 엘리먼트가 표시되는지에 대한 여부를 제어 이제 나를 볼 수 있어요 new Vue({ el: '#app', data: { seen: true } }) {{ todo.text }} new Vue({ el: '#app', data: { todos: [ { text: 'JavaScript 배우기' }, { text: 'Vue 배우기' }, { text: '무언가 멋진 것을 만들기' } ] } }) 버튼을 하나 추가하고, Todo 를 추가하는 메소드를 만들어서 확인해 봅시다. { text: 'New item' }를 추가힙니다. Todo 목록에 새 항목이 동적으로 추가 된것을 볼 수 있습니다. {{ todo.t.. 2020. 4. 13.
[Hoon] Vuejs 강의 - Vue 시작하기(Getting Started) Vue 시작하기(Getting Started) https://kr.vuejs.org/v2/guide/index.html#시작하기 [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ 선언적 렌더링 https://kr.vuejs.org/v2/guide/index.html#선언적-렌더링 Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다. 텍스트 보간(Interpolation) - 텍스트 삽입 {{ message }} new Vue({ el:'#app', data: { message: '안녕하세요 Vue!' } }) 이제 데이터와 DOM이 연결되었으며 반응형이 되었습니다. 엘리먼트 속성 바인딩 내 위에 잠시 마우스를.. 2020. 4. 13.
[Hoon] Vuejs 강의 - SPA (Single-Page Application)는 무엇인가? SPA (Single-Page Application)는 무엇인가? ●서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션을 말한다. 웹 애플리케이션 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 웹 애플리케이션(web application) 또는 웹 앱은 소프트웨어 공학적 관점에서 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 소프트웨어를 말한다. 웹 애플리케이션은 클라이언트로서 웹 브라우저를 사용하는 사람이 많기 때문에 인기를 누리고 있다. 수천만 대의 PC에 굳이 소프트웨어를 배포해서 설치하지 않아도 웹 애플리케이션을 유지 관리할 수 있다는 점이 장점 중의 하나이다. 웹 애플리케이션은 웹 .. 2020. 2. 17.
[Hoon] Vuejs 강의 - PWA (Progressive Web Application) 는 무엇인가? PWA (Progressive Web Application) 는 무엇인가? ● 웹 소프트웨어의 일종으로, HTML, CSS, 자바스크립트를 포함한 웹 기술들을 사용하여 만듦. HTML - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 ko.wikipedia.org 종.. 2020. 2. 17.
[Hoon] Vuejs 강의 - Vue.js가 무엇인가? Vue.js 가 무엇인가? ● Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크(Progressive Framework) → 일반적인 웹 페이지 뿐만 아니라 PWA(프로그레시브 웹앱) 개발에 용이하다 ● 점진적으로 채택할 수 있도록 설계됨 vue -> vue router -> vuex Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Introduction | Vue Router Introduction VERSION NOTE For TypeScript users, vue-router@3.0+ requires vue@2.5+, and vice versa. Vue Router is the official router for Vue... 2020. 2. 17.

티스토리툴바