[엘리스 SW 엔지니어 트랙 2기 / TIL] Week 03 - 컴포넌트, 변수, 클래스

1. 오늘 공부한 내용  📝

• 컴포넌트 개념
• 변수(var, let, const), 클래스
• export, default export, import
• Arrow function
  • 기존의 함수를 간단하게 사용할 수 있음
  • 대신 몇가지 제한점이 존재
    • this값이 바인딩 되지 않음
    • 생성자를 사용할 수 없음
• 객체
  • 객체는 데이터와 함수의 집합
  • 값을 가진 것을 프로퍼티(property)
  • 함수를 가진 것을 메소드(method)

const person = {
	name : "John",
	age : 30
}

person.name = "Bob"; // 변경 가능

person == {
	name : "Bob",
	age : 30
} // 변경 불가

• Object.freeze()? - 모든 걸 상수로 감싸고 싶을 때, 잘 쓰진 않음. 이런 것도 있구나.

// object가 복사되는 것이 아니라 object의 주소가 복사됨
const newPerson = person;
console.log(newPerson.name);

newPerson.name = "newPerson";
console.log(newPerson.name);
console.log(person.name);

console.log(JSON.stringify(person));

const deepCopyPerson = JSON.parse(JSON.stringify(person));
deepCopyPerson.name = "deepCopyPerson";
console.log(deepCopyPerson.name);
console.log(person.name);

• rest / spread
  • 반복 가능한 객체를 여러개 요소로 펼치거나(spread) 모아주는(rest) 방법
  • 배열 혹은 객체 리터럴에서 사용가능 (객체는 ES2018부터)

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];   // spread 사용
console.log(newArr);

let [first, ...rest] = newArr; // rest 사용
console.log(first);

• Class란?
  • 객체를 생성하기 위한 템플릿, 설계도?
  • constructor : 생성된 객체를 초기화하기 위한 특수한 함수

class Person {
	name;
	age;

	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	getName() {
		return this.name;
	}
}

 

• Instance

let john = new Person("John", 30);
let bob = new Person("Bob", 27);

john.getName(); // print "John"
bob.getName(); // print "Bob"

• 상속
  • 부모의 속성을 모두 가지고 올 수 있음
  • 즉, Person + User가 되는 개념
  • super는 부모의 생성자 호출
  • class를 점차 더 강력하게 만들어줌
  • 복잡한 코드를 간소화할 수 있음

class User extends Person {
	level;

	constructor(name, age, level) {
		super(name, age);
		this.level = level;
	}
	getLevel() {
		return this.level;
	}
}

 

 

2. 어려웠던 내용  🤯

• Class, 알고는 있었지만 그래도 어렵다..
• 여러 컴포넌트들을 import, export 해와서 쓰는 것에 Class가 합쳐지니 더 어렵게 느껴지는 것 같다 😭 이 부분은 계속해서 실습을 통해 써보면서 익혀야 감이 잡힐 것 같다.

3. 궁금한 내용 / 부족했던 내용  🧐

4. 느낀 점 🤔

난이도가 계속 높아지는게 느껴진다. 다음 주 내용도 꽤 어려울거라고 얘기들 하시는데 아무래도 길지 않은 교육과정이다 보니까 다 따라가기가 힘든 부분이 있는 것 같다. 100% 완벽하게 이해는 하지 못하더라도 최대한 따라가고자 노력 해야겠다. 다음 주에 배울 chain scope, closure에 대한 개념은 한번쯤 미리 공부해보고 듣는 것도 좋을 것 같다.