내배캠 TIL 2023.01.27

스냅샷 단축키!

윈도우 + shift + s 

 

 "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=PL1BztTYDF-QNrtkvjkT6Wjc8es7QB4Gty&maxResults=50&key=AIzaSyCHT-JZ1WdmBmyKJEecK8jpQumVDvuVtxI"

 

supabase에서 데이터 베이스에서 새로운 테이블을 만들었다. 그런데 값이 배열인 경우에 어디에 넣어야할지 몰라서 헤메다가, ㄷㅇ 님과 ㅅㅎ님한테 물어봐서 배열값을 넣을 수 있었다.

 

https://supabase.com/docs/guides/database/arrays

https://supabase.com/docs/guides/database/arrays

 

 

(JavaScript) map, reduce 활용하기 - 함수형 프로그래밍 - ZeroCho Blog

https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

 

 

image가 skeleton 넣어놓기

 

cumulative layout shift

로딩하는 중에는 비어있다가

갑자기 탁 뜨면 web vital이 안 좋다고 평가한다.

flex를 넣었더니 동영상 이미지들이 제한된 가로 길이 안에 꾸겨져서 나오고 스크롤도 안되는 문제가 발생했다.

 

flex와 관련된 코드들을 다 지우고

 

scroll-x-auto로 가로 스크롤을 주고

inline-block을 넣어주니 실행되었다. tailwind도 역시 기본 css 지식이 있어야 잘 하는 것 같다.

<ul className="overflow-x-auto whitespace-nowrap no-scrollbar">
        {data?.data.items.map((i: any, idx: number) => {
          return (
            <li key={idx} className="inline-block mx-3">
              <a
                href={`https://www.youtube.com/watch?v=${i.snippet.resourceId.videoId}`}
              >
                <img alt="" src={i.snippet.thumbnails.medium.url} />
              </a>
            </li>
          );
        })}
      </ul>

 

 

 

가로 스크롤 없앨 때 쓴 방법

https://dev.to/derick1530/how-to-create-scrollable-element-in-tailwind-without-a-scrollbar-4mbd

 

 

youtube API 참고 사이트

 

https://han-py.tistory.com/432 

[youtube api] 유튜브 데이터 가져오기

https://velog.io/@boyfromthewell/React-Youtube-API-%EA%B0%80%EC%A7%80%EA%B3%A0-%EB%86%80%EA%B8%B0-2#%EC%9E%AC%EC%83%9D%EB%AA%A9%EB%A1%9D%EC%95%88%EC%9D%98-%EB%8F%99%EC%98%81%EC%83%81-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

[React] Youtube API 가지고 놀기 2

 

https://stackoverflow.com/questions/51956099/how-to-get-video-url-with-youtube-apiv3

How to get video url with youtube api(v3)

 

api 요청이 유효한지 테스트 해볼 수 있는 구글 공식 사이트

https://developers.google.com/youtube/v3/docs/playlistItems/list?hl=ko 

PlaylistItems: list  |  YouTube Data API  |  Google Developers

 

https://poiemaweb.com/jsdoc-type-hint

JSDoc을 사용하여 자바스크립트에 타입 힌트 제공하기 | PoiemaWeb

 

코어 자바스크립트 (고전)

 

https://webisfree.com/2020-10-31/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4-%EA%B0%92%EC%9D%84-%EC%B0%BE%EC%95%84-%EB%8B%A4%EB%A5%B8-%EA%B0%92%EC%9C%BC%EB%A1%9C-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

자바스크립트 배열 값을 찾아 다른 값으로 변경하기

https://www.daleseo.com/react-suspense/

 

.env를 gitignore에 넣어놓았기 때문에  .env에 설정해준 키들을 vercel에 넣어줘야한다. 

ㅅㅎ님 배포가 성공했는데 이미지 몇개가 불러오지 않아서, github 이슈에다가 이미지 파일을 올리고 절대경로로 이미지 src를 변경해주었다. 

 

 

JSdoc

/**

@params a:string

@params  {number} a

/

 

function testFc (a./숫자관련 메서드 불러와짐){

 

}