럿고의 개발 노트

[Goorm] Vue.js로 시작하는 SPA개발7. 마무리 ● 추가로 배울 것들- Vue-CLI (with Webpack)■ CLI(Commend Line Interface)기반의 Vue 프로젝트 생성 도구. 기본적인 폴더 구조, 라이브러리 등을 설정■ Webpack은 프로젝트의 구조를 분석하고 JavaScript모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module Bundler)■ Bulid & Deploy - Vue-Router■ 일반적으로 뷰에서 화면이 전환될 때, 전환하는 행위를 Router라고 함.■ Vue에서 SPA를 제작할 때 유용한 라우팅 라이브러리로 Vue Routers를 제공- Vuex■ Vue.js 애플리케이션에 대한..

[Goorm] Vue.js로 시작하는 SPA개발6. Components6.1. Components 기본 개념 ● Components- Root Vue Instance안에서 Component 체계를 가지고 있는 것- Vue Instance이기 때문에 Instance Option들을 똑같이 받음- 사용 순서■ 웹페이지에서 사용하게 될 Component들을 먼저 정의 및 등록 - JavaScript■ 웹페에지에서 Component 사용할 곳을 지정 - HTML■ Root Instance를 생성 - !JavaScript - Component의 핵심은 재 사용성 6.2. Components 기본 예제 실습 ● 실습 코드 6.3. Props로 Data 주고 받기 ● Props- 사용자 정의 Attribute로, 부..

[Goorm] Vue.js로 시작하는 SPA개발5. Directives5.1. Directive의 개념과 v-for ● 참고문서- 조건부 랜더링(Conditional Rendering) : https://kr.vuejs.org/v2/guide/conditional.html- 리스트 랜더링 - 반복문(List Rendering) : https://kr.vuejs.org/v2/guide/list.html- 이벤트 핸들링 - JavaScript Event (Event Handling) : https://kr.vuejs.org/v2/guide/events.html- 폼 입력 바인딩 - Data Binding (Form Input Bindings) : https://kr.vuejs.org/v2/guide/form..

[Goorm] Vue.js로 시작하는 SPA개발4. Template Syntax4.1. 주요 문법 설명 ● Template- Vue.js만의 특수한 문법으로 틀을 짜면, 그 틀은 실제 보여주는 화면을 위한 HTML로 Complie■ Template이 Virtual DOM Render Function으로 컴파일★ Virtual DOM : 실제 DOM에 필요한 변경사항을 추적하기 위해 만드는 것★ Render Function : Vue는 템블릿을 사용하여 대다수 경우 HTML을 작성할 것을 권장함. 그러나 JavaScript가 완전히 필요한 상황이 있을 때, 템플릿에 더 가까운 컴파일러인 Render Function을 사용할 수 있음 ■ Reactivity System을 통해 최소한으로 다시 표시해야하는 C..

[Goorm] Vue.js로 시작하는 SPA개발3. Vue Instance와 작동원리3.1. Vue Instance ● 참고문서- Vue.js 공식문서 - The Vue Instance(https://kr.vuejs.org/v2/guide/instance.html)- Vue.js 공식문서 - Computed Properties Watchers(https://kr.vuejs.org/v2/guide/computed.html) ● Vue Instance?- MVVM패턴의 View Model에 해당, 그렇다고 Vue가 MVVM패턴을 가진다는 것은 아님.- View(DOM)과 Model(Plain JavaScript Object)사이의 통신을 가능하게 해주는 역할- Binder를 가지고 있어 View와 Model..

[Goorm] Vue.js로 시작하는 SPA개발2. Hello World로 만나는 Vue2.1. Hello World로 만나는 Vue ● 페이지 요구사항 - HTML body태그 안에 빈 div Element 만들기- div Element에 #app ID 주기- JavaScript를 통해 div Element안에 Text를 넣어주기- 이 페이지를 JavaScript / jQuery / Vue 속도 비교- div안에 div를 더 넣어서 그 안에 content를 변경 ● 실습코드 ● 실습 내용 정리- 로딩 속도면 비교■ JavaSccript : 39.2min■ jQuery : 40min / 1.87s■ Vue.js : 40.8min / 40ms- 코드 간결성은 Vue가 떨어지지만, 예제 내에서 div가 한 ..

[Goorm] Vue.js로 시작하는 SPA개발1. 강의 소개1.1. 오리엔테이션 및 강의 소개 ● 대상 수강생- HTML, CSS, JavaScript 이해가 있는 사람- SPA(Single Page Application)이 무엇인지 아는 사람 ● 본 강의에서 다룰 내용- Vue.js의 공식 문서 내용(https://kr.vuejs.org/v2/guide/index.html)- Vue.js와 SPA 개발에 대한 이해- Vue-cli은 다루지 않음(Script태그로 직접 불러서 실습)★ Vue-Cli(Command Line Interface) : 명령어를 입력하면 원하는 바를 실행시키는 도구로 Vue 프로젝트 생성 도구. Vue 애플리케이션을 개발할 때 기본적인 폴더 구조, 라이브러리 등을 설정 ● Ja..

● 강의 후기- 처음으로 제로초님의 강의를 접하게 되었는데, 목소리도 좋고 자세하게 설명해주시는것 같고 특히 예제를 직접하면서 하다보니 공부가 많이 된것 같다. - 프론트엔드 라이브러리 및 프레임워크는 처음써보게 되었는데, 재미를 많이 느끼게 된 시간이었다. - Vue를 기반으로 웹사이트를 하나 만들 생각이 팍팍 들었다 ㅎㅎ - Vuetify로 공부를 해서 개인 포트폴리오 사이트를 이번년도 안에 제작하는 것이 목표로 생기게 되었다 ㅎㅎ - 3번째 Vue관련 공부는 공식문서를 통해서 볼 예정인데, 언제 보게 될지는... 이번년도 안에 시작은 하자! - 웹팩과 node에 대해서도 많은 관심을 가지게 되었던 시간이었고 프론트엔드 라이브러리도 엄청나게 많기도 많다는걸 느끼게 되었다..ㅎㅎ - 다음 프론트엔드 관..

[인프런] 웹 게임을 만들며 배우는 Vue9. Vue Router9.1. Vue Router 설정하기- npm i vue-router 설치9.2. router-vue와 히스토리 라우터9.3. 동적 라우트 매칭9.4. 주소 쿼리스트링- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[main.js]1234import Vue from 'vue';import router from './Router'; new Vue(router).$mount('#root');cs [package.json]123456789101112131415..