📸 2023-01-16

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• 프로그래머스 표 병합 - 자바스크립트
• 인터랙티브 웹 개발 제대로 시작하기 강의 수강
  • animation의 속성 (@keyframes으로 애니메이션 만들기, animation의 각 속성 이용해서 적용해보기)
  • 3D 공간감을 줄 수 있는 속성(공간감을 주기 위한 perspective, 자식 요소에게 3D 속성 영향을 주는 transform-style: preserve-3d 👈 이건 아직 잘모르겠다.)
• CSS 레이아웃 - 처음부터 반응형 웹까지 핵심만 간단히 정리해 봅시다.
  • 인터랙티브 웹 개발 제대로 시작하기 강의를 듣는데 CSS 기본 문법 중 모르는게 종종 등장해서 강사님의 유투브에 있는 기본 강의를 들었는데 설명 잘해주신다.👍

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

• 자바스크립트 객체의 getter, setter를 쓸 때, 아래 코드처럼 getter 함수명을 프로퍼티 이름과 동일하게 사용하면 Maximum call stack size exceeded Error가 발생한다. obj.value()로 getter를 호출하면 return this.value라는 구문이 value라는 프로퍼티의 값을 반환하는게 아니라 getter 함수 자체를 반환한다. 따라서 무한반복하게 되고, 콜스택 초과 에러가 발생한다.

  const obj = {
    value: "",
    get value() {
      return this.value; //[Exception: RangeError: Maximum call stack size exceeded at get value [as value] (<anonymous>:4:17)...
    },
    set value(value) {
      this.value = value;
    },
  };
  
  obj.value = "A"; //RangeError: Maximum call stack size exceeded
  

  

  이를 해결하기 위해서 getter,setter로 특정 프로퍼티의 값을 읽거나 수정한다면 그 프로퍼티 값에 _를 붙여주는 것이 좋다.

  const obj = {
    _value: "",
    get value() {
      return this._value;
    },
    set value(value) {
      this._value = value;
    },
  };
  
  obj.value();
  obj.value = "A";
  

  🐝 참고

  [JS] Maximum call stack size exceeded 해결 | class getter setter 이해하기

  getter setter Maximum call stack size exceeded Error - stackoverflow

• CSS 기본 스타일 reset 하는 코드를 사용하는 경우가 있다고 한다. 말 그대로 태그마다 기존에 적용된 속성을 초기화시킨다. (이런 식으로 쓰는거 같다. 👉 CSS Tools: Reset CSS - meyerweb.com)

  html,
  body,
  div,
  span,
  h1,
  h2,
  table {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
  }
  

🌟 내일은 어떻게 해보고 싶으세요?

• 인터랙티브 웹 개발 제대로 시작하기 수강하기
• 프로그래머스 표 병합 - 자바스크립트 글 작성 마무리하기

---