본문 바로가기

전체 글134

[Hoon] Vuejs 강의 - Vue.js Firebase + Validation 개발 Vue Example - Firebase + Validation 개발 vue.js Example 원본 -> https://github.com/vuejs/vue/tree/dev/examples/firebase [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ JSFiddle 에 바로 적용해 분석해 보기 [html] {{user.name}} - {{user.email}} X Name cannot be empty. Please provide a valid email address. [css] body { font-family: Helvetica, Arial, sans-serif; } ul { padding: 0; } .user { height: 30px; line-height: 3.. 2020. 6. 19.
펜데믹 공포 - Virus 이야기 Virus 이야기 개요 바이러스는 유기체의 살아있는 세포를 통해서만 생명활동을 하는 존재이다. 평시에는 거의 돌덩어리와 같은 상태로 비활성화 되어있다가 숙주의 세포에 기생하기 시작해야 비로소 생명체로서의 활동을 하는게 특징으로 이에 따라 생물과 무생물의 중간적 존재로 본다. 이 때문에 생물 분류 단계에서 세균역, 진핵생물역, 고세균역 그 어디에도 속하지 않는 미분류 상태이다. 바이러스는 세균과는 엄연히 다른 존재다. 바이러스는 세균보다도 수백배 이상 작아서 거름종이도 통과할 정도이다. 일종의 단세포 생물로 기능하는 세균에 비해 바이러스의 구조는 세포 단위도 되지 않을 정도로 훨씬 간단하여, 단백질 캡슐과 유전 물질 밖에 없다 상세 바이러스는 크기가 작고 복제 주기도 짧아 빠른 속도로 변이할 뿐만 아니라,.. 2020. 6. 10.
[Hoon] Vuejs 강의 - Vue Modal Component 개발하기 Vue Modal Component 개발하기 - Hoon's vue.js Example 원본 -> https://github.com/vuejs/vue/tree/dev/examples/modal [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ JSFiddle 에 바로 적용해 분석해 보기 [html] Show Modal custom header [css] .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal.. 2020. 6. 2.
[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 Tree Example 개발하기 Vue Tree Example 개발하기 vue.js Example 원본 소스 -> https://github.com/vuejs/vue/tree/dev/examples/tree [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ JSFiddle 에 바로 적용해 분석해 보기 - [html] [css] body { font-family: Menlo, Consolas, monospace; color: #444; } .item { cursor: pointer; } .bold { font-weight: bold; } ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; } [javascript] var data = { nam.. 2020. 5. 28.
[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 강의 - Javascript Real 웹앱 개발 - 1부 1강 bit.ly/2LMzjNC [인프런 인강] 선착순 100명 50% 할인쿠폰! - [Vue.js] Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 인프런 인터넷 강의 선착순 100명 50% 할인쿠폰! [Vue.js] javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 쿠폰번호 : 678-ee6aa5185caa 사용법 : 결제시 쿠폰코드 등록을 통해 적용 기한 : 2020년 6월.. plogger.tistory.com bit.ly/2TtRHis [Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기.. 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.
커피한잔(5000원) 으로 배우는 Vue.js 개념 핵심 강의! - 인프런 인강 55% 할인 쿠폰 커피한잔(5000 원) 으로 배우는 Vue.js 개념 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% 할인쿠폰! [Vue.js] javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 쿠폰번호 : 836-87e90db343bc 사용법 : 결제시 쿠폰코드 등록을 통해 적용 기한 : 2020년 7월 31일 까지 제한 : 선착순 100명 사용처 : 인프런 인터넷 강의 => bit.ly/2TtRHis [Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이.. 2020. 5. 14.
[Hoon] Vuejs 강의 - Vue UI 와 Vue 관련 개발 Tools vue ui vue ui CLI Service This is what you will see in the package.json of a project using the default preset: { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } npm run build # OR yarn build Vue Loader https://vue-loader.vuejs.org/ Introduction | Vue Loader Introduction VERSION NOTE This is the documentation for Vue Loader v15 and above. If you are upgrading f.. 2020. 5. 13.
[Hoon] Vuejs 강의 - Vue CLI 로 Vue SFC 개발 환경 생성하기 Vue CLI 로 Vue SFC 개발 환경 생성하기 Vue CLI https://kr.vuejs.org/v2/guide/installation.html#CLI Vue.js는 단일 페이지 애플리케이션를 빠르게 구축할 수 있는 공식 CLI를 제공합니다. 최신 프론트엔드 워크 플로우를 위해 사전 구성된 빌드 설정을 제공합니다. # 각 다른 빌드간 차이점 UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere. UMD: UMD builds can be used directly in the browser via a tag. The default file from jsDelivr CDN at https://cdn.j.. 2020. 5. 13.
[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 강의 - v-for 와 컴포넌트 v-for 와 컴포넌트 https://kr.vuejs.org/v2/guide/list.html#v-for-와-컴포넌트 v-for를 컴포넌트에 직접 사용할 수 있습니다. Vue.component('todo-item', { props: ['text', 'isComplete'], template: '{{ text }}, {{ isComplete }}' }) new Vue({ el: '#app', data: { todos: [ { id: 1, text: 'Learn Vue', isComplete: false }, { id: 2, text: 'Take out the trash', isComplete: false }, { id: 3, text: 'Mow the law', isComplete: false } ] } .. 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 Lifecycle Hooks Vue Lifecycle Hooks https://kr.vuejs.org/v2/guide/instance.html#인스턴스-라이프사이클-훅 https://vuejs.org/images/lifecycle.png 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 데이터 관찰 설정이 필요한 경우 템플릿을 컴파일하는 경우 인스턴스 DOM 에 마운트 하는 경우 데이터가 변경되어 DOM 을 업데이트하는 경우 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅 도 호출 https://kr.vuejs.org/v2/guide/instance.html#라이프사이클-다이어그램 beforeCreate created {{ a }} new Vue({ el: '#app', data: { a: 1 }, be.. 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.
인프런 인강 30% 할인 - [Vue.js] Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 bit.ly/2TtRHis [Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 �� www.inflearn.com Vue.js] 쿠폰번호 : 665-3e83329ee049 사용법 : 결제할때 쿠폰코드 등록을 통해 적용 기한 : 2020년 5월 30일 까지 제한 : 선착순 100명 2020. 5. 6.
[Hoon] Vuejs 강의 - Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 bit.ly/2TtRHis [Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 �� www.inflearn.com 이 강의는 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 이런 걸 배울 수 있어요 Vue, PW.. 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 강의 - SFC (Single File Components) 는 무엇인가? SFC (Single File Components) 는 무엇인가? Single File Components , SFC - .vue 확장자를 가진 싱글 파일 컴포넌트 싱글 파일 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 페이지내 Vue 선언 방식의 disadvantages(약점) ● Global definitions - 모든 컴포넌트에 대한 고유한 이름 필요 ● String templates - 구문 강조가 약함, 여러 줄로 된 HTML에 보기 안좋은 슬래시 ● No CSS support - CSS is conspicuously left out CSS 를 지원하지 않는 것이 아니라 CSS 가 눈에 띄게 모듈화 되지 않음 ● No build step .. 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.

티스토리툴바