본문 바로가기
반응형

SW LAB/Front-End25

Vue.js 완벽가이드 : (1) 소개 & 설치 1. 강의소개 & 설치 1-1. 강의 소개 Application을 직접 제작하며 Vue.js의 구조를 이해합니다. Application 제작을 위한 실무 학습을 수행합니다. Vue.js를 이용한 웹 서비스 구현 절차 실무 프로젝트 진행 방식 (컴포넌트, 라우터, API, 스토어) 컴포넌트 디자인 패턴과 자바스크립트 비동기 처리 Mixins과 HOC를 이용한 컴포넌트 재활용 방법 외부 라이브러리 모듈화 및 실무 프로젝트 구성 방법 사용자 경험을 높이는 라우터 설계 방법과 고급 라우터 패턴 뉴스정보를 읽어와서 화면에 표기하는 Application을 제작합니다. 각 페이지를 클릭하여 라우터 처리를 수행하도록 합니다. 각 항목을 클릭할 때 상세 내용을 읽어와 화면에 표기합니다. 1-2. 개발 환경 개발환경은 다.. 2020. 4. 23.
Vue.js 시작하기 : (5) Single File Component & 최종 정리 싱글 파일 컴포넌트 & 최종정리 7. 싱글 파일 컴포넌트 빈 vue 파일을 생성 후 scf(scaffold)키워드로 자동완성으로 기본 템플릿 코드를 작성할 수 있습니다. 에는 하나의 만 선언이 가능합니다. components 폴더 하위에 컴포넌트를 생성하게 되는데, 보통 두 단어 이상으로 구성하길 권장합니다. html에 존재하는 기존 tag와 중복될 수 있기 때문입니다. App.vue appHeader.vue {{ propsdata }} send 8. 최종 프로젝트 다음 명령어를 수행하여 새로운 프로젝트를 생성하고 실행합니다. vue create vue-form cd vue-form npm run serve 간단하게 마크업 구조를 잡아보겠습니다. App.vue id: pw: login username과 .. 2020. 4. 23.
Vue.js 시작하기 : (4) Templete Syntax & Vue-cli 템플릿 문법 & Vue-CLI 7. 템플릿 뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나누어집니다. 데이터 바인딩 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)입니다. {{ message}} new Vue({ message = 'hello world' }) 디렉티브 디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있습니다. 예를 들어 아래와 같이 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있습니다. 속성 중 v- 로 .. 2020. 4. 23.
Ghost-Jekyll 적용하기 Github Page & Jekyll 적용 1. Github Page 생성 다음 주소로 접속 합니다. https://pages.github.com/ Github에 회원가입 후, 페이지 생성 절차를 진행합니다. 2. Jekyll 구축 저는 Windows 환경에서 구축을 진행하였습니다. 2-1. 루비 설치 다음 주소로 접속하여 루비를 다운로드 합니다. https://rubyinstaller.org/downloads/ 저는 Ruby+Devkit 2.5.5-1 (x64) 를 다운로드 하였습니다. 참고로 Jekyll은 Ruby 2.x 이상의 버전에서만 호환됩니다. 그리고 별도로 DevKit 를 설치할 필요 없는 통합 버전 입니다. 2-2. Jekyll 설치 설치 진행 중 참고 사항 ' Add Ruby ex.. 2020. 4. 23.
Vue.js 시작하기 : (3) Router & Axios 라우터 & Axios 5. 라우터 Vue 라우터는 Vue.js의 공식 라우터입니다. Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다. 아래의 기능을 포함합니다. 중첩된 라우트/뷰 매핑 모듈화된, 컴포넌트 기반의 라우터 설정 라우터 파라미터, 쿼리, 와일드카드 Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과 세밀한 네비게이션 컨트롤 active CSS 클래스를 자동으로 추가해주는 링크 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동작 5-1. 라우터 코드 정의 new VueRouter({}) 를 이용하여 라우터 인스턴스를 정의할 수 있습니다. 그리고 new Vue({}) 객체의 router 속.. 2020. 4. 23.
Vue.js 시작하기 : (2) Instance & Comoponent 인스턴스 & 컴포넌트 3. 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야하는 코드입니다. 3-1. 인스턴스 소개 아래 코드에서 Vue로 인스턴스를 생성하는 것을 보여줍니다. 3-2. 인스턴스와 생성자 함수 인스턴스와 생성자 함수를 사용하는 예는 다음과 같습니다. function Vue() { this.logText = function() { console.log('hello'); } } var vm = Vue(); vm.logText(); 출력 -> hello 3-3. 인스턴스 옵션 속성 new Vue({ el: , template: , data: , methods: , created: , watch: }) el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) templa.. 2020. 4. 23.
반응형