[1단계 - 나만의 유튜브 강의실] 지그(송지은) 미션 제출합니다.

[zigsong]

안녕하세요! 페어 심바와 유튜브 미션 진행한 지그입니다.
기간에 맞추어 급하게 미션을 진행하느라 코드에 실수도 많고 깔끔하지 못한 부분들이 많을 것이라고 생각됩니다 😭
시간 내서 계속 리팩토링을 해 보도록 하겠습니다.

리뷰 잘 부탁드리겠습니다 😉

데모 페이지

검색 결과 스크롤

동영상 저장

최근 검색어 클릭

검색 결과 없음

🤔 고민한 내용

1. 다른 크루의 코드를 참고하여 dom.js를 custom library로 구현했는데, 쓰다보니 파일이 방대해져 오히려 가독성과 효율(?)이 떨어지는 것 같다는 생각이 들었습니다. 페어와 더욱 고민하여 내용과 사용 방식을 바꿔봐야겠지만, 리뷰어님께서는 해당 라이브러리를 어떻게 생각하시는지 여쭤보고 싶습니다.

2. SavedVideosView에서 처음에 저장된 동영상의 id들을 가지고 해당 동영상들을 불러오는 request를 더 보내는데, 이전에 이미 api를 통해 검색 결과로 불러온 동영상들을 저장하고 다시 불러올 때 또 다시 api를 호출해야 하는 부분에서 조금 아쉬운 점이 있습니다.

3. 많은 기능들을 구현하다보니 YoutubeController가 조금 방대해진 느낌이 있습니다. 추후 단계를 진행하기 전에 controller도 view와 마찬가지로 분리하는 방식이 괜찮을지 여쭤보고 싶습니다!

4. api 키를 담은 파일을 gitignore에 추가해서 github 데모 페이지를 만들 수 없어 netlify를 이용했습니다. 다만 완전하지는 않은 방안이라 데모 페이지의 콘솔에서 api key가 노출되어 있긴 합니다 😂 빠르게 배포하려다 보니 최선의 해결책을 찾지 못한 것 같습니다.

[ysm-dev]

다른 크루의 코드를 참고하여 dom.js를 custom library로 구현했는데, 쓰다보니 파일이 방대해져 오히려 가독성과 효율(?)이 떨어지는 것 같다는 생각이 들었습니다. 페어와 더욱 고민하여 내용과 사용 방식을 바꿔봐야겠지만, 리뷰어님께서는 해당 라이브러리를 어떻게 생각하시는지 여쭤보고 싶습니다.

