* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.

1. 수업 중 배운 내용들

Object.keys

• JavaScript에서 객체의 키(key)들을 배열 형태로 반환하는 메서드.

const user = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

const keys = Object.keys(user);
console.log(keys); // ['name', 'age', 'job']

활용법 - 객체 속성 순회

• Object.keys는 객체의 키(key)를 배열로 반환하기 때문에, 배열 메서드를 활용하여 객체의 속성들을 순회(Iteration)할 수 있다.

const user = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});

// 출력:
// name: Alice
// age: 25
// job: Developer

• Object.keys(user)가 ['name', 'age', 'job'] 배열을 반환.
• forEach는 배열의 각 키를 하나씩 순회하며, 객체의 값은 user[key]를 통해 접근하게 된다.

활용법 - 객체 속성 개수 확인

const user = { name: 'Alice', age: 25 };
console.log(Object.keys(user).length); // 2

object.constructor

• 객체의 생성자 함수(Constructor Function)를 참조하는 속성.

• 객체가 어떤 생성자 함수로부터 만들어졌는지 확인하거나, 생성자를 직접 호출하여 새로운 객체를 만들 때 사용.

const obj = {};
console.log(obj.constructor); // [Function: Object]

const arr = [];
console.log(arr.constructor); // [Function: Array]

const num = new Number(42);
console.log(num.constructor); // [Function: Number]

• 해당 대상이 어느 생성자 함수를 참조하고 있는지 확인하거나..

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const alice = new Person('Alice', 25);

console.log(alice.constructor); // [Function: Person]
console.log(alice.constructor === Person); // true

• 사용자 정의 생성자 함수를 만들거나..

function Animal(type) {
  this.type = type;
}

const dog = new Animal('Dog');

// dog.constructor를 사용해 새 객체 생성
const cat = new dog.constructor('Cat');

console.log(cat.type); // 'Cat'
console.log(cat.constructor); // [Function: Animal]

• 새로운 객체를 만들수도 있다.

Object.constructor와 instanceof

• Object.constructor는 특정 객체의 생성자 함수를 반환.

• instanceof는 객체가 특정 생성자의 인스턴스인지 확인.

function Animal() {}
const dog = new Animal();

// 객체가 정의된 생성자 함수로 초기화되었는지 확인
console.log(dog.constructor === Animal); // true

// 객체가 생성자의 프로토타입 체인에 포함되어 있는지 확인
console.log(dog instanceof Animal); // true

2. 미니 프로젝트 (2)

로그인 기능 고도화 및 실행 결과