개발 일기

클래스는 왜 사용하는걸까? ✔️ 동일한 종류의 객체를 여러 개 생성할 때 생성자 함수를 통해 편리하게 객체를 만들었다. ✔️ class 를 이용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서 쓸 수 있다. ✔️ 그 기능이 뭔데? 기본문법 ✔️ new에 의해 constructor은 자동으로 실행된다. ✔️ constructor에서 객체를 초기화한다는게 이해가 잘 안됨. class User { constructor(name){ this.name = name; } sayHi(){ alert(this.name); } } let userJohn = new User('John'); 클래스 표현식 ✔️ 정의, 전달, 반환, 할당 //클래스 표현식 let User = class { sayHi(){..

프로토타입이란? ✔️ 다른 객체의 원형이 되는 객체 ? ✔️ 객체들이 기본적으로 가지고 있는 프로퍼티라고 생각하면 쉬운 것 같다. ✔️ 객체에서 프로퍼티를 읽으려고 하는데 없으면 이 프로토타입에서 프로퍼티를 찾게 된다. ✔️ 객체의 프로퍼티가 존재하면 프로토타입까지 탐색하지 않고 멈춘다. hasOwnProperty 는 프로토타입에서 프로토타입의 존재 유무를 알려주는 메소드이지만 개발자가 먼저 선언해버리면 그 코드가 우선적으로 발현된다. const user = { name:'Mike', hasOwnProperty:function(){ console.log('haha'); } }; user.hasOwnProperty(); //haha 프로토타입 상속이란? ✔️ __proto__를 통해 다른 객체의 프로퍼티를..

getter와 setter를 왜 쓰는걸까? ✔️ 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉜다. ✔️ 접근자 프로퍼티의 본질은 함수이기 때문에 데이터 프로퍼티와는 조작 방법이 다르다. ✔️ 접근자 프로퍼티는 getter와 setter를 이용해 조작해 접근할 수 있다. ➖ getter : 특정 값을 조회할 때 실행되는 함수 ➖ setter : 특정 값이 변경되어 질 때 실행되는 함수 let user = { name:'John', surname: 'Smith', //기본적으로 값을 조회할 때 사용한다. get fulName(){ return `${this.name} ${this.surname}`; }, //value에 새로운 값이 들어가 변경되면 아래의 함수가 실행된다. set fulName(valu..

프로퍼티 플래그 ✔️ 객체 프로퍼티는 값과 함께 플래그(flag)라 불리는 특별한 속성 세 가지를 갖는다. ➖ writable : true 이면 값을 수정할 수 있다. ➖ enumerable : true 이면 반복문을 사용해 나열할 수 있다. ➖ configurable : true 이면 프로퍼티 삭제나 플래그 수정이 가능하다. let user = { name : 'John' } let discriptor = Object.getOwnPropertyDescriptor(user, 'name'); console.log(JSON.stringfy(descriptor, null,2)); /* property descriptor: { "value": "John", "writable": true, "enumerable"..

생성자 함수 ✔️ 함수 이름의 첫 글자는 대문자 ✔️ 반드시 'new' 연산자를 붙여 실행 ✔️ 재사용할 수 있는 객체 생성 코드를 구현. ✔️ 객체 리터럴{...} 을 사용하면 쉽게 객체를 얻을 수 있지만 유사한 객체를 여러개 만들어야하는 상황에서 유용. ✔️ function User(name){ this.name = name; this.isAdmin = false; } let user = new User('young'); console.log(user.name); //young console.log(user.isAdmin); //false 생성자와 내 메서드 function User(name){ this.name = name; this.sayHi = function(){ alert(this.name)..

메서드 만들기 ✔️ 객체의 프로퍼티에 함수를 할당할 수 있는데 그것을 메서드라고 부름. ✔️ 이미 정의된 함수를 이용해서 만들수도 있다. //객체에 메서드 추가하기 let user = { name:"John", age:30 }; user.sayHi = function(){ alert('hi'); } user.sayHi(); //hi //이미 선언된 함수를 메서드로 등록하기 let user = { ... } function sayHi(){ alert('hi'); } user.sayHi = sayHi; user.sayHi(); //hi 메서드 단축 구문 //일반적인 객체 내 메서드 선언 user = { sayHi : function(){ alert('hi'); } } //단축구문을 이용해 메서드 선언 use..

객체란? ✔️ 객체는 프로퍼티로 구성되어있다. ✔️ 프로퍼티는 키와 값으로 구성되어있다. ✔️ 프로퍼티늬 값에서는 모든 자료형이 허용된다. 빈 객체(빈 서랍장)을 만드는 방법 //객체 생성자 문법 let user = new Object(); //객체 리터럴 문법 let user = {}; 리터럴과 프로퍼티 객체 리터럴 기본형 let user = { name : 'John', age : 12 } 객체 호출 console.log(user.name) //joy console.log(user.age) //27 객체 추가 user.isAdmin = true; console.log(user.isAdmin); //true 객체 삭제 delete user.age; console.log(user.age); //undef..

1 for in ✔️ 객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줌. ✔️ 객체의 key 값에 접근 가능. value 값에는 직접 접근 불가 ✔️ 모든 객체에서 사용 가능. //Array let arr = ['a', 'b', 'c']; for(let i in arr){ console.log(i, arr[i]); } //0 a, 1 b, 2 c //Object let object = {a:1, b:2, c:3}; for(let prop in obj){ console.log(prop, obj[prop]); } //a 1, b 2, c 3 //Rendering template literal let TemObject = {a:1, b:2, c:3}; for(let property in object){ ..

1 resize 이벤트란? 사용자가 브라우저 창이나 프레임을 변경했을 때 호출되는 이벤트 사용 방법 - window.onresize 속성 - window.addEventListener('reisize', ...) 주의할 점 오직 window 객체에서만 발생한다. window 객체에 등록된 핸들러만 이벤트를 수신한다. 그리고 resize 이벤트는 창의 크기를 미세하게 조절해도 여러번 실행되기 때문에 DOM 수정과 같은 복잡한 처리는 실행하지 않도록 해야한다. * requestAnimationFrame, setTimeout, customEvent 등을 이용해 이벤트를 스로틀(throttle)하는 것이 좋다. 2 resize 이벤트 활용 See the Pen Untitled by yanggjoy (@yangg..

1 스크롤 이벤트란? document view나 element가 스크롤 될 때 발생하는 이벤트. ◾ 스크롤 이벤트에서 주의할 점 스크롤 이벤트는 한번 실행될 때 매우 빠른 속도로 실행된다. 이것을 눈으로 확인해보기 위해 테스트를 해보았다. document.addEventListener('scroll', function(){ console.log('event call'); }) 스크롤 이벤트가 발생되면 콘솔에 event call이 찍히도록 해보았다. 스크롤을 한번만 했을 뿐인데 11번이나 실행되며 만약 이벤트리스너 안에 복잡한 DOM 조작을 넣는다면 컴퓨터는 당연히 느려질 수 밖에 없을 것이다. 그래서 스크롤 이벤트에서는 복잡한 작업을 실행하지 말아야 한다. 그렇다면 이것을 해결할 방법은 없을까? ◾ 스크..