12월 9일 커피챗

📸 기록 사진

📜 진행 기록

• (멘토님) 한 주 다들 어떻게 보내셨나요?
• (일동) 강의 듣느라 바빴어요…😢

• (멘토님) 의외로 현업의 많은 it 기업들이 레거시를 품고 있습니다…ㅎ

• 저번 과제 코드 리뷰
• 6주차 과제
• 윈도우, 맥은 파일 시스템 상 대소문자 구분을 안 하는데, 리눅스는 구분을 합니다! 그러니 파일명 commit 찍을 때 대소문자 주의하셔야 합니다. 중간에 파일명을 대문자에서 소문자로, 소문자에서 대문자로 바꾸는 경우, 로컬에선 (구분을 안 하므로) 정상 동작하고 git이 변경 사항을 추적하지 못하지만, 리눅스 배포 환경에서 파일 인식을 못하는 사고가 발생할 수 있습니다!
• window에 addEventListener 다신 분들..!! window에 이벤트를 달 때, component 파일에 달아두면 해당 컴포넌트를 생성할 때마다 계속 이벤트가 달리게 됩니다. 그리고 이벤트가 등록될 때마다 성능이 느려져요!
• 이런 문제는 여러 방식으로 해결할 수 있는데,
1. 한번만 생성되는 App 컴포넌트에 window 이벤트를 등록하는 방법
2. window에 이벤트를 등록하는 컴포넌트에 이벤트 핸들러(리스너) 함수를 만들고 addEventListener의 listener 부분에 해당 함수를 넣어주는 방법
3. App 컴포넌트에서 CustomEvent를 정의하고, App의 window.addEventListener에서 해당하는 이벤트에 따라 CustomEvent를 dispatch하고, 관련 컴포넌트에서는 커스텀 이벤트 타입으로 발생한 이벤트에 대해 listener를 등록하는 방법
• 그러나 위에서 1번 방법은 그리 좋은 방법이라고 생각하진 않아요.
• 이벤트와 관련 있는 컴포넌트와 분산이 되기 때문에 흐름을 찾기가 어려워요.
• 2번 방법의 경우, 이벤트 리스너에 이미 핸들러 함수가 등록되어 있으면 같은 이벤트 리스너에 대해서는 재등록을 하지 않기 때문에 이벤트 리스너 등록 중복을 방지할 수 있습니다.
• 만약 props로 전달받은 함수를 사용하고 싶다면 컴포넌트 객체의 prototype으로 핸들러 함수를 등록해서 사용

// thanks to 주영님

function handleKeyup({ key }) {
  if (key === ‘Escape’) {
    ImageViewer.prototype.onClose();
  }
}
export default function ImageViewer({ $target, onClose }) {
  const $imageViewer = document.createElement(‘div’);
  $imageViewer.className = ‘Modal’;
  $target.appendChild($imageViewer);
  ImageViewer.prototype.onClose = onClose;
  this.state = { imageUrl: null };
  this.setState = (nextState) => {
    if (!differ(this.state, nextState)) return;
    const validState = { imageUrl: validate.imageUrl(nextState.imageUrl) };
    this.state = { ...this.state, ...nextState, ...validState };
    this.render();
  };
  this.render = () => {
    $imageViewer.style.display = this.state.imageUrl ? ‘block’ : ‘none’;
    $imageViewer.innerHTML = `
      <div class=“content”>
        <img src=“${this.state.imageUrl}” />
      </div>
    `;
  };
  this.render();
  window.addEventListener(‘keyup’, handleKeyup);
  $imageViewer.addEventListener(‘click’, ({ target }) => {
    if (Array.from(target.classList).includes(‘Modal’)) {
      onClose();
    }
  });
}

• VScode에서 함수의 파라미터 타입을 보이게 설정하는 방법
• vscode의 settings.json에서 javascript.inlayHint를 all로 설정

• firefox에 grid, 문서 구조, 테두리 등 보기 편한 도구들이 많다.

❓QnA