[레벨1-유튜브] 기억 남는 프로로그

보면 볼수록 느끼는 것이지만 크루들이 글을 허투루 작성하지 않는 것 같아요.
키워드만 얻고 가도 정말 도움이 되는 부분들이 많았어요.

제가 쓴 프로로그나 글 또한 다른 사람들에게 유익했으면 좋겠습니다. 그것이 기록의 가장 큰 이유니까요✨✨

어쨋거나 저쨋거나 이번 유튜브 미션의 프로로그를 읽어보며 인상 깊었던 프로로그들을 간단하게 정리해봤습니다.

💪 무한 스크롤

Intersection Observer 를 사용하거나

throttle을 사용하여 scroll event의 잦은 호출을 방지해봅시다.

💪 commitizen

다른 분들 커밋 보고 커밋 메세지에 이모지가 있길래 이걸 어떻게 하나씩 하신거지? 라고 생각했었는데...

알고보니 commitizen 을 사용하신거였다!

commitizen과 commitLint는 팀에서 통일성 있는 커밋 메세지를 작성할 수 있도록 도와줍니다.

💪 거북이처럼..

2차 저작물, 제가 쓴 이 글 조차도 공식문서에 비하면 정확할 수 없겠죠.

급할수록 돌아가라! 이번 미션을 통해 느낀 것 같아요.

크루들이 공유하는 수 많은 자료들이 존재하고 너무 좋은 글들이 많지만, 일단 공식 문서를 천천히 따라가는 방식을 채택하면 오래 걸리더라도 제 것으로 만드는 데 유리하다는 것을 이번에 깨달았어요.

💪 View를 어떻게?

크게 두 가지죠!

1. 초기 화면을 렌더링한다.
2. 상태 값이 변하면 View를 새롭게 렌더링한다.

• 2의 경우는 template, insertAdjacentHTML을 사용하면 굉장히 편하죠. (지금껏 전부 이렇게 해왔던 것 같아요.)
• 하지만 React의 jsx 방식을 생각해보면 직접 element를 만들고 렌더하는 방식을 사용하는 것도 좋아 보입니다.

💪 try catch문에 더해 finally

try {
  // 실행 코드 
} catch (error) {
  // try에서 던진 에러 처리 가능
} finally {
  // 반드시 실행되는 영역
}

💪 비동기 에러 잡기

• 의도한 에러를 잡지 못해요.

try {
	setTimeout(() => {
    throw new Error("에러가 발생했습니다.");
  }, 2000);
} catch (e) {
  console.log("에러 찾음!", e);
}

• 진짜 에러를 잡습니다.

setTimeout(() => {
  try {
    throw new Error("에러가 발생했습니다.");
  } catch (e) {
    console.log("에러 찾음!", e);
  }
}, 2000);
// 예외 캐치됨 Error: 에러가 발생했습니다.

💪 단축 평가 && / ??

• obj값이 존재할 경우 obj의 value를 받아요.

const value = obj && obj.value

• 피연산자가 null, undeifned인 경우 우항을 반환합니다.

// null이 아니였다면 null 자리에 있는 값을 value가 받겠죠?
const value = null ?? "anything"

💪 API 요청 시간이 너무 오래 걸리면...

• timeout을 구현해봐요.
• AbortController 는 웹 API로, 웹 요청을 취소할 수 있도록 도와줍니다.

const controller = new AbortController();
const signal = controller.signal;
const timeout = 8000;

async function requestWithTimeout(options) {
	// 오래 걸리면 controller.abort()로 fetch 요청을 취소할 수 있어요.
  const timer = setTimeout(() => controller.abort(), timeout)
  
	const resposne = await fetch('/uri', {
    ...options,
    signal,
  })
  if (!response.ok) {
    throw new Error('서버 에러)
  }
  const data = await response.json()

	// 데이터를 잘 받았으면 clearTimeout!
  clearTimeout(timer)
  return data
}

💪 childNodes VS children

• childNodes: 주어진 요소의 자식 노드 모음( collection, Nodelist )을 반환합니다.
• children: 호출된 요소의 모든 자식을 포함 children하는 htmlCollection를 반환합니다.

😒 무슨 소리인가요?

• NodeList는 non-live, HTMLCollection은 live 객체입니다.
• 따라서, HTMLCollection은 코드를 작성하는 과정 중에서 객체의 상태를 반영합니다. (주의가 필요한 대목)

💪 Closure

• closure를 이용한 throttle, Snackbar를 만들어봅시다!