• 동일한 피드백을 드린적이있어서 링크로 대체합니다! ([2단계 - 행운의 로또 미션] 곤이(김기융) 미션 제출합니다. javascript-lotto#40 (review))

SavedVideosView에서 처음에 저장된 동영상의 id들을 가지고 해당 동영상들을 불러오는 request를 더 보내는데, 이전에 이미 api를 통해 검색 결과로 불러온 동영상들을 저장하고 다시 불러올 때 또 다시 api를 호출해야 하는 부분에서 조금 아쉬운 점이 있습니다.

• HTTP Cache 에 대해 공부해보시면 좋을것같아요.

많은 기능들을 구현하다보니 YoutubeController가 조금 방대해진 느낌이 있습니다. 추후 단계를 진행하기 전에 controller도 view와 마찬가지로 분리하는 방식이 괜찮을지 여쭤보고 싶습니다!

• 크다고 생각되면 분리하는건 좋은 선택입니다 👍

api 키를 담은 파일을 gitignore에 추가해서 github 데모 페이지를 만들 수 없어 netlify를 이용했습니다. 다만 완전하지는 않은 방안이라 데모 페이지의 콘솔에서 api key가 노출되어 있긴 합니다 😂 빠르게 배포하려다 보니 최선의 해결책을 찾지 못한 것 같습니다.

• 별도의 서버가 없이 프론트엔드만 있는 프로젝트에서는 완벽하게 API KEY를 숨길 수 없습니다. 이렇게 개인이 key를 발급받아 사용하는 Third-party API key의 경우에는 별도 서버에 해당 키를 두고, 그 서버를 proxy로 api를 요청하거나, 혹은 개인이 발급받은 API key를 그냥 노출하고 API 키에 다른 보안 정책(referer 등)을 추가하는 방법 밖에 없습니다. (아마 Youtube API key를 발급 받을 때 여러가지 보안 정책을 추가할 수 있을거예요)

수고하셨습니다 ! 👍

[ysm-dev]

👀

[ysm-dev]

👀

[zigsong]

😂🤣

[ysm-dev]

👀
커밋하기전엔 항상 커밋하는 코드들을 한번더 리뷰하는 습관을 들이시면 좋을것같아요 👍

[zigsong]

😂😂 피곤했었나봐요 캐치해주셔서 감사합니다!

[ysm-dev]

👍

[ysm-dev]

#3 (comment)
비슷한 피드백이 있어서 링크 남깁니다 👍

[zigsong]

URLSearchParams를 사용하여 수정했습니다. 새로운 내용 알아갑니다. 감사합니다 🤓

[ysm-dev]

img 태그를 작성할때는 항상 alt 속성을 같이 작성하는 습관을 들이시면 좋습니다. 👍

[ysm-dev]

document.querySelector 에 파라미터를 넘기지 않거나 string이 아닌 타입을 넣으면 어떻게될까요?
woowacourse/javascript-lotto#40 (comment)

[zigsong]

코멘트 참고해서 Error를 던져주도록 수정해보았습니다! 감사합니다 🙃

[ysm-dev]

실제 검색이 되었는지까지 확인해야하지않을까요? 👀

[zigsong]

cypress의 메소드를 잘 활용할 줄 몰라 넘겼는데 다른 크루에게 남겨주신 리뷰 참고하여 작성해보았습니다!

[ysm-dev]

1. 만약 JSON.stringify함수에 직렬화 할 수 없는 값(ex. undefined, function, Symbol, cyclic object) 등이 들어오면 어떻게 될까요? 그런상황은 어떻게 예외처리 해야할까요?
2. localStorage에 array로 저장하는것과 object로 저장하는것에 어떤차이가있을까요?

[zigsong]

1번의 문제는 페어의 리뷰를 보고 먼저 수정했습니다!
2번의 경우 검색해보니, localStorage에 array로 저장하면 join이 된 채로 저장되기 때문에
stringify를 쓰지 않고 저장한 후, 값을 가져올 때는 split을 사용하는 방법도 있다는 것을 알게 되었습니다!
감사합니다 👾

[ysm-dev]

👀

[zigsong]

😂

[zigsong]

이 파일은 필요하지 않아 삭제했습니다!

[ysm-dev]

고생하셨습니다! 👏 다음단계에서 봬요!

[zigsong]

학습로그

custom dom library

• 추상화 수준이 높아질수록 DOM 라이브러리는 더욱 복잡하고 비대해진다. 문서화와 유지보수가 중요하다
• jQuery, React 등 잘 만들어진 라이브러리를 참고해보자
• 파일 링크
• 링크
  • <https://gomakethings.com/how-to-create-your-own-vanilla-js-dom-manipulation-library-like-jquery/

HTTP Cache

• 이전에 가져온 리소스들을 재사용하여 성능 향상
• 저장소 내에 리소스를 저장하여, 이후 요청 시 요청을 가로채 서버로부터 리소스를 다시 다운로드하는 대신 리소스의 복사본을 반환
• Cache-Control
• 캐시전략은 서버에서 응답을 내려줄 때 HTTP 헤더에 포함됨
• 링크
  • https://developer.mozilla.org/ko/docs/Web/HTTP/Caching
  • https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control
  • https://pjh3749.tistory.com/264

promise-then보다는 async-await (ref)

• 동기적 코드 흐름으로 개발 가능
• 코드의 간결함
• try/catch로 에러 핸들링이 가능하며, 에러 발생 위치를 알기 쉽다
• 동작의 분기를 간편하게 작성할 수 있다
• 링크
  • https://ithub.tistory.com/223
  • https://medium.com/@constell99/자바스크립트의-async-await-가-promises를-사라지게-만들-수-있는-6가지-이유-c5fe0add656c

throttle (ref)

export default function throttle(callback, delay) {
  let ticking;

  return function () {
    if (ticking) return;

    ticking = setTimeout(() => {
      ticking = null;
      callback.apply(this, arguments);
    }, delay);
  };
}

callback.apply()를 쓰는 이유

• 현재 throttle 함수 내부의 this를 참조한 상태로(ticking을 기억한 상태로) callback을 실행하기 위해

• 링크

  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

JSON.stringify와 LocalStorage의 저장값 - array, object (ref)

• localStorage에 배열을 바로 저장하면 join된 형태로 저장된다. (1,2,3,4)
  • 이때 저장된 값은 JSON string 타입이 아니기 때문에 JSON.parse를 호출할 필요없이 즉시 사용 가능하다. (JSON.parse 호출 시 에러 발생)
• localStorage에 배열을 JSON.stringify로 변환하여 저장하면 배열 형태로 저장된다 ([1,2,3,4])
• JSON.stringify의 인자에 잘못된 값이 들어왔을 때 예외처리(default 부여) (ref)
  • 순환 참조 (cyclic object vaue)를 발견할 경우 TypeError가 발생한다
  • undefined, 함수, 심볼(symbol)은 변환될 때 생략되거나(객체 안에 있을 경우) null 로 변환된다(배열 안에 있을 경우)
• JSON.stringify & JSON.parse를 쓰는 이유
  • 직접 개게를 선언하는 객체 리터럴 방식보다, 객체의 내용을 문자열로 변환 후 JSON.parse 메소드를 이용하는 것이 더욱 빠르다.
  • JSON 문법이 JavaScript 문법보다 간단하고, 문법 파싱에 리소스가 덜 들기 때문이다.
• 링크
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
  • https://wormwlrm.github.io/2019/12/04/Why-JSON-parse-is-faster-than-object-literal.html

기타

api key 관리

- 프론트엔드만 있는 프로젝트에서는 완벽하게 API key를 숨길 수 없다.
- 별도 서버에 키를 두고, 그 서버에 proxy로 api를 요청하거나 api 키에 다른 보안 정책(referer 등)을 추가하는 방법 밖에 없다.

toLocaleString

this._publishedAt.toLocaleDateString('ko-KR', options);

• 지역별로 다른 객체로 재정의 (문자열로 반환)
• 링크
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString

URLSearchParams (ref)

• URL의 쿼리들을 조합하는 유용한 메소드를 제공한다

  const searchParams = new URLSearchParams({
    key: youtubeKey,
    type: 'video',
    part: 'snippet',
    maxResults: VALUE.CLIPS_PER_SCROLL,
    q: keyword,
  });
  
  if (pageToken) {
    searchParams.set('pageToken', pageToken);
  }

• 링크
  • https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

img 태그 작성 시 alt 명기하기