본문 바로가기

Front-End: Web/JavaScript

 (97)
[코딩애플] js part 3-2. import / export를 이용한 파일간 모듈식 개발 import / export를 이용한 파일간 모듈식 개발 기본적인 방법(전통적인 방법) .js(library.js) 파일을 만들어서 자바스크립트를 보관한다. 이렇게 **모듈화**해서 개발할 수 있다. ES6: import/export **import 가져올거 from '경로'** 로 파일을 다른 파일을 가져올 수 있다. 근데 library.js에 있던 모든 내용을 가져오지 않는다. 필요한 정보만 가져올 수 있다. **export default 내보낼거** // library.js var a = 10; export default a; a를 가져왔는지 확인해보자. 특징 export default를 쓰면 import할 때 이름을 바꿔도 됨 export default는 파일당 1회 사용 var a = 10; v..
[코딩애플] js part 3-1. 틀린그림 찾기능력이 향상되는 Destructuring 문법 틀린그림 찾기능력이 향상되는 Destructuring 문법 ES6부터 추가된 문법 =패턴 매칭 array, object를 해체해서 쓸 수 있다. array 데이터를 전부 변수에 담으려면? array 하나를 만들자. var arr = [2,3,4]; arr에 담긴 자료들이 아주 중요해서 전부 꺼내서 변수에 담고 싶다. var a = arr[0]; var b = arr[1]; 이걸 좀 더 쉽게 할 수 있는 문법이다. var [a,b,c] = [2,3,4]; a; // 2 b; // 3 c; // 4 이렇게 1) **모양만 맞춰 변수를 선언하면 변수가 생긴다**. 2) **직관적으로 변수를 만들 수 있다**. array destructuring 할 때 몇개를 빼먹는다면 등호로 기본값(defaultValue) ..
[코딩애플] js part 2-8. class, extends, getter, setter 연습문제 class, extends, getter, setter 연습문제 1. 직접 class 구조 만들어보기 갑자기 강아지 SNS를 만들고 싶어서 자바스크립트로 열심히 코딩하던 중, 여러 강아지 정보들을 담은 유사한 오브젝트 자료형을 테스트삼아 몇개 만들려고 합니다. var 강아지1 = { type : '말티즈', color : 'white' }; var 강아지2 = { type : '진돗개', color : 'brown' }; 이렇게 쭉 많이 만들고 싶은데 하드코딩하기 싫어서 class를 만들어 강아지 오브젝트들을 뽑고 싶습니다. 그럼 class를 어떻게 만드는게 좋을까요? ➡️ class Dog { constructor(type, color) { this.type = type; this.color = col..
[코딩애플] 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()..
반응형

티스토리툴바