📝 백광인 2024-03-05

docs/RookieAND/dil/2024-03-05.md

@@ -0,0 +1,258 @@
+# ✒️ 함수
+
+### ✏️ 함수의 정의
+
+- 함수란 작업을 수행하거나 값을 계산하는 과정을 표현하고, 이를 하나의 "블록" 으로 감싸 실행 단위로 만든 것이다.
+
+### ✏️ 함수의 정의 방식
+
+1. 함수 선언문 : `function` 키워드를 사용하여 함수를 정의한다.
+2. 함수 표현식 : `function` 키워드를 사용하여 정의한 함수를 식별자에 할당한다.
+
+```js
+// 함수 선언문
+function add(a, b) {
+  return a + b;
+}
+
+// 함수 표현식
+const add = function (a, b) {
+  return a + b;
+};
+```
+
+- 두 표현 모두 함수를 정의하는데 쓰이지만, 가장 큰 차이는 hoisting 의 여부이다.
+- 함수 선언문의 경우 코드 실행 전에 해당 함수의 정보가 사전에 메모리에 등록되기 때문에 동일한 레벨의 컨텍스트 내부에서는 어디서든 사용이 가능하다.
+- 하지만 함수 표현식은 생성된 함수를 변수에 할당하였고, 변수의 경우 값이 할당되기 이전에 사용될 경우 var 는 `undefined` 를, const 와 let 은 `ReferenceError` 를 유발시킨다.
+
+3. Function 생성자 : `new Function()` 생성자를 기반으로 함수를 생성하는 방식
+4. Arrow Function : `=>` 키워드를 사용한 익명 함수를 생성하고 이를 변수에 할당하는 방식.
+
+```js
+// Function 생성자
+const add = new Function("a", "b", "return a + b");
+
+const subFuncBody = "return a - b";
+const sub = new Function("a", "b", subFuncBody); // 런타임 환경에서 Body 를 할당받아 실행이 가능하다.
+
+// Arrow Function
+const add = (a, b) => a + b;
+```
+
+- Function 생성자의 경우 가장 마지막 인자로 실행할 함수 본문을 받고, 이전 인자들은 모두 매개변수로 받는다.
+- Function 생성자의 가장 큰 특이점은 런타임 환경에서 인계 받은 문자열을 사용하여 함수를 만들 수 있다는 점이다. (코드 실행 전이 아니라, 런타임 환경이라는 게 중요하다)
+- Arrow Function 의 경우 함수 표현식과 선언문 방식으로 생성된 함수와는 달리 `arguments` 가 없으며 생성자 기반으로 제작이 불가능하다.
+- 또한 this 바인딩이 특이한데, 화살표 함수는 함수 자체의 바인딩을 가지지 않기 때문에 자신을 호출한 스코프를 기준으로 상위 스코프를 가리킨다.
+
+### ✏️ 그 외 자주 쓰이는 함수 사용 패턴
+
+1. IIFE (즉시 실행 함수) : 함수를 정의하는 순간 실행되는 함수
+2. HOC (고차 함수) : 함수를 인자로 받거나 새로운 함수를 반환하는 함수
+
+```js
+// IIFE 
+async (() => {
+    const slackClient = await slackApp.bootstrap();
+    slackClient.init();
+})
+
+// HOC
+const Component = () => (<div> {...} </div>)
+const intlComponent = withIntl(Component);
+```
+
+- IIFE 의 경우 함수가 정의되는 즉시 실행되기에 1회성으로 동작한다. 따라서 재사용이 불가능하다.
+- HOC 의 경우 함수형 컴포넌트 또한 함수이기 때문에 특정 컴포넌트를 인자로 받아 로직을 부착시켜 반환하는 용도로 많이 쓰인다.
+
+
+### ✏️ 함수 제작 시 주의 사항
+
+1. 함수의 부수 효과를 최대한 억제하라
+
+- 함수의 부수효과란 함수 내부의 작동으로 함수 외부에 영향을 끼치는 현상을 의미한다.
+- 함수는 기본적으로 동일한 인자를 받으면 항상 동일한 결과를 반환해야 하며, 함수의 실행이 외부에 영향을 미쳐서는 안된다.
+- 물론 부수 효과가 아예 없는 상황은 없으나 코드를 더 쉽게 이해하도록 하며 디버깅을 용이하게 하는 순수 함수를 채용하려 노력해야 한다.
+
+
+2. 함수를 작게 만들어라.
+
+- 하나의 함수에 여러 동작을 넣지 말고 최대한 단일 기능을 하도록 함수를 설계하자.
+- 함수에 여러 기능이 추가되면 각 기능들이 동작하는 과정에서 예상치 못한 에러를 맞이할 확률이 올라간다.
+
+3. 함수 명을 명료하게 짓자.
+
+
+# ✒️ 클래스
+
+### ✏️ 클래스란?
+
+- 주로 특정한 목적을 가진 객체를 반복적으로 생성하기 위해 사용된다.
+- ES6 스펙에서 추가된 문법이며, 이전 버전의 경우 주로 prototype 기반의 객체 모델링을 진행했다. (같은 객체를 반환하는 함수 포함)
+
+### ✏️ constructor
+
+- 객체 (클래스 인스턴스) 를 생성하기 위해 사용되는 특수 메서드다.
+
+### ✏️ property
+
+- 클래스 내부에서 정의할 수 있는 속성 값을 의미한다.
+- Typescript 의 경우 protected, private 와 같이 속성 접근 제한자를 사용할 수 있고, JS 에서도 `#` 을 사용하여 특정 속성을 private 하게 지정할 수 있다.
+
+### ✏️ getter, setter
+
+- 클래스 내부에서 특정한 값을 가져올 때 쓰이는 패턴이다.
+- getter 함수의 경우 앞에 `get` 을, setter 함수의 경우 `set` 을 붙인다.
+
+### ✏️ 인스턴스 메서드
+
+- 클래스 내부에서 선언한 메서드를 인스턴스 메서드라고 한다.
+- 인스턴스 메서드의 경우 코드 상으로는 Class 내부에 정의되나, 런타임 환경에서는 prototype 에 선언되어 prototype 메서드라고 불린다.
+- JS 는 기본적으로 프로토타입 언어이기 때문에, 객체 내부의 메서드나 속성들이 전부 prototype 을 기반으로 정의된 것을 볼 수 있다.
+
+
+```js
+class Car {
+    constructor(name) {
+        this.name = name;
+    }
+
+    getName() {
+        return this.name
+    }
+}
+
+const myCar = new Car('레이');
+console.log(Object.getPrototypeOf(myCar)) // { constructor: f, getName: ƒ }
+
+```
+
+> Prototype Chaining
+
+- 해당 메서드를 객체에서 선언하지 않았으나 프로토타입 내부에 존재하는 메서드를 찾아 실행하는 방식을 Prototype Chaining 이라 한다.
+- 모든 객체는 Object 를 최상위 객체로 가지기 때문에, 별도의 정의 없이도 Object 내부 prototype 에 정의된 메서드들을 기본적으로 사용할 수 있다.
+- `toString()` 메서드의 경우에도 별도의 정의 없이 어느 객체에서나 사용할 수 있다.
+
+
+### ✏️ static (정적) 메서드
+
+- 별도의 클래스 인스턴스 없이도 클래스 명을 기반으로 호출할 수 있는 메서드
+- 정적 메서드 내부의 this 는 클래스 인스턴스가 아닌 클래스 자신을 가리키기 때문에 유의해야 한다.
+
+### ✏️ 상속
+
+- 기존의 클래스를 상속 받아 자식 클래스에 이를 확장시키는 문법
+- 클래스를 상속받은 대상은 부모 클래스에서 정의된 메서드와 클래스 속성을 모두 사용할 수 있다.
+
+# ✒️ 클래스와 함수의 관계
+
+- ES6 이전에는 prototype 기반으로 Class 의 역할을 대신해왔기 때문에, Class 코드를 ES5로 트랜스파일링 할 경우 아래와 같이 반환된 코드가 나온다.
+
+```js
+'use strict';
+
+function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ('value' in descriptor) descriptor.writable = true;
+        Object.defineProperty(
+            target,
+            _toPropertyKey(descriptor.key),
+            descriptor,
+        );
+    }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, 'prototype', { writable: false });
+    return Constructor;
+}
+
+function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, 'string');
+    return _typeof(key) === 'symbol' ? key : String(key);
+}
+
+function _toPrimitive(input, hint) {
+    if (_typeof(input) !== 'object' || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+        var res = prim.call(input, hint || 'default');
+        if (_typeof(res) !== 'object') return res;
+        throw new TypeError('@@toPrimitive must return a primitive value.');
+    }
+    return (hint === 'string' ? String : Number)(input);
+}
+
+function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError('Cannot call a class as a function');
+    }
+}
+var Cat = /*#__PURE__*/ _createClass(function Cat(name) {
+    _classCallCheck(this, Cat);
+    this.name = name;
+});
+```
+
+> 트랜스파일링 된 코드들이 각각 어떤 역할을 하는지 알아보자.
+
+1. `_createClass` 함수
+
+```js
+function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, 'prototype', { writable: false });
+    return Constructor;
+}
+```
+
+- `_createClass` 함수는 첫 번째 인자로 Constructor (생성자) 함수를 받는다. 
+- 이후 protoProps 와 staticProps 를 받는데 각각 생성자 호출로 반환된 객체의 prototype 혹은 생성자 내부에 새로운 속성을 추가하고 싶을 때 쓰인다.
+- Constructor 함수의 prototype 속성 중 writable flag 를 false 로 수정함으로서 수정이 불가하도록 한다. (configurable 은 true 이기에 완전한 수정 불가는 아니다)
+- 수정이 완료된 함수가 반환되고, 이후 해당 함수를 `new` 키워드로 생성자를 호출하여 prototype 에 적재된 메서드들이 포함된 객체를 반환한다.
+
+2. `_classCallCheck` 함수
+
+```js
+var Cat = /*#__PURE__*/ _createClass(function Cat(name) {
+    _classCallCheck(this, Cat);
+    this.name = name;
+});
+
+function _classCallCheck(instance, Constructor) {
+    // 만약 Cat 함수가 new Cat() 이 아닌 Cat() 으로 호출되었다면 에러 발생.
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError('Cannot call a class as a function');
+    }
+}
+```
+
+- 함수는 일반 호출과 `new` 키워드를 기반으로 한 생성자 호출로 나뉘는데, 여기서는 생성자를 호출해야 하므로 이를 검사하기 위해 추가된 함수다.
+- 일반적으로 함수를 그냥 실행할 경우 this 바인딩이 전역 객체로 이어지기 때문에, `instance instanceof Constructor` 조건문을 통과할 수 없다.
+
+3. `_defineProperties` 함수
+
+```js
+function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ('value' in descriptor) descriptor.writable = true;
+        Object.defineProperty(
+            target,
+            _toPropertyKey(descriptor.key),
+            descriptor,
+        );
+    }
+}
+```
+
+- ES5 스펙의 `Object.defineProperties` 함수를 래핑한 함수다.
+- `value` 가 존재하는 property 인 경우 수정이 가능하도록 writable flag 를 true 로 설정한다.
+- configurable flag 는 true 이며, enumerable flag 의 경우 property 에 정의된 값을 따라간다. (default 는 false)