Miracle Morning, LHWN

뷰와 제이쿼리를 같이 사용해도 될까? # jQuery : 자바스크립트 라이브러리 → 선호하는 이유 : 순수 자바 스크립트에 비해 화면 DOM 요소 조작과 ajax 같은 데이터 요청을 쉽게 할 수 있기 때문이다. Vue에서 jQuery는 필요없다. jQuery 처럼 Vue 에서도 화면의 요소에 쉽게 접근할 수 있는 ref 속성을 제공한다. 또, 화면의 요소 이벤트도 v-on Directive 로 처리할 수 있다. jQuery Vue.js // HTML 시작 ​ // Script $('#btn').click(function() { $('#pEl').text('jQuery'); }) // HTML 시작 ​ // Script methods: { clickBtn: function () { this.$refs.pE..

# npm (node package manager) : 전 세계 자바스크립트 라이브러리가 존재하는 공개 저장소이다. NPM 설치 명령어 # npm install : npm 설정 파일 (package.json) 에 설정된 라이브러리 목록을 다운로드 할 수 있다. ​ # --save 옵션과 --save-dev 옵션 : → 두 옵션의 공통기능 : 웹팩 추가 설정을 위해 플러그인 라이브러리나 애플리케이션 로직과 관련된 외부 라이브러리를 추가해준다. → 두 옵션의 차이 : npm 설정 파일의 라이브러리 목록에 설치된 라이브러리 이름이 추가되는 곳만 다르다 ​ (1) dependencies : 애플리케이션을 동작하는 데에 필요한 라이브러리 (2) devdependencies : 애플리케이션을 개발할 때 필요한 라이..

# ES6 (ECMAScript 2015) 는 개발자가 더 쉽게 코드를 작성할 수 있도록 문법을 단순화하고, 미숙한 코딩으로 인한 오류를 미연에 방지하기 위해 언어 자체에서 유효 범위를 제한하는 등의 기능이 추가되었다. ES5 ES6 var num = 100; var sumNumbers = function (a, b) { return a + b; }; ​ sumNumbers (10, 20); const num = 100; let sumNumbers = (a, b) => { return a + b; }; ​ sumNumbers (10, 20); const 와 let 예약어 # 변수 : ES5 에서는 var / ES6 에서는 let # 상수 : ES6 에서 const → 선언한 후 값이 바뀌지 않고 동일하게..

# 웹팩 (Webpack) : 모듈 번들러. 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해주는 변환 도구이다. ​ → 취지 : 애플리케이션 동작과 관련된 여러 개의 파일 (HTML, CSS, 자바스크립트, 이미지 등)들을 1개의 자바스크립트 파일 안에 다 넣어버리고, 해당 자바스크립트 파일 하나만 로딩해도 웹 앱이 돌아가게 하자! ​ → HTTP 요청의 수를 줄여 웹 화면 로딩 시간을 줄이기 위함이다! ​ # 웹팩의 주요 속성 속성 설명 entry 웹팩으로 빌드(변환)할 대상 파일을 지정하는 속성. entry 로 지정한 파일의 내용에는 전체 애플리케이션 로직과 필요 라이브러리를 로딩하는 로직이 들어간다. output 웹팩으로 빌드한 결과물의 위치와 파일 이름 등 세부 옵션을 설정하는 ..

Vuex : 상태 관리 라이브러리 # 뷰엑스 (Vuex) : 애플리케이션의 상태 관리 (state management) 를 돕는 라이브러리이다. (※ 상태 : 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터를 '상태'라고 한다.) 상·하위 컴포넌트 간에 props를 전달하는 과정에서, 이벤트 버스를 활용할 경우 셀 수 없이 많은 데이터 흐름이 발생하게 된다. 이때 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리하여 크기가 큰 애플리케이션의 데이터 관리를 효율적으로 하는 것이 상태 관리의 목적이다. (보통 규모가 크고 복잡한 애플리케이션에 필요하다.) 뷰의 반응성 (Vue Reactivity) : 뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성 # 데이터가 변경되었을 때..

# 한 개의 화면이더라도 여러 컴포넌트로 쪼개는 이유 : 컴포넌트 기반 프레임워크 (앵귤러, 리액트)에서 추구하는 재사용성 때문이다. 이렇게 쪼개 놓아야 다른 페이지에서 해당 코드를 재사용하기가 수월하며, 이때 각 컴포넌트 간에 데이터를 자유롭게 전달할 수 있는 반응성이 좋아야한다. ​ # 반응형 웹 디자인 태그 추가 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) # 네임드 뷰 : 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식