🧐 TIL/🤖 JS, TS

Super - 부모 클래스 - super 키워드는 constructor 안에서랑 함수에서만 사용할 수 있다. class Person { name; year; constructor(name, year) { this.name = name; this.year = year; } sayHello() { return `Hello I'm ${this.name}`; } } class Singer extends Person { sing() { return `노래합니다.`; } constructor(name, year, part) { // 부모 클래스 // Person() 이거랑 똑같음 super(name, year); this.part = part; } sayHello() { // undefined입니다. rap 파트입..

상속, Inheritance - 상속은 객체들 간의 관계를 구축하는 방법이다. - 수퍼 클래스(또는 부모 클래스)등의 기존의 클래스로부터 속성과 동작을 상속받을 수 있다. - 공통되는 데이터를 정리할 수 있는 방법이다. class Person { name; year; constructor(name, year) { this.name = name; this.year = year; } } class Singer extends Person { sing() { return `노래합니다.`; } } class Actor extends Person { acting() { return `연기합니다.`; } } const zico = new Singer("zico", 1993); console.log(zico); // ..

Static - 객체에 귀속되지 않는다. - 클래스에 직접 귀속돼서 new로 쓸 필요 없다. class Person { name; year; static groupName = '쑤'; constructor(name, year) { this.name = name; this.year = year; } // 함수도 가능 static returnGroupName() { return '쑤'; } } const soo = new Person('soo', 1997); // 객체에 귀속되지 않는다. console.log(soo);// Person { name: 'soo', year: 1997 } // 그럼 어디에 귀속돼있나? // 클래스 자체에 귀속되어있다! console.log(Person.groupName)// 쑤..

Getter 1. 데이터를 가공해서 새로운 데이터를 반환할때 2. private한 값을 반환할때 Setter 1. 값을 설정해줄때 물론 Setter 없어도 바꿀 수는 있지만 프로퍼티를 private으로 바꿨을때는 Setter없이 바꿀 수 없다. private은 직접 액세스가 불가 2. Setter는 정의한 값을 변경하는 것이기 때문에 많이 선호하지는 않음 class Person { name; year; constructor(name, year) { this.name = name; this.year = year; } // Getter, Setter get getNameAndYear() { return `${this.name}-${this.year}`; } // 바꾸고 싶은 프로퍼티의 이름과 겹치게 많이 설..

클래스? - 객체지향 프로그래밍에서 특정 객체(인스턴스)를 생성하기 위한 변수와 메소드(함수)를 정의하는 일종의 틀이다. - 정보를 일반화해서 정리하는 방법이다! class person { // 어떤 프로퍼티가 존재하는지 미리 정의하는 것은 아주 좋은 습관! name; year; // 생성자 constructor(name, year) { this.name = name; this.year = year; } // 클래스 내 메소드 정의 // 암묵적으로 함수라는걸 인지함 sayName() { return `안녕하세요 저는 ${this.name}입니다.` } }

const soo1 = { name: 'sooyoung', age: 27 } const soo2 = { name: '수영', ...soo1, } const soo3 = { ...soo1, name: '수영', } console.log(soo2);// { name: 'sooyoung', age: 27 } console.log(soo3);// { name: '수영', age: 27 } - soo2는 name: '수영'을 먼저 선언 했으나 전개 연산자를 그 다음에 펼쳐줬으므로 '수영'으로 name 값이 바뀌지 않는다. - 의도대로 바꿔주려면 전개 연산자를 먼저 펼치고 나서 바꿔주는 순서로 진행해야 한다.

Copy of Value - 값에 의한 전달 Copy of Reference - 참조에 의한 전달 - 기본적으로 모든 primitive 값은 값에 의한 전달이다.(function, object, array 빼고 나머지) - 객체는 참조에 의한 전달이다 const soo1 = { name: 'sooyoung', age: 27 } const soo2 = soo1; const soo3 = { name: 'sooyoung', age: 27 } const soo4 = { ...soo3, } console.log(soo1 === soo2);// true console.log(soo1 === soo3);// false console.log(soo2 === soo3);// false console.log(soo3 ==..

본격적인 node.js 주차가 시작됐다. 자바스크립트 꽤 익숙해진 줄 알았는데 아직 써보지 못했던 구조 분해 할당이 헷갈려 기록해봐야겠다. 🧨 구조 분해 할당 - 배열이나 객체의 속성을 해체하여 그 안의 값을 개별 변수로 담을 수 있게 하는 표현식 - 구조화된 배열과 같은 이터러블 또는 객체를 구조파괴(destructuring) 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. - 배열의 각 요소를 배열로부터 추출, 1개 이상의 변수에 할당한다.(배열의 길이에 맞춰서 변수 할당 하지 않아도 OK) - 배열 구조 분해 할당의 대상(할당문의 우변)은 이터러블이어야 한다. 🙋‍♀️ 이터러블? Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토 타입 체인 통해 상속 받은..

메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 1. this? - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable) - this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. - 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. - 클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리키는데 , 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 ..

부트스트랩으로 모달창 띄어보자! 1. 부트스트랩 CDN으로 불러오기 🙋‍♀️ cdn이란? - Content Delivery Network - 물리적으로 떨어져 있는 사용자에게 컨텐츠를 더 빠르게 제공하기 위해 고안된 기술이다. - 만약 우리나라에 있는 사람이 미국에 있는 서버로부터 이미지나 파일 등을 다운받으려고 한다면 시간이 오래 걸릴 것, " 따라서 서버를 분산시켜 캐싱해두고 사용자의 컨텐츠 요청이 들어오면 사용자와 가장 가까운 위치에 존재하는 서버로 매핑시켜 요청된 콘텐츠의 캐싱된 내용을 내어주는 방식으로 빠르게 데이터를 전송할 수 있게 된다. " - 만약 서버가 파일을 찾는데 실패하는 경우 CDN 플랫폼의 다른 서버에서 컨텐츠를 찾은다음 응답을 전송한다. 참고자료: https://velog.io/..