자바스크립트 클래스의 접근제어자에 대해 설명해주세요.

자바스크립트 클래스 접근제어자 완벽 가이드 🔐

React 컴포넌트나 Node.js 서버를 개발하다 보면 클래스의 데이터를 어떻게 보호할지 고민하게 됩니다. 오늘은 자바스크립트와 타입스크립트에서 클래스의 접근제어자를 알아보겠습니다! 💪

1. Public 접근제어자 🌍

누구나 접근 가능한 공개 멤버

별도 키워드 없이 선언하면 기본적으로 Public입니다. 클래스 외부에서 자유롭게 접근할 수 있어요.

// React 컴포넌트 예시
class UserProfile {
  constructor(name) {
    this.name = name; // Public 멤버
  }
  
  getName() {
    return this.name; // Public 메서드
  }
}

const user = new UserProfile("김개발");
console.log(user.name); // "김개발" - 외부에서 접근 가능 ✅

언제 사용할까요? 🤔

• React props처럼 외부에서 설정해야 하는 데이터
• API 응답 데이터처럼 공개되어야 하는 정보

2. Private 접근제어자 🔒

클래스 내부에서만 접근 가능한 비공개 멤버

멤버 앞에 #을 붙여서 선언합니다. 외부에서 절대 접근할 수 없어요!

// Node.js 데이터베이스 연결 예시
class DatabaseConnection {
  #password = "super-secret-key"; // Private 멤버
  
  constructor(username) {
    this.username = username; // Public
  }
  
  connect() {
    return `연결됨: ${this.username}/${this.#password}`;
  }
}

