[ TIL ] Day 6 - 객체 지향 프로그래밍 / 비동기 처리 방식

🗓️ 수업 일자 : 2025.09.25

✨ 오늘의 수업 평가 : [ GOOD ] 오늘도 한 걸음 성장! 🌱✨🌙

📝 오늘 배운 내용
- 객체 지향 프로그래밍

- 비동기 처리

[day 5] 객체지향 프로그래밍 / 비동기 처리 작업 이미지

---

1. 객체 지향 프로그래밍

기본 개념

1) 절차 지향 프로그래밍

• 프로그램 동작을 개발 언어 중심으로 구현하는 방식
• 연관된 데이터와 함수가 있는 경우 각각 분리하어 작성되고 순차적인 실행이 이루어 지게 구현 해야 원활히 작동 함
• 간단한 문제 해결로는 해당 방식이 좋지만, 대부분 작업이 프로그램을 개발하는 방식이므로 절차 지향 방식으로 사용하면 코드가 복잡해지고 관리가 힘들어짐

2) 객체 지향 프로그래밍

• 객체와 객체의 상호작용을 중심으로 구현하는 방식
• 연관된 데이터와 함수가 하나의 객체로 묶어서 사용 가능하기 때문에 좀 더 관리가 용이함
• 객체를 만들어 다른 곳에서 사용이 가능하여 재사용성이 높음

캡슐화

• 여러 개발자가 작업 시 중요한 데이터에 함부로 접근하지 못하도록 막는 기능
• 안정성이 높아짐

class Elec{
    #name; 
    // Private 문법, 원하는 속성 이름(Key) 앞에 #을 붙여서 사용. 
    // 외부에서 name이라는 키값을 바꾸거나 접근 할 수 없음.

    constructor(name,position){
        this.#name = name;
        this.position = position;
    }

    station(){ console.log(`${this.#name}가 ${this.position}에 있습니다.`);}
}

