Miracle Morning, LHWN

# 한 개의 화면이더라도 여러 컴포넌트로 쪼개는 이유 : 컴포넌트 기반 프레임워크 (앵귤러, 리액트)에서 추구하는 재사용성 때문이다. 이렇게 쪼개 놓아야 다른 페이지에서 해당 코드를 재사용하기가 수월하며, 이때 각 컴포넌트 간에 데이터를 자유롭게 전달할 수 있는 반응성이 좋아야한다. ​ # 반응형 웹 디자인 태그 추가 width=device-width : 기기의 너비만큼 웹 페이지의 너비를 지정 initial-scale=1.0 : 페이지의 배율 ​ # 파비콘 설정 파비콘 : 웹 사이트 제목의 왼쪽에 표시되는 로고 → 기본으로 제공해주는 src/assets/logo.png 를 favicon generator 검색하면 나오는 사이트에서 ico 로 변환 ​ # 보통 컴포넌트는 관례상 src/components..

# HTML 파일에서 뷰 코드를 작성하는 경우 다양한 한계점이 존재한다. 가령, (1) 화면의 모양을 미리 예측하기 힘듦 (2) ※ # 싱글 파일 컴포넌트를 이해하려면 .vue 파일을 웹 브라우저가 인식할 수 있는 파일로 변환해주는 웹팩(Webpack) 이나 브라우저리파이 (Browserify) 와 같은 도구가 필요하다. ​ ※ 웹팩(Webpack) : 웹 앱의 자원 (HTML, CSS, 이미지 등)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러 (module bundler) 이다. ​ ※ 모듈 번들러 (module bundler) : 서로 의존 관계가 있는 모듈을 하나의 파일로 묶어 주는 도구 ​ ※ 브라우저리파이 (Browserify) : 웹팩과 유사한 ..

# 뷰 템플릿 : HTML, CSS 등의 마크업 속성 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML 로 변환해주는 속성이다. ​ # 템플릿 속성을 사용하는 방법 (1) 뷰 인스턴스의 template 속성을 활용하는 방법 (ES5) (2) 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 (ES6) ​ (1) 뷰 인스턴스의 template 속성을 활용하는 방법 (ES5) ※ 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. (변환 과정에서 뷰의 반응성 (Reactivity) 이 화면에 더..

# 웹 어플리케이션의 HTTP (HyperText Tronsfer Protocol) 통신 방법 → 근래에는 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해야 한다. ​ # HTTP : 브라우저 서버 간에 데이터를 주고 받는 통신 프로토콜이다. → 브라우저에서 데이터를 보내달라고 요청 (request) 을 보내면, 서버에서는 응답 (response) 으로 해당 데이터를 보내주는 방식으로 동작한다. → 가장 대표적인 예 : jQuery, ajax ​ # ajax : 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다. # axios : 뷰에서 ajax 를 지원하기 위한 라이브러리 뷰 리소스 (resource): 서버로부터 데..

네스티드 라우터와 네임드 뷰의 차이 # 네스티드 라우터는 왼쪽 그림처럼 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식 # 네임드 뷰는 오른쪽 그림처럼 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시 네스티드 라우터 (Nested Router) # 네스티드 라우터 : 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. # 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때에는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있다. → 네임드 뷰로 해결! 네임드 뷰 (Named View) # 네임드 뷰 : 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식

라우팅 # 라우팅 : 웹 페이지 간의 이동 방법을 말한다. SPA (Single Page Application)에서 주로 사용하고 있다. → 화면 간의 전환이 매끄럽다. → 어플리케이션 사용자 경험을 향상시킬 수 있다. → Vue 뿐만 아니라 React, Angular 에서도 모두 라우팅을 이용하여 화면을 전환하고 있다. ​ ※ SPA (Single Page Application) : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라, 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 태그 설명 페이지 이동 태그이다. 화면에..

컴포넌트 간 통신과 유효범위 뷰는 여러 컴포넌트로 화면을 구성하는데, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 따라서 뷰 프레임워크 자체에서 정의한 데이터 전달 방법인 '상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법'을 따라야 한다. 지역 혹은 전역 컴포넌트를 등록하면, 등록된 컴포넌트는 하위 컴포넌트가 되고 하위 컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 된다. 상위 → 하위 : props 라는 속성을 전달 하위 → 상위 : 이벤트만 전달 가능 상위에서 하위 컴포넌트로 데이터 전달하기 // 상위 컴포넌트 ... // 하위 컴포넌트 // Vue.component() 이용하여 하위 컴포넌트인 child-cmoponent 를 등록 Vue...

Vue 인스턴스 # Vue 인스턴스 : Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 new Vue({ ... }) 이 인스턴스를 활용해보자 // 인스턴스 new Vue({ el: '#app', // el 속성 data: { // data 속성 message: 'Hello Vue.js' } }) 일단 화면을 개발하기 위해 new Vue를 이용하여 인스턴스를 생성하였다. 그리고 el 속성으로 Vue 인스턴스가 그려질 지점을 지정하고, data 속성에는 message 값을 정의하여 화면에 출력​​해줄 것이다. ​ # Vue 인스턴스 생성자 new Vue() 로 인스턴스를 생성할 때 Vue를 생성자라고 한다. (이때 Vue 생성자는 Vue 라이브러리를 로딩해야 접근할 수 있다.) 생성자를 ..

# Vue.js는 웹 페이지 화면을 개발하기 위한 프런트엔트 Framework이다. 즉, 화면단의 라이브러리 이자 프레임워크이다. ​ ※ 프레임워크 : 개발자들의 생산성을 높이기 위해 일정한 규칙에 따라 개발하도록 미리 구조를 정의해놓은 도구 > 틀! ※ 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 > 재활용템! ※ DOM : HTML 문서에 들어가는 요소의 정보를 담고있는 데이터 트리 ​ ※ 타입스크립트 (TypeScript) : 기존 자바스크립트에 엄격한 타입 체크를 도입한 언어. 앵귤러2의 표준 ※ ES6 : 자바스크립트의 최신 스펙 (=ECMAScript 2015) ※ 웹팩 (Webpack) : 웹 모듈 번들러 (Web Module Bundler). 최신 프런..