const db = new DatabaseConnection("admin");
console.log(db.username); // "admin" ✅
console.log(db.#password); // 에러! 접근 불가 ❌

언제 사용할까요? 🤔

• API 키, 비밀번호 같은 보안 정보
• 내부 상태 관리용 변수
• 외부에서 직접 조작하면 안 되는 데이터

3. Protected 접근제어자 🛡️

상속받은 클래스에서만 접근 가능

자바스크립트는 Protected를 지원하지 않아서 _를 관습적으로 사용합니다.

// Next.js 페이지 베이스 클래스 예시
class BasePage {
  constructor() {
    this._isAuthenticated = false; // Protected (관습)
  }
  
  _checkAuth() { // Protected 메서드
    return this._isAuthenticated;
  }
}

class AdminPage extends BasePage {
  render() {
    if (this._checkAuth()) { // 상속받은 클래스에서 접근 ✅
      return "관리자 페이지";
    }
    return "접근 권한 없음";
  }
}

주의! ⚠️ 자바스크립트에서 _는 단순 약속일 뿐, 실제로는 외부에서 접근 가능합니다.

4. 타입스크립트의 강력한 접근제어자 💎

타입스크립트에서는 명시적인 키워드를 제공해요!

// React 컴포넌트 상태 관리 예시
class ComponentState {
  public title: string;           // 외부 접근 O
  private _internalId: number;    // 외부 접근 X
  protected _baseConfig: object;  // 상속 클래스만 접근 O
  
  constructor(title: string) {
    this.title = title;
    this._internalId = Math.random();
    this._baseConfig = { theme: 'dark' };
  }
}

파라미터 프로퍼티 마법 ✨

생성자에서 접근제어자를 사용하면 자동으로 멤버가 선언되고 초기화됩니다!

// Before (기존 방식)
class User {
  public name: string;
  private age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// After (파라미터 프로퍼티)
class User {
  constructor(
    public name: string,
    private age: number
  ) {} // 끝! 자동으로 멤버 선언&초기화 🎉
}

5. 실무에서 이렇게 활용해요! 💼

React Hook과 함께 사용하기

class ApiService {
  #baseURL = process.env.NEXT_PUBLIC_API_URL;
  
  async fetchUser(id) {
    const response = await fetch(`${this.#baseURL}/users/${id}`);
    return response.json();
  }
}

// React 컴포넌트에서 사용
const api = new ApiService();

Node.js 서버에서 활용

class AuthController {
  #secretKey = process.env.JWT_SECRET;
  
  generateToken(userData) {
    return jwt.sign(userData, this.#secretKey);
  }
}

6. 핵심 정리 📝

접근제어자 JS 문법 TS 문법 외부 접근 상속 접근

Public	this.name	public name	✅	✅
Private	this.#name	private name	❌	❌
Protected	this._name	protected name	❌	✅

7. 마무리 팁 💡

언제 어떤 접근제어자를 쓸까요?

• Public: 외부에서 사용해야 하는 모든 것 (기본값)
• Private: 보안이 중요하거나 내부 로직에만 필요한 것
• Protected: 상속 구조에서 자식 클래스가 접근해야 하는 것

Next.js 개발자라면 🚀

• 환경변수나 API 키는 Private으로 보호
• 컴포넌트 간 공유 로직은 Protected로 상속 구조 활용
• 외부에서 접근해야 하는 props나 상태는 Public으로 관리

접근제어자를 잘 활용하면 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있어요! 🎯

---

자바스크립트 클래스의 접근제어자에 대해 설명해주세요.

프론트엔드와 관련된 질문이에요.

자바스크립트에서 클래스의 Public, Private, Protected 접근제어자는 클래스 멤버의 접근 범위를 제어하는 데 사용됩니다.

Public은 별도 키워드를 붙이지 않았을 때 기본 적용되는 접근제어자로, 클래스 외부에서도 자유롭게 접근 가능합니다. 예를 들어, this.name = "John”;처럼 선언된 멤버는 Public으로 간주됩니다. 이는 클래스 외부에서 객체를 통해 직접 접근할 수 있습니다.

Private은 멤버 앞에 # 키워드를 붙여 적용하는 접근제어자로, 클래스 내부에서만 접근 가능하게 됩니다. 예를 들어, this.#secret = "hidden”;처럼 선언된 멤버는 Private으로 간주됩니다 . Private 멤버는 객체를 통한 외부 접근이 불가능하며, 상속받은 클래스에서도 사용할 수 없게 됩니다.

Protected는 자바스크립트 언어 차원에서 지원하지 않지만, 관습적으로 _를 접두어로 사용해 개발자 간 약속으로 처리합니다. 예를 들어, this._secret = ‘hidden’;과 같은 방식으로 선언하여 Protected임을 나타냅니다. 이는 상속받은 클래스에서 접근하는 것은 허용하지만 클래스 외부에서는 사용하지 말라는 의미를 나타냅니다. 즉, 클래스 외부에서 객체를 통한 접근은 하지 않을 것을 개발자들 간에 약속하는 것입니다. 이는 언어 차원의 강제성은 없습니다.

접근제어자를 활용하면 코드의 캡슐화를 통해 데이터 보호와 유지보수를 향상시킬 수 있습니다.

타입스크립트에서는 접근제어자와 관련해 어떤 차이점이 존재하나요? 🤔

첫째, 타입스크립트에서는 자바스크립트에서 지원하지 않는 접근제어자 키워드들을 제공하기 때문에 더욱 명시적인 방식으로 접근제어자를 선언할 수 있습니다.

public 키워드를 이용하여 Public 멤버임을 선언할 수 있습니다. 아무 키워드를 붙이지 않을 때와 동작은 동일하지만 그 의미를 명시적으로 나타낼 수 있게 해줍니다.

# 키워드 대신 private 키워드를 이용하여 Private 멤버임을 선언할 수 있습니다.

_ 키워드 컨벤션 대신 protected 키워드를 이용하여 Protected 멤버임을 선언할 수 있습니다.

예시

class Foo {
  public a: string; // 상속 클래스 접근 O / 외부 접근 O
  private b: number; // 상속 클래스 접근 X / 외부 접근 X
  protected c: boolean; // 상속 클래스 접근 O / 외부 접근 X

  constructor(a: string, b: number, c: boolean) {
    this.a = a;
    this.b = b;
    this.c = c;
  }
}

둘째, 타입스크립트에서는 파라미터 프로퍼티(Parameter Properties) 기능을 제공합니다. 이는 생성자 매개변수에 접근제어자를 붙이면 해당 변수를 멤버로 자동 선언하고 초기화되는 기능입니다. 이로 인해 코드를 간결하게 작성할 수 있습니다.

예시

class Foo {
  constructor(public a: string, private b: number, protected c: boolean) {
    // 이 부분을 채우지 않아도 자동으로 멤버 선언 및 초기화
  } 
}