Typescript 완벽 가이드｜기초부터 실전까지 한 번에 정리 - 8강

네, 8강에 오신 것을 환영합니다! 🏫 "요즘 React는 함수형 컴포넌트(const App = () => {})만 쓴다던데, 굳이 클래스를 배워야 하나요?"라는 의문이 드실 수 있습니다.

하지만 **클래스(Class)**는 여전히 중요합니다.

1. 오래된 React 코드(Legacy)를 수정해야 할 때가 있습니다.
2. Next.js와 함께 쓰는 백엔드(NestJS 등)나, 복잡한 비즈니스 로직을 다룰 때는 클래스가 훨씬 깔끔합니다.
3. 무엇보다 오늘 배울 접근 제어자 개념은 "데이터를 안전하게 지키는 방법"의 핵심입니다.

---

🚀 제8강. 클래스와 접근 제어자: "내 방엔 들어오지 마!"

1. 클래스(Class): "기능까지 포함한 붕어빵 틀"

4강에서 배운 인터페이스가 '변수의 모양'만 정했다면, 클래스는 '데이터'와 그 데이터를 다루는 '기능(함수)'까지 한 묶음으로 만드는 공장입니다.

TypeScript

 

class Car {
  model: string; // 데이터 (멤버 변수)

  // 생성자: 처음 만들 때 실행되는 함수
  constructor(model: string) {
    this.model = model;
  }

  // 기능 (메서드)
  drive() {
    console.log(this.model + "가 출발합니다! 부릉~");
  }
}

const myCar = new Car("Tesla");
myCar.drive(); // "Tesla가 출발합니다! 부릉~"

2. 접근 제어자 (Access Modifiers) ⭐️

타입스크립트 클래스의 꽃입니다. **"누가 내 데이터를 건드릴 수 있느냐"**를 정하는 보안 등급입니다.

💡 비유: 우리 집 보안 등급

1. public (공공재): 대문 앞. 택배 기사님, 지나가는 사람 누구나 볼 수 있습니다. (기본값)
2. private (사유지): 내 침실. 오직 **나(현재 클래스)**만 들어갈 수 있습니다. 가족도 못 들어옵니다.
3. protected (보호구역): 거실. **나와 내 자식(상속받은 클래스)**까지만 들어갈 수 있습니다. 남은 못 들어옵니다.

💻 코드로 보는 차이

TypeScript

 

class Employee {
  public name: string;      // 누구나 이름은 부를 수 있음
  private salary: number;   // 연봉은 나만 알아야 함 (1급 비밀)
  protected department: string; // 부서는 나랑 내 후배(상속)만 알면 됨

  constructor(name: string, salary: number, department: string) {
    this.name = name;
    this.salary = salary;
    this.department = department;
  }

  // 내부에서는 private인 salary에 접근 가능!
  public getSalaryCheck() {
    return this.salary; 
  }
}

const kim = new Employee("김철수", 5000, "개발팀");

console.log(kim.name);       // OK (public)
// console.log(kim.salary);  // 🚨 에러! "private 속성입니다."
// console.log(kim.department); // 🚨 에러! "protected 속성입니다."

3. 실무 꿀팁: 생성자 파라미터 단축 문법

실무에서는 코드를 짧게 쓰기 위해 생성자 안에서 접근 제어자를 바로 씁니다. React나 NestJS 코드 볼 때 당황하지 마세요!

TypeScript

 

class User {
  // 예전 방식
  // name: string;
  // constructor(name: string) { this.name = name; }

  // ✨ 최신 단축 방식 (위와 100% 똑같음)
  // 생성자 파라미터 앞에 public/private을 붙이면 알아서 변수도 만들어주고 값도 넣어줍니다.
  constructor(public name: string, private age: number) {}
}

const user = new User("짱구", 5);
console.log(user.name); // "짱구"
// user.age; // 에러 (private)

---

✍️ 8강 미니 퀴즈 & 실습

접근 제어자, 확실히 이해했는지 확인해 볼까요?

문제 1. (연결하기) 다음 상황에 알맞은 접근 제어자를 연결해 주세요.

1. public
2. private
3. protected

A. "이 변수는 클래스 내부에서만 쓰고, 밖에서는 절대 몰라야 해!" ( ) B. "이 변수는 어디서든 자유롭게 쓰고 고칠 수 있어." ( ) C. "이 변수는 나랑, 나를 상속받은 자식 클래스까지만 쓸 수 있어." ( )

문제 2. (에러 찾기) 다음 코드에서 에러가 발생하는 줄은 어디일까요?

TypeScript

 

class BankAccount {
  private balance: number = 0; // 잔고

  deposit(amount: number) {
    this.balance += amount; // A
  }
}

const myAccount = new BankAccount();
myAccount.deposit(1000);   // B
myAccount.balance = 50000; // C

---

✅ 정답 및 해설

• 문제 1 정답:
  • A - 2 (private): 가장 강력한 보안입니다. 비밀번호, 내부 키 값 등에 씁니다.
  • B - 1 (public): 기본값입니다. 안 적으면 public입니다.
  • C - 3 (protected): 상속 관계에서 유용합니다.
• 문제 2 정답: C
  • 해설: balance는 private으로 선언되었습니다. 즉, BankAccount 클래스 안에서만(this.balance) 건드릴 수 있습니다. 클래스 밖에서(myAccount.balance) 직접 숫자를 바꾸려고 하면 보안 위반으로 에러가 납니다.

---

고생하셨습니다! 👏 이제 여러분은 데이터를 안전하게 보호하는 **캡슐화(Encapsulation)**의 기초를 마스터하셨습니다. Part 2의 절반을 넘어섰네요!

다음 9강과 10강은 타입스크립트의 '알파이자 오메가', **'만능 열쇠'**라고 불리는 **제네릭(Generics)**입니다. 많은 초보자분들이 여기서 포기하지만, 제 설명과 함께라면 "어? 그냥 파라미터랑 똑같네?" 하고 넘어가실 수 있습니다. 정말 중요하니 기대해 주세요!