React

이번에는 search 헤더를 만들 것이다. * favicon.ico는 ico 라는 것은 폴더를 열어서 보면, 다양한 사이즈가 묶여져 있는 파일이다 브라우저나 모바일, 데스크탑 상관 없이 원하는 아이콘을 골라서 사용할 수 있다. https://convertio.co/kr/png-ico/ PNG ICO 변환 (온라인 무료) — Convertio png 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요. convertio.co 이렇게 png - ico 로 변환하는 사이트도 있다. png를 골라서 ico로 바꾸면 된다. search header는 video 위에 보여져야 한다. (맨 상단에) 일단 기본적인 search header.j..

app이라는 컴포넌트 안에, video 리스트라는 컴포넌트를 만들어서, 컴포넌트 안에 각각의 비디오 아이템을 보여주면 된다. 박스 구조로 나타내면 이런 형식이다. 비디오 리스트 컴포넌트 안에 각각의 비디오 아이템 상자가 있는 모습이다. 처음에는 온전한 카드 형식보다 일단 간단한 타이틀만 보여질 수 있도록 가져와본다. 우선, app이라는 컴포넌트가 사용자에게 보여질 때 유튜브로부터 데이터를 받아와야 한다. 일단 그러기 위해서는 데이터를 받아와서 저장할 수 있는 state 가 있어야 한다. 간단하게 react hook을 사용하면 useState() 를 사용하면 된다. const [videos, setVideos] = useState([]) 를 통해서 videos를 저장하고, setVideos를 통해 비디오를..

https://www.postman.com/ Postman API Platform | Sign Up for Free Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster. www.postman.com 포스트맨 사이트에서 포스트맨을 사용할 수 있다. 어플리케이션도 다운받아서 사용할 수 있다. 포스트맨은 api 를 개발할 때, 빠르게 개발할 수 있고 또 관련 문제를 찾는데도 빠르게 찾을 수 있고 api를 협력해서 함께 만들때도 효율적으로 만들 수 있다. c..

다양한 api들을 사용할 때, 어떻게 문서를 보면 좋은 지, 어떤식으로 api를 알아볼 수 있는 지에 대해서 알아본다. 이번 영상을 통해서 다른 api를 필요로 할 때 유용하게 사용할 수 있다. REST API 백엔드와 클라이언트에서 어떤 방식으로 커뮤니케이션 할 지 결정(정의) 해 놓은 api 이다. get, post, put, delete 같은 것이다. youtube api 사이트에 들어가면, 전반적으로 youtube api가 어떻게 쓰이는 지 나와있다 https://developers.google.com/youtube?hl=ko YouTube | Google Developers Add YouTube functionality to your sites and apps. developers.google...

우리는 youtube를 만들것이기 때문에 youtube api를 가져와야 한다. youtube api는 비교적 자세한 설명으로 잘 나와있기 때문에 공식 문서를 적극 활용하면 좋다. https://developers.google.com/youtube/v3/getting-started?hl=ko 시작하기 | YouTube Data API | Google Developers 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 소개 이 문서는 YouTube와 상호작용할 수 있는 애플리케이션을 개발하려는 개발자를 위해 작성되었 developers.google.com 클론코딩 같은 것을 할 때나, 어떠한 어플의 기능을 참조하거나 사용하고 싶을 때, twitter api, yout..

지난번에 만들어 놓은 template 를 이용해서 기본 틀을 작업하고 youtube-clone의 프로젝트 셋업을 할 것이다. 기본적인 프로젝트를 생성할 때, 만들려는 폴더에서 터미널 > cp -R template(복사하고싶은 폴더) youtube(새로운폴더이름) 이런 명령어를 사용하면, 폴더 안의 것들이 복사가 된다. 이제 우리는 기본 틀인 template를 youtube 프로젝트에 적용했다.