213th online meetup, 2024-12-14 with 2024 Home Coming Day

[jongfeel]

참여 방법

토요일 오전 10시 30분에 아래 google meet 링크를 통해 접속
https://meet.google.com/jyx-mxnq-kpk

이 이슈 assignees에 자신의 github 계정을 추가
약 1시간 30분 분량의 할 내용에 대해 댓글 작성 (최소 모임 시작 전까지)
구글 캘린더 일정 등록 메일 확인을 통해서도 가능 (일정 관리에 도움도 드립니다)
모임 시간에 각자 개발 관련된 공부 진행

• 시작: 10시 30분, 각자 오늘 진행할 것 이야기 5분 ~ 10분 간 진행
  • 자기소개: 새로 오신 분이 있으면 각자 짧은 자기소개가 진행됩니다
• 진행: 2시간, 하지만 쉬는 시간 및 기타 잡일 감안해서 1시간 30분 정도로 진행
• 완료: 12시 30분, 이후 각자 진행한 것 이야기, 12시 40분 전후로 종료.

모임 끝난 후 공부한 내용 정리 & 링크 추가 => 최소 다음 모각코 전까지 확인 가능해야 함.

모임 특징: 특정 출석 횟수를 달성하면 스타벅스 아메리카노 기프티콘과 함께 책 선물의 기회가 있음

• Special offer, double stamp for Starbucks americano gift! #87
• Special offer 2, get the book every 20th joined meetup #275

출석체크 테이블

• https://github.com/ThinkAboutSoftware/OnlineSelfCodingGroup/tree/main/Stamp

주의: 회사일 혹은 마감 기한 임박한 일 처리의 경우는 최대한 자제. 주말 아침에 회사에서 지시한 업무를 하는 것과 내 개인 공부하는 건 구분 필요

---

이 날은 2024 home coming day가 있는 날입니다.

제가 스타벅스 서울역동자동점에 있을 예정인데
일찍 오시는 분이 있으면 스타벅스 커피를 사 드리겠습니다.

[jongfeel]

오늘은 아무도 없군요.

평소에 오셨던 분들이 다 home coming day에 참석해야 해서 그런거라 생각합니다.

저는 오늘 211, 212 회차 온라인 모각코 내용 정리하고 12시 쯤 행사 준비를 시작할 것 같습니다.

[chichoon]

제가 왔습니다.

할 일

자바스크립트 딥다이브 읽기 (19챕터에서 진도를 못빼고 있습니다 ㅠㅠ 오래 못읽어서 19챕터 처음부터 다시..)

정리를 핸드폰으로 열심히 해보겠습니다

한 일

객체지향 프로그래밍

• 실제 사물을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작
  • 실제 사물은 특징이나 성질을 나타내는 속성 을 가지고 있다
  • 이런 속성 중 필요한 속성만 뽑아서 간추려 표현하는 것을 추상화라고 함
• 객체지향 프로그래밍은 이처럼 추상화를 거쳐 속성을 통해 다른 객체와 서로 구분이 가능한 독립적인 객체들의 집합을 통해 프로그램을 표현하려는 패러다임
• 객체지향 프로그래밍에서는 객체의 상태 (속성) 를 나타내는 데이터와, 이 상태를 조잣할 수 있는 동작을 하나의 논리적인 객체로 묶어 생각한다
  • 상태 데이터를 Property 라고 한다
  • 동작을 Method 라고 한다

상속과 프로토타입

• 상속

  • 객체지향 프로그래밍의 핵심개념
  • 특정 객체의 프로퍼티와 메서드 (= 속성) 를 다른 객체가 상속받아 사용할 수 있는것
  • 이를 통해 불필요한 속성 중복선언 등을 방지할 수 있다
  • 예를 들어, Circle 생성자 함수에 radius (반지름) 프로퍼티와 getArea() (넓이를 구하는 함수) 메서드가 있다고 했을 때, radius 값은 모든 각각의 Circle 객체가 다른 값을 가질 수 있지만, getArea() 는 객체가 전부 동일한 동작을 수행하므로 굳이 중복해서 생성할 필요가 없는 것
  • 생성자 함수에서 getArea 함수를 선언한다는 것은, 객체가 생성될 때마다 서로 다른 getArea 함수가 선언된다는 것이다
  • 불필요한 메모리 낭비가 발생
  • 상속을 사용하여 모든 객체가 동일한 하나의 getArea 함수를 상속받을 수 있다면?

