es6 export default와 export의 차이 [export default]: 파일 전체를 export[export 변수]: 해당 변수만 export import 방법에도 차이가 있다. [export default]--> import Test1 from '../../...'--> import Test2 from '../../...' --> import Test3 from '../../...': 이름을 마음대로 정할 수 있다. [export 변수]--> import { 변수명 } from '../../...': 해당 변수명 그대로 가져와야 한다.: 중괄호로 감싸서 자바스크립트 함수형 프로그래밍 (자바스크립트에서만 해당하는 내용은 아니다)함수형 프로그래밍에 대해 쉽게 이야기하면 - 동사(메서드) 기준 - 객체지향 프로그래밍--> 객체 중심--> '주어진 데이터를 어떻게 풀어나갈 것인가'people.moveRight(); people.moveLeft(); man.jump(); 함수형 프로그래밍 --> 동사 중심--> '어떤 일을 처리할 건지 미리 선언해 놓고 데이터를 넣자'moveRight(people); moveLeft(people); jump(man); vue.js 기초 - computed로 v-if를 더 가독성있게--> 최종 실행방법은 일반 함수와 동일하지만, 아래와 같은 차이가 존재- 종속 대상이 변경될 때만 실행- 캐싱- watch: 감시자(값의 변동을 감지 - 해당 변수명과 동일한 함수로 선언)------------------------------------------ computed vs watch--> watch를 남용하지 말자--> computed: 출력용--> watch: 출력용 + 다른 함수 실행 - 데이터는 최상위 컴포넌트인 Vue 객체에서 관리하는게 좋다--> 하위에서는 props로 관리--> props도 해당 컴포넌트의 property로 바로 저장된다. 순수 js(MVC) ----> Vue.js(MVVM)- 순수 js에서는 C에서 한번더 DOM을 그.. 자바스크립트 MVC 패턴 인프런 김정환님의 vue.js 강의 초반부분에서ES6 문법을 사용해 순수 자바스크립트로 MVC를 구현하는데,, 그 후기 - 기본적으로 View의 최상위 모듈을 만듦- 기본 함수 틀1. 모듈 생성2. 이벤트 발생3. 발생된 이벤트 핸들러4. show5. hide - 함수 체이닝이 가능하도록 모든 함수는 this(모듈)을 리턴해줌- 실제 해당 View가 다룰 엘리먼트는 el 프로퍼티에 저장 - View는 화면에 관련된 작업만 하도록, (이게 생각보다 잘 안될 수 가 있다. 특히 Model(데이터 부분)에서 해야 할 일을 무의식적으로 View에서 처리하기가 쉬우니 주의)- 커스텀 이벤트만 발생시켜 Controller에 전달 - 위에서 View들이 발생시키는 커스텀 이벤트는 Controller에서 관리 위와 같.. 자바스크립트 call, apply의 의미 Function.prototype.call, Function.prototype.apply 함수는 본질적으로해당 함수를 호출하는게 본질적인 의미이다. 함수를 호출할 때, 스코프에 따라 this를 바인딩하기 헷갈릴때가 있는데,명시적으로 이를 정해줄 수 있다는 것도 주요한 의미를 갖는다. 근데 아래를 보면,let a = { ori_name: 'ori_value' }; function func() { this.func_name = 'func_value'; console.log('func call!!!'); console.log('this is :: ', this); } func.call(a); func.call(a);로 함수가 호출 된 후a를 확인해 보면console.log(a); a 역시 바뀐 걸 확인할 수 .. 자바스크립트 상속 메서드 let inherit = (function() { function F() {} return function(Parent, Child) { F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.super = Parent.prototype; }; })();1. prototype을 이용하는 기본 원리는 같지만, 중개자 F를 둬서 부모와 자식을 분리2. 클로저, 즉시실행함수를 사용해 중개자 F를 1번만 생성3. super라는 매개변수를 임의로 만들어 부모타입 명시 여기서, 1. 를 자세히 보면 중개자 F를 두지 않았을 때function Parent(name) { this.name = .. 자바스크립트 프로퍼티 접근 방법의 차이 공부도중 문득 궁금한게 생겼다 Object.gogo = '1'; Object[gogo] = '1';단순히 선택의 문제인줄 알았는데, 두 방식의 차이점이 존재한다. - . 방식: 컴파일시 접근- [] 방식: 런타임시 접근(참고: 컴파일 -> 런타임) 이라고는 하지만 실제로 제일 와닿는 부분은변수로 접근하냐, 적힌 문자열 그대로 접근하냐의 차이다. 아래를 보면 이해가 잘 간다.let person = { }; function setProperty(name, value) { /** []: 변수로 접근 가능 */ person[name] = value; /** .: 바로 접근 (매개변수로 name이 아니라 문자열 그대로 'name' 프로퍼티에 바로 접근) */ person.name = value; } setProp.. 자바스크립트 for문 in vs of 자바스크립트에서 for문 중 두가지 방법이 있다.for (let i in arr) { ... }for (let i of arr) { ... } 바로 in과 of를 사용하는 것인데(일반적인 let i; i (JAVA 향상된 for문) let arr = [1, 5, 8]; for (let i in arr) { console.log(i); } 일반 객체의 프로퍼티도 반복 가능let arr = { name_1: 1, name_2: 3, name_3: 5, }; for (let i in arr) { console.log(i); } l.. 이전 1 2 3 4 5 6 ··· 25 다음