const com1 = new Elec("컴퓨터","책상");
console.log(com1.name); // 애초에 name으로 선언한게 아니라 #name으로 선언했기 때문에 undefined가 나옴
console.log(com1.#name); // private 속성이기 때문에 바깥 영역에서는 접근 불가함

com1.station();

• 캡슐화의 getter 와 setter
  • 캡슐화 된 속성에 접근하기 위하여, get / set 명령어를 이용하여 간단하게 접근 방식을 사용.
  • 일반 함수를 만들어 해당 내용을 만들어 사용해도 되지만, 재사용 시 용이하기 위하여 해당 명령어를 사용하여 resetting 함.
  • get/set 명령어는 필수로 쓰는것이 아니라 필요한 시점에만 해당 명령어를 열어주고, 평소에는 막아두는 역할로 사용함
  • 해당 명령어를 통해 추후 "검증, 추가 계산, 로그기록" 등 확장 가능

 class Elec{ 
   #name; 
   constructor(name,position){ 
     this.#name = name; this.position = position; 
   } 
   station(){ console.log(`${this.#name}가 ${this.position}에 있습니다.`);} 
   // getter : Private 속성에 제대로 값이 들어갔는지 확인하는 메서드 
   get name(){ return this.#name; } 
   // setter : Private 속성의 값을 변경할 때 사용하는 메서드 
   set name(newName){ 
     // 들어오는 데이터의 검증 작업이 가능함 
     if(typeof newName !== "string"){ throw new Error("문자를 입력 해 주세요"); } 
     this.#name = newName; } 
 }

const com1 = new Elec("컴퓨터","책상");

// getter, setter가 생겨서 아래의 접근법이 가능해 짐  
console.log(com1.name);  
com1.name = "모니터";

com1.station();

상속

• 상위 클래스의 프로퍼티와 메소드를 하위 클래스가 물려받아 사용하는 것.
• 클래스 선언 시 extends를 사용해 상위 클래스를 불러오고, 상위 클래스는 하위 클래스 위에 항상 위치해야 제대로 작동함.
• 상위 클래스를 new 명령어로 새로 생성한다고 해서 하위 클래스도 같이 선언되는 개념은 아님.(상위 클래스 내부에 선언한 "프로퍼티 자체"를 재선언 하지 않고 사용 할 수 있는 개념)

class Elec{
    #name; 

    constructor(name="그것",position){
        this.#name = name;
        this.position = position;
    }

    station(){ console.log(`${this.#name}가 ${this.position}에 있습니다.`);}
    get name(){ return this.#name; }
}

class Computer extends Elec{

    constructor(name,position,local){
    	super(name,position);
        this.local = local;
        // 상위 클래스에서 받은 프로퍼티를 제외한 나머지 프로퍼티 선언
    }

    pos(){
        console.log(`${this.name}가 ${this.position}에 올려져있습니다.`);
    }
}

const com1 = new Computer(undefined,"책상");
com1.station();
com1.pos();

다형성 (메서드 오버라이팅)

• 상위 클래스와 하위 클래스에서 사용하는 메서드의 이름이 같은 경우에도, 서로 별도의 메서드로 보고 불러오는 클래스에 맞게 각각 동작하는 것

class Elec{
    #name; 

    constructor(name="그것",position){
        this.#name = name;
        this.position = position;
    }

    station(){ console.log(`${this.#name}가 ${this.position}에 있습니다.`);}
    get name(){ return this.#name; }
}

class Upper extends Elec{
    station(){
        console.log(`${this.name}가 ${this.position}에 올려져있습니다.`);
    }
}

function parentEle(elec){
    elec.station();
}


parentEle(new Elec("컴퓨터","책상")); // "컴퓨터"가 "책상"에 있습니다
parentEle(new Upper("컴퓨터","책상")); // "컴퓨터"가 "책상"에 올려져있습니다.

추상화

• 객체 모듈을 사용할 때는 결과로 나온 프로퍼티 혹은 메서드만 사용하기 때문에, 내부의 복잡한 내용을 알지 못해도 손쉽게 사용 가능.
• 예시 : 마라탕을 사 먹을때, 안에 들어가 있는 각각의 재료 손질법 / 재료를 구한 위치 / 재료의 보관 방법 등을 알지 못해도
  [한 그릇에 모두 넣어 끓이면 먹을 수 있음] = 동작, 행위, 메서드
  [맛있다, 매콤하다] = 결과값, 프로퍼티!

2. 비동기 처리

비동기 처리

• 자바스크립트는 싱글스레드, 즉 일처리 담당이 1명밖에 없음. 따라서 코드의 순서에 따라 작업이 진행되기 때문에 일부 작업으로 인해 전제 작업이 딜레이 되는 현상이 발생함

콜백 함수 & 비동기

• 콜백 함수 : 특정 작업이 끝나면 실행 되는 함수.
• 동기 실행 : 실행 순서에 따라 작업이 진행되는데, 현재 작업이 종료 되어야 다음 작업이 시작 될 수 있음.
• 비동기 실행 : 현재 작업이 너무 오래 걸리는 경우 다른 작업을 우선 실행 하여 전체 과정을 효율적으로 운영 가능
• 콜백 헬, 콜백 지옥 : 콜백 함수 안에 콜백 함수를 넣고, 그 안에 또 콜백함수를 넣어서 사용하는 것 처럼 무한 콜백 함수 안에 갇히는 것.

Promise 문법

: Promise는 비동기 작업의 상태와 완료 된 정보를 알려주며, 이를 활용할 수 있도록 JS에서 제공하는 내장 객체(기능/클래스)

[비동기 상태 정보]

• pending : 비동기 작업이 진행 중인 상태
• fulfilled : 비동기 작업이 성공하여 끝난 상태
• rejected : 비동기 작업이 실패하여 끝난 상태

[Promise 사용하기]

• .then() : fulfilled 되면 실행되는 콜백 함수, 성공 시 값 전달을 하는 역할로, 한번에 여러 개 사용 가능
• .catch() : rejected 되면 실행되는 콜백함수, 실패 시 에러를 전달하는 역할로 .then()이 종료 된 이후 작성하여 사용 함
• .finally() : 비동기 작업의 결과와 상관없이 실행되는 콜백함수

fatch("api 주소 삽입")
  .then((response)=>{ 
      // throw new Error("make error!"); 강제로 에러를 만들면 아래의 catch문이 실행 됨 
      return response.json(); 
  }) 
  .then((data)=>{ 
      console.log(data); 
  }) 
  .catch((error)=>{ 
      console.log('Error!'); 
  }) 
  .finally(()=>{ 
      console.log("finish!"); 
  });

async / await 문법

: Promise 문법에서 나오는 .then()체이닝을 해결하는 발전 된 문법

• async : await을 사용하는 함수에 함께 사용하는 명령어
• await : 비동기로 이루어 지겠다고 선언하는 명령어
• try & catch : try 문은 await이 정상 작동하는 공간, catch문은 await이 문제가 생겼을 경우 에러를 출력하는 공간

async function dataInfo(){

    try{

        // Promise의 .then() + .finally() 역할
        const data = await fetch('API 주소');
        const dataJson = data.json;
        return dataJson

    }catch(error){

        // Promise의 .catch() 역할
        console.log(error);
    }
}

---

**📃 내일은 뭘 배울까 🤔**

- Fetch 와 Axios

- 서버 통신