Miracle Morning, LHWN

# 데이터의 흐름 (1) 상위(Root) → 하위 방향으로 데이터 넘기기 : props 를 사용하여 전달 (2) 하위 → 상위 방향으로 데이터 넘기기 : event 를 발생하거나, Vue 에서는 API 의 형식으로 전달 ​ # jQuery 사용해보기 → mounted 단계 이후에만 사용 가능하다. (DOM 에 접근이 가능해야 하기 때문) ... ... $('.h1-btn').on({ click: function() { alert('jQuery Click Event!') }, focusin: function() { console.log('jQuery focusin Event!'); }, mouseenter: function() { console.log('jQuery mouseenter Event!'); }..

다른 User가 git에서 레파지토리를 복제하는 경우 'clone' git clone https://github.com/[Username]/xxx.git 이 User가 수정을 한 후 commit > push 까지 한 상태에서, 내가 변경 후 업로드하면 충돌이 난다! (에러!) 따라서, git에 올라가 있는 파일에 변경 사항이 있다면 그걸 다시 내려받아야된다. (.git이 들어있는 위치에서 pull 받아야함) git pull origin master # clone과 pull은 둘 다 원격저장소에서 → 로컬저장소로 가져오는 것이지만, git clone 은 로컬에 아무것도 없는 상태에서 원격저장소의 데이터를 가져오는 것을 의미하며 git pull 은 로컬에 이미 있는 상태에서 원격저장소의 수정상태를 반영하기 ..

JavaScript 네이밍 규칙 # 변수, 함수명은 camelCase를 사용한다. - 첫 글자는 소문자, 문자 단위로 첫 글자는 대문자를 사용한다. - 중간에 언더바(_) 사용을 금지한다. var pageName; # 상수는 영문 대문자 스네이크 표기법을 사용한다. var SYMBOLIC_NAME; # 생성자 함수는 대문자 camelCase 를 사용한다. - 생성자 함수는 동사로 시작하지 않고 첫 문자를 대문자로 시작한다. function Func() { } # 지역변수 혹은 private 변수는 언더바(_)로 시작한다. var _private; # 예약어를 사용하지 않는다. var if; // (X) var for; // (X) var this; // (X) # 전역변수를 사용하지 않는다. 모든 컴파일..

# Vue..js Project 초기 설정 과정 ​ 1. Project Folder를 생성한다. 2. Project Folder/index.html 파일을 생성한 후, vue.js 라이브러리를 CDN 형식으르 Loading 해주어야 하는데 안정적으로 구현하기 위해 아예 라이브러리로 저장해서 Loading 하자 3. Project Folder/vue/lib 경로에 vue.js 파일을 생성하여 위 js 파일을 저장해놓고, index.html 에서 Loading 해주면 된다. 이 라이브러리가 정상적으로 로딩되었다면 아래에서 소개하는 Vue.js devtools Plugin이 실행될 것이다. ​ # Vue.js 개발자 도구 (Chrome Plugin) "Vue.js devtools" Vue.js로 만든 웹 앱의..

# var 변수는 전역변수로 사용할 때에만 사용하고, 최대한 자제하는 것을 권장한다. ​ # 객체 생성 방식 (1) 리터럴 방식 var obj = new Object(); obj.name = 'lhwn'; (2) 생성자 방식 var obj = { name: 'lhwn' }; # Emmet 문법 항목 기호 Emmet HTML 자식(하위)요소 > div>ul>li 형제요소 + div>p+span 올라가기 (반복 횟수만큼 올라감) ^ div>ul>li>^p+a 반복하기 * div>ul>li*3 그룹화 () div>(header>ul>li*2)+footer 그룹화를 하지 않고 div>header>ul>li*2+footer 클래스 .class div.container =========================..

뷰와 제이쿼리를 같이 사용해도 될까? # 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) : 뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성 # 데이터가 변경되었을 때..