본문 바로가기

Frontend44

[Hoon] Vuejs강의 - Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들 I Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들 Vue Router 기본편에서, Vue 는 angularjs처럼 templateUrl 을 template 부분에 활용할 수 없다고 하였는데요. 그럼, Vue 에서 컴포넌트 템플릿을 정의하는 방법들에는 어떤한 것들이 있는지 자세히 알아 보도록 하겠습니다. https://vuejs.org/2015/10/28/why-no-template-url/ Why Vue.js doesn't support templateURL — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Vue 의 저자 에반 유의 입장도 정리해 보았었는데요. 요약해 보면, 컴포넌트 입장에서 html 과 js 코딩이 분리 되지 않도록 .. 2020. 7. 21.
[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.
[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 강의 - 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 강의 - 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.
[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.
[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.
[Hoon] AngularJS - Angular Style Guide & Angular 2 Angular Style Guide & Angular 2 The Angular 1 Style Guide. The Angular 2 Style Guide. https://angular.io Angular angular.io https://angular.io/docs/ts/latest/quickstart.html Angular angular.io https://angular.io/resources/live-examples/quickstart/ts/eplnkr.html Angular angular.io https://angular.io/docs/ts/latest/tutorial/ Angular angular.io AngularJS Patterns: Clean Code https://github.com/john.. 2019. 1. 4.
[Hoon] AngularJS - AngularJS 버전업하기 Updating AngularJS npm run update-deps bower.json angular version -> 해당 version 의 최신 버전으로 업데이트 "dependencies": { "angular": "~1.5.0", "angular-route": "~1.5.0", "angular-loader": "~1.5.0", "angular-mocks": "~1.5.0", "html5-boilerplate": "^5.3.0" } ===> "dependencies": { "angular": "~1.5.11", "angular-route": "~1.5.11", "angular-loader": "~1.5.11", "angular-mocks": "~1.5.11", "html5-boilerplate":.. 2019. 1. 4.
[Hoon] AngularJS Seed - the seed for AngularJS apps AngularJS Seed - the seed for AngularJS apps https://github.com/angular/angular-seed git clone https://github.com/angular/angular-seed.git cd angular-seed npm install npm start - http://localhost:8000/index.html Directory Layout - _test.js -> .spec.js npm test Running End-to-End Tests cd e2e-tests npm start npm run update-webdriver npm run protractor bit.ly/3fXOzon 인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.j.. 2019. 1. 4.

티스토리툴바