럿고의 개발 노트

[Goorm] Vue.js로 시작하는 SPA개발 Chapter1. 강의 소개 본문

Vue.js Note/[Goorm] Vue.js로 시작하는 SPA 개발(동영상강의)

[Goorm] Vue.js로 시작하는 SPA개발 Chapter1. 강의 소개

KimSeYun 2019. 11. 28. 14:47

[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 애플리케이션을 개발할 때 기본적인 폴더 구조, 라이브러리 등을 설정



● JavaScirpt FrameWork? SAP?


- SPA(Single Page Application) : 기본 웹 개발과는 다른 방식

(https://msdn.microsoft.com/en-us/magazine/dn463786.aspx)

2019/11/12 - [Web Note] - [WEB] SPA란?

- 장점

■ 앱 같은 웹 사용자 경험을 제공(Flickering)

유지보수 편의성(Front-End, Back-End가 본격적으로 나뉘어짐)

■ 점진적 개발 가능(컴포넌트 단위로 개발)


★ Flicker : 화면 깜박임, 화면 밝기가 일정하지 않고 변화하여 떨리는 현상

 Component : 구성요소로 화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것



● 왜 Vue.js일까?


- 초반 진입장벽이 상대적으로 낮음(HTML, CSS, JavaScript에 대한 이해만 있으면 바로 적용 가능

■ React -> JSX / Angular -> TypeScript

- Bulid 작업이 필수가 아님

■ Bable, TypeScirpt


★ JSX(JavaScirpt XML) : JavaScript문법 확장판으로 React에서의 요소 제공

★ TypeScript : JavaScript 문법 확장판으로 JavaScript 모든 구문과 의미를 지원하는 동시에 정적 유형 지정 및 ECMAScript의 상위 집합인 더 풍부한 구문과 몇 가지 추가 기능 제공

★ Bulid 작업 : JSX, TypeScript를 JavaScript로 변환해주는 것(Vue에서의 Bulid작업을 말함)

★ Babel : JSX로더로 JavaScript문법을 현재 사용가능한 문법으로 변환 시켜주는 것 / 최신 JavaScript를 표준 JavaScript로 변환시켜주는 JavaScript 컴파일러






출처

https://edu.goorm.io/learn/lecture/13020/vue-js%EB%A1%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EB%8A%94-spa-%EA%B0%9C%EB%B0%9C

Comments