Front-end 16

[Vue.js] ECMAScript 2015(ES6) 모듈 사용 및 Vue 번들링

모듈(Module) 변수, 함수, 클래스, 인스턴스의 집합을 독립된 파일(~.js, ~.vue)로 만든 것 모듈로 만들어 필요한 기능만 여러 프로그램에서 재사용 모듈 내부에서 export 된 것만 외부 프로그래에서 사용 가능 ↳ export : 개수와 상관없이 내보내기 가능 export const 변수명 = …; export function 함수명 = { … }; export class 클래스명 { … }; ↳ export default : 기본 한 개만 내보내기 가능 export default 변수명; export default 함수명; export default 클래스명; export default { … }; 사용 예시 test.js export function fun1() { … } export ..

Front-end/Vue.js 2021.11.01

[자바스크립트] ECMAScript/ES

ECMAScript/ES Ecma International(정보와 통신 시스템을 위한 국제적 표준화 기구)에서 만든 언어 ECMA-262 표준을 따르고 있음 ECMA-262는 규격, ECMASciript는 ECMA-262에 의해 표준화된 JavaScript의 새로운 이름 ECMAScript는 표준 또는 언어 규격이 아닌 프로그래밍 언어이다. 버전 ES5(ECMAScript 5), ES6(ECMAScript 2015), ES2020 등 5 버전까지는 ECMAScript 5 라는 명칭을 사용했지만, 6 버전부터 빠른 배포 주기를 반영하기 위해 숫자 대신 연도를 붙여 ECMAScript 2015(ES6)과 같은 명칭 사용 ES6(ECMAScript 2015) 해당 버전에서 중요한 기능들이 많이 추가되어 자주 ..

[Vue.js] 컴포넌트란?, 뷰와 컴포넌트

컴포넌트(Component) 재사용 혹은 조립 가능한 독립적인 UI 객체 HTML 조각() + JavaScrip() + CSS( 뷰(View)와 컴포넌트(Component) 공통점 .vue(싱글 파일 컴포넌트) 파일 확장명 사용 둘다 컴포넌트이므로 파일 작성 방법 동일 뷰(View) 하나의 화면(페이지) 재사용이 어려운 컴포넌트 views 폴더에 작성 컴포넌트(Component) 여러 화면(페이지) 안에 배치될 수 있는 재사용 가능한 컴포넌트 components 폴더에 작성 [Vue.js] Component: 싱글 파일 컴포넌트 [Vue.js] 컴포넌트란?, 뷰와 컴포넌트 컴포넌트(Component) 재사용 혹은 조립 가능한 독립적인 UI 객체 HTML 조각( ) + JavaScrip( 뷰(View)와 ..

Front-end/Vue.js 2021.11.01

[Vue.js] MPA vs SPA

MPA vs SPA MPA(Multi Page Application) 요청에 따라 새로은 HTML으로 DOM 생성(멀티 페이지) 기존 웹 페이지 형태 서버의 상황에 따라 요청에서부터 응답까지 지연될 수 있음 접속하는 브라우저가 많을 경우 대규모 서버사이드 인프라 스트럭처 필요 SPA(Single Page Application) 최초 HTML을 받고 DOM 생성(싱글 페이지) 이후 UI 변경은 AJAX로 DOM의 일부만 추가/수정/삭제 프레임워크를 이용한 일괄된 코드 작성 필요 Ex) Angular, React, Vue 자바스크립트 코드량 증가 및 초기 로딩 속도가 느림 더보기 DOM(Document Object Model, 문서 객체 모델)이란? XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스..

Front-end/Vue.js 2021.10.31

[Vue.js] Vue.js란?

Vue.js란 SPA의 웹 페이지 화면 개발을 위한 프론트엔드 프레임워크 특징 SPA 웹 페이지 화면 개발 MVVM(Model-View-ViewModel) 패턴 사용 컴포넌트 기반의 높은 재사용성 양반향 데이터 바인딩 지원 *가상 DOM 기반 렌더링 사용으로 부분 UI 갱신 속도가 빠름 *가상(Virtual) DOM 기반 렌더링 : 변화가 많은 화면은 가상 DOM(메모리에 추가로 생성되는 DOM)에서 처리하고, 실제 DOM과 비교해서 변경된 부분만 리렌더링 하는 방식, 지속적으로 데이터가 변화하는 대규모 어플리케이션에 유리 SPA란 > [Vue.js] MPA vs SPA MPA vs SPA MPA(Multi Page Application) 요청에 따라 새로은 HTML으로 DOM 생성(멀티 페이지) 기존 ..

Front-end/Vue.js 2021.10.31
728x90
반응형