21강. 객체로 하나의 대상을 표현하기

이번 강의의 결과물은 프로젝트 하나의 제목, 분야, 설명, 대표 여부를 객체로 묶고 여러 프로젝트를 객체 배열로 관리하는 코드입니다.

?1. 이번 강의에서 해결할 문제

프로젝트 제목 배열, 분야 배열, 설명 배열을 따로 만들면 같은 프로젝트의 데이터가 서로 다른 인덱스에 흩어집니다. 관련 값을 하나의 대상으로 묶어 데이터 관계를 분명하게 만듭니다.

✓학습 목표

• 프로젝트 제목 배열, 분야 배열, 설명 배열을 따로 만들면 같은 프로젝트의 데이터가 서로 다른 인덱스에 흩어집니다. 관련 값을 하나의 대상으로 묶어 데이터 관계를 분명하게 만듭니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• 객체 리터럴: 중괄호 안에 속성과 값을 작성한 데이터
• 속성: 객체가 가진 정보의 이름
• 점 표기법: project.title
• 대괄호 표기법: project["title"]
• 객체 배열: 같은 구조의 여러 객체를 배열로 관리

const project = {
  title: "반응형 포트폴리오",
  category: "web",
  isFeatured: true,
};

객체는 하나의 게임 캐릭터가 이름, 체력, 상태를 함께 갖는 것처럼 하나의 대상을 설명하는 관련 값을 묶습니다. 객체 초기화 문법과 속성 접근은 TC39 ECMAScript 표준을 기준으로 합니다.

</>3. 코드 예시

파일명: web-basics/portfolio/js/main.js

const projects = [
  {
    title: "게임플레이 기능 프로젝트",
    category: "game",
    description: "Unreal C++로 상호작용 기능을 구현합니다.",
    isFeatured: true,
  },
  {
    title: "반응형 포트폴리오",
    category: "web",
    description: "HTML과 CSS로 여러 화면 크기에 대응합니다.",
    isFeatured: false,
  },
];

console.log(projects[0].title);
console.log(projects[1]["category"]);

for (const project of projects) {
  console.log(`${project.title}: ${project.description}`);

  if (project.isFeatured) {
    console.log("대표 프로젝트입니다.");
  }
}

projects[1].isFeatured = true;
console.log(projects[1]);

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. 배열의 각 항목이 프로젝트 하나를 나타내는 객체입니다.
2. 모든 객체가 같은 속성 이름을 사용해 반복문에서 같은 방식으로 처리할 수 있습니다.
3. 점 표기법은 이름이 정해진 속성을 간단히 읽습니다.
4. 대괄호 표기법은 문자열로 속성 이름을 지정합니다.
5. isFeatured 불리언을 조건문에 사용해 대표 프로젝트만 구분합니다.
6. 배열과 객체를 const로 선언해도 내부 속성은 바꿀 수 있지만 변수에 완전히 다른 배열을 재대입할 수는 없습니다.

!5. 자주 하는 실수

• 같은 개념에 title, projectTitle, name처럼 서로 다른 속성 이름을 사용함
• 존재하지 않는 속성의 undefined를 정상 값으로 처리함
• 문자열과 불리언을 혼동해 isFeatured: "false"로 작성함
• 객체 속성 사이의 쉼표를 빠뜨림
• 점 표기법에서 속성 이름을 따옴표로 감쌈
• 객체 전체를 출력하고 필요한 속성 확인을 생략함

✎6. 짧은 실습 과제

1. 자신의 실제 게임 프로젝트와 웹 프로젝트를 객체로 작성합니다.
2. 두 객체가 같은 속성 구조를 사용하도록 맞춥니다.
3. 객체들을 projects 배열에 넣습니다.
4. 반복문으로 제목, 분야, 설명을 한 줄씩 출력합니다.
5. 대표 프로젝트에만 별도의 메시지를 출력합니다.
6. 한 객체에서 속성 이름을 일부러 틀려 undefined를 확인한 뒤 수정합니다.

완료 기준은 프로젝트 관련 값이 여러 배열에 흩어지지 않고 하나의 객체 단위로 추가·조회되는 것입니다.

?7. 이해 점검 질문 3개

1. 프로젝트마다 여러 배열을 따로 만드는 것보다 객체로 묶는 방식이 안전한 이유는 무엇인가요?
2. project.title과 project["title"]은 어떤 값을 읽나요?
3. const 객체의 속성을 변경할 수 있지만 변수 자체를 재대입할 수 없는 이유는 무엇인가요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.