• 프로토타입

  • 자바스크립트에서 상속을 구현하는 방식
  • Circle 생성자 함수의 프로토타입에 getArea 함수를 등록함으로써, Circle 생성자를 통해 생성된 객체는 모두 getArea 함수를 상속받아 사용할 수 있다
  • 위의 radius 프로퍼티만 각 객체가 개별적으로 소유하고, getArea 메서드는 동일한 기능을 하므로 상속을 통해 공유받아 사용할 수 있는 것
  • 코드의 재사용 관점에서 매우 유용하게 사용할 수 있다
  • String.prototype.split(), Array.prototype.map() 등 기본 믄자열과 배열에서 흔히 사용되는 메서드들이 프로토타입을 통해 상속받은 메서드이다

• 프로토타입 객체 [[Prototype]]

  • 프로토타입 객체는 객체간 상속을 구현하기 위해 사용된다
  • 특정 객체의 상위 (부모) 역할을 하는 객체로서, 다른 객체에 공유 프로퍼티 또는 메서드를 제공한다
  • 모든 객체에는 [[Prototype]] 내부 슬롯이 존재하며, 프로토타입 객체의 참조를 가리키고 있으므로 해당 슬롯을 통해 상위 프로토타입 객체에 접근할 수 있다
    • 예를 들어, 객체 리터럴 {} 에 의해 생성된 객체의 프로토타입은 Object.prototype 이다
    • 생성자 함수에 의해 생성된 객체의 프로토타입은 [생성자함수].prototype 이다
  • 모든 객체는 하나의 프로토타입을 갖는다
  • 프로토타입은 생성자 함수에 연결되어 있다

• __proto__ 접근자 프로퍼티

  • 모든 객체는 __proto__ 접근자를 통해 자신의 프로토타입 ([[Prototype]]) 슬롯에 간접적으로 접근할 수 있다
  • 원칙적으로는 내부 슬롯과 내부 메서드에 접근할 수 없으나, 일부 슬롯 및 메서드에 한하여 간접 접근이 가능한 접근자 프로퍼티를 제공한다
    • 접근자 프로퍼티란? Get, Set 프로퍼티 어트리뷰트 (getter, setter) 로 구성되어 슬롯 및 메서드에 접근하고 값을 할당할 수 있는 프로퍼티
  • __proto__ 프로퍼티를 통해 프로퍼티에 접근할 경우, 내부적으로 __proto__ 접근자의 getter 를 호출한다
  • 반대로 __proto__ 프로퍼티를 통해 새로운 프로토타입을 할당하면 내부적으로 __proto__ 접근자의 setter 를 호출하는 것
  • 객체의 경우, __proto__ 프로퍼티는 객체가 직접 소유한 프로퍼티가 아니라 Object.prototype 으로부터 상속받은 접근자이다
    • 만약 객체에서 특정 프로퍼티 또는 메서드에 접근하려 할 때, 현재 객체에 해당 속성이 존재하지 않을 경우 __proto__ 접근자를 통해 자신의 부모 (상위) 프로토타입에 해당 속성이 존재하는지 검색한다
    • 이를 프로토타입 체인이라고 한다
    • 프로토타입 체인의 최종 종착지는 Object.prototype 으로, 모든 객체는 해당 프로토타입으로부터 상속 받는다
  • 굳이 프로토타입에 직접 접근하지 않고 __proto__ 접근자를 통해 간접 접근하는 이유는 상호 참조에 의한 프로토타입 체인이 생성되는 것을 방지하기 위함
    • 프로토타입 체인은 단방향 링크드 리스트로 구현되어야 하며 한쪽 방향으로만 검색이 가능해야 하는데, 서로가 서로의 프로토타입이 되면 순환참조가 발생하여 프로토타입 체인에서의 속성 검색시 무한 루프에 빠져버릴 수 있다
    • 따라서 순환참조를 방지하기 위해 아무런 사전체크 없이 프로토타입을 바꿔버리지 않도록 __proto__ 접근자 프로퍼티로 간접 교체만 가능하게끔 구현된 것
  • __proto__ 접근자 프로퍼티를 직접 사용하는건 권장되지 않는다
    • 모든 객체가 해당 프로퍼티를 사용할 수 있는 것 이 아니기 때문
    • Object.prototype 을 상속받지 않는 객체를 생성할 수 있어 이 겅우 접근자 프로퍼티를 사용할 수 없을 수도 있다
    • 예시: Object.create(null)
    • 이런 경우, __proto__ 대신 getPropertyOf 메서드를 사용하여 프로토타입의 참조를 취득하고, setPropertyOf 메서드를 사용하여 프로토타입을 교체한다
      • getPropertyOf, setPropertyOf 는 __proto__ 의 getter, setter 동작과 일치한다

[jongfeel]

@chichoon
지금 제 옆에서 열심히 책 읽고 진짜 휴대폰으로 정리 중입니다.