본문 바로가기

전체 글

 (432)
[코딩애플] js part 2-7. getter, setter 대체 왜 쓰는지 알아보기 getter, setter 대체 왜 쓰는지 알아보기 object를 생성해보자. var 사람 = { name: 'Park', age: 30 } object에서 age 자료를 꺼내고 싶으면? 사람.age; 근데 요새는 자료를 바로 꺼내지 않고, **자료를 꺼내는 법을 함수로 만들어서 꺼낸다**(유행하는 잡기술임). 내년 age를 알고 싶은 함수를 추가해보자. var 사람 = { name: 'Park', age: 30, nextAge(){ // 지금 age에서 1을 더해서 출력하는 함수 return this.age + 1; // this == 사람 object } } 사람.age + 1; // 31 사람.nextAge(); // 31 age + 1하면 더 쉬운데 왜 nextAge를 만들까? 함수를 만들어 ob..
[코딩애플] js part 2-6. class를 복사하는 extends / super 객체지향5. class를 복사하는 extends / super 부모와 유사한 class를 하나 더 만들고 싶다면? ➡️ extends (class 상속) class 부모 { ... } class 하나 만들기 class 할아버지{ constructor(name){ this.성 = 'Kim'; this.이름 = name; } } var 할아버지1 = new 할아버지('만덕'); // 할아버지1 == 할아버지 {성: 'Kim', 이름: '만덕'} 이거랑 유사한 class를 만들고 싶다면(할아버지의 속성들 그대로 물려받아서) class 아버지 extends 할아버지 { constructor (){ this.나이 = 50; } } var 아버지1 = new 아버지(); // Uncaught ReferenceErr..
[코딩애플] js part 2-5. ES6 방식으로 안쉽게 구현하는 상속기능(Class) 객체지향 4. ES6 방식으로 안쉽게 구현하는 상속기능(Class) 클래스(Class) class 부모 { constructor(){ this.name = 'Kim'; } } ES6에서 constructor를 만드는 방법이다(신문법). var 자식 = new 부모(); console.log(자식); // 부모 {name: 'Kim'} 함수를 추가하기 constructor에 추가하던지 (보임) class 부모 { constructor(){ this.name = 'Kim'; this.sayHi = function(){ console.log('Hello'); } } } 밑에 쓰던가 (안보이는데 부모의 유전자(prototype)에 있음) 모든 자식들이 사용할 수 있도록 내장함수가 됨. 관리가 편함(기능 수정, ..
[코딩애플] js part 2-4. 상속기능을 구현하는 다른 방법 상속기능을 구현하는 다른 방법 이전에 배웠던 prototype function 기계(){} 는 옛날 문법이다. 사람들은 이제 prototype없이 ES5, ES6 방법으로 상속 기능을 사용한다. 객체지향 3. ES5 방식으로 쉽게 구현하는 상속기능 ES5: Object.create(물려받을 부모 object) constructor는 아니다. Object.create(프로토타입object); 부모가 가진 name, age를 그대로 물려받은 자식 object를 만들고 싶다면? constructor 함수를 만들거나 **Object.create()**를 사용한다. var 부모 = {name: 'Kim', age: 50}; var 자식 = Object.create(부모); console.log(자식); // {}..
[코딩애플] js part 2-3. Object 생성기계인 constructor를 만들어 써보자 객체지향1. Object 생성기계인 constructor를 만들어 써보자 constructor 문법의 용도 1. Object를 마구 복사하고 싶을 때 사용(별로 쓸데없음) 비슷한 object를 여러개 만들 때, 오브젝트 복사를 도와준다. var 학생1 = { name: 'Kim', age: 15 } var 학생2 = { name: 'Kim', age: 15 } var 학생3 = { name: 'Kim', age: 15 } ... 비슷한 학생 object를 여러개 만들려면, **contstructor라는 object 생성 기계**를 만들자. constructor는 function 키워드를 빌려서 만든다. 함수와 다르다는 걸 보여주기 위해 관습적으로 첫글자를 대문자로 쓴다. function Student()..
[코딩애플] js part 2-2. 이상한 Reference data type과 더 이상한 예제 3개 이상한 Reference data type과 더 이상한 예제 3개 Primitive data type 그냥 문자와 숫자 변수에 값이 그대로 저장됨 Reference data type var 변수 = 1234; var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨 Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다. [1,2,3]이 저쪽에 있어요(화살표) 를 저장함 종류 Array Object Reference data type 다루기 예시 1: 복사 Primitive data type var 이름1 = '김'; var 이름2 = 이름1; console.log(이름1); // 김 console.log(이름..
[코딩애플] js part 2-1. 자바스크립트 함수 업그레이드하기 (default parameter/arguments) ES6부터 함수가 많이 업그레이드 됐다. 알아보자! 1. 파라미터 2개가 들어가는 함수인데 1개만 써도 에러가 안남 엄격한 언어는 에러가 나는데, 자바스크립트는 장점이자 단점으로 에러가 안남 function 더하기(a, b) { console.log(a + b); } 더하기(1,2); // 3 더하기(1); // 1 (에러가 안남) 2. 함수의 default 파라미터 b 자리에 아무것도 안넣을 경우에 넣어주세요~ 하는 defaultValue 예제를 살펴보자. function 더하기(a, b = 10) { console.log(a + b); } 더하기(1); // 11 (b자리에 파라미터를 안넣었을 때만 발동) 더하기(1,2); // 3 수학 연산도 넣을 수 있다. function 더하기(a, b = 2 ..
memo, useMemo, useCallback, useRef memo : PureComponent와 비슷. props 값이 변경될 때만 실행됨 => 매번 실행/생성되지 않고, 캐시에 저장하고 이를 사용함 useRef : 일반 값을 기억함 useMemo : 복잡한 함수의 결과값을 기억함 useCalback : 함수를 기억함 하지만 너무 기억을 잘하기 때문에 까먹어야하는 경우가 있을 수 있음. 그럴 때 안에서 쓴 state를 [두번째 인자] 안에 작성해줌. (다시 새로 실행되도록 작성) 그렇게 안하면, 첫 번째로 실행된 값을 평생 기억하게 됨 (+) 반복문에서 주로 최적화 사용 (+) 전체가 리렌더링되어도 초록색까진 괜찮음. 근데 전체가 빨간색으로 뜨면 최적화 필요함
반응형

티스토리툴바