0. PR 링크

• repository: bigsaigon333/javascript-youtube-classroom
• step 1: [1단계 - 나만의 유튜브 강의실] 동동(김동희) 미션 제출합니다.#24
• step 2: [2단계 - 나만의 유튜브 강의실] 동동(김동희) 미션 제출합니다. #63
• step 3: [3단계 - 나만의 유튜브 강의실] 동동(김동희) 미션 제출합니다 #69

1. 학습로그

1. package.json versioning

npmjs 에서는 package.json 의 version을 semantic versioning spec. 에 따라 관리할 것을 권장하고 있습니다.

기본규칙: Major.Minor.Patch

Code status	Stage	Rule	Example version
최초 릴리스	New product	1.0.0 으로 시작한다	1.0.0
하위 호환성을 유지한 버그 수정	Patch release	세번째 자리수를 증가시킨다	1.0.1
하위 호환성을 유지한 새로운 기능	Minor release	두번째 자리수를 증가시키고, 세번째 자리수를 0으로 초기화한다	1.1.0
하위 호환성을 깨는 변화	Major release	첫번째 자리수를 증가시키고 두번째 자리수와 세번째 자리수를 0으로 초기화한다	2.0.0

package.json 에 dependencies package에 적용할 업데이트 타입을 구체화할 수 있습니다.

예를 들어 1.0.4를 포함한 적용가능한 업데이트 버젼을 명시하려면 아래와 같이 작성할 수 있습니다.

• Patch releases: 1.0 or 1.0.x or ~1.0.4 // (1.0.4 ~ 1.0.9)
• Minor releases: 1 or 1.x or ^1.0.4 // (1.0.4 ~ 1.9.9)
• Major releases: * or x

Example

"dependencies": {
  "my_dep": "^1.0.0",  // 1.0.0 ~ 1.9.9
  "another_dep": "~2.2.0"  // 2.2.0 ~ 2.2.9 
},

Reference
https://semver.org/
https://docs.npmjs.com/about-semantic-versioning
https://docs.npmjs.com/cli/v7/configuring-npm/package-json#version

2. 사전적 의미: delete vs remove

• delete: 삭제하다(존재 자체를 파괴해버리다)

• remove: 제거하다(존재는 하나, 관련된 리스트 등에서 분리하다)

• 예시: $element.remove() $element가 부착되어 있는 트리에서 $element를 제거하는 것이지, $element를 가비지컬렉션하는게 아니다.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

3. private field, public field

Private class field

기본적으로 클래스 프로퍼티는 퍼블릭이므로 클래스의 밖에서 접근 및 수정 가능합니다.
그러나 # prefix 를 앞에 붙임으로써 private class field를 정의하는 것을 가능하게 하자는 stage 3 proposal이 있습니다. CanIUse.com에 따른 현재 Browser에서 지원율은 67.64% 으로, Firefox에서는 모바일과 데스크톱 모두 지원하고 있지 않습니다. 다만, 이러한 한계는 babel 을 이용하여 극복할 수 있습니다.

Reference

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields
• https://github.com/tc39/proposal-private-methods
• https://caniuse.com/?search=private%20class%20field

public class field

class ClassWithInstanceField {
  instanceField = 'instance field'
}

class ClassWithStaticField {
  static staticField = 'static field'
}

class ClassWithPublicInstanceMethod {
  publicMethod() {
    return 'hello world'
  }
}

public class field란 class의 멤버변수를 constructor 가 아닌 class 내에 다른 메소드와 유사하게 직접 선언할 수 있는 것입니다. public class field를 사용하면, 멤버변수가 인스턴스마다 항상 존재한다는 것을 명확하게 할 수 있으며, 클래스 정의만 보아도 클래스의 구조를 더 명확히 알기 쉬워집니다.

canIuse.com에 따른 Brower 지원율은 85.93% 이며, 이 또한 현재 stage 3 proposal 입니다.

Reference

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields
• https://caniuse.com/?search=public%20class%20field

4. Client-side 에서 API Key 숨기기

Client-Side에서 직접 Third Party API와 통신하는 경우에는 개발자 도구의 Networks 탭 등을 이용하여 Request 의 헤더 및 바디를 다 확인할 수 있으므로, URL의 parameter로 같이 보내지는 API Key는 무조건 노출되게 됩니다.

API Server와 통신하는 Redirect Server를 만들고, Redirect Server에서 API Key를 가지게 한 후, Client-Side에서는 Redirect Server와 통신하는 것으로 이러한 문제를 회피할 수 있습니다.

참고자료

• https://velog.io/@bigsaigon333/Client-Side%EC%97%90%EC%84%9C-Youtube-API-Key-%EC%88%A8%EA%B8%B0%EA%B8%B0
• https://github.com/bigsaigon333/hide-api-key-with-serverless-functions

---

추후 추가

## 2. transform: perspective(0);
## 2. arrow function 의 this binding