리액트 / 2주차 강의 노트 / Youtube clone coding

리액트 기본개념 끝나고 

배포하기 끝나고 post css 맛보기 하고 

api소개, postman으로 youtubeapi 코드만들고 

유튜브 프로젝트 계획하기 

https://minyeokang.github.io/youtube/

이 사이트는 인기있는 영상 리스트를 받아와서 보여주고 

검색도 가능하며 비디오를 클릭하면 비디오가 나오고 리스트는 오른쪽으로 리스트형식으로 나타냄 

 

큰 틀은 이러하다

 

1. postman에 key랑 내 key넘버 적고 
variables 에 기입하고 
code에 보면 프로그램별로 어떻게 작성해야하는지 나오는데 
그걸 app.jsx에 기입 -> api 사용가능 

앞으로 컴포넌트에 폴더를 만들어서 이 안에 
module.css랑 컴포넌트랑 같이 넣어서 구분할거 

2. 일단 popular list 만들려면 
제일작은 아이템 li 그리고 ul 이렇게 컴포넌트 구조를 짜고 
li에 썸네일 타이틀 채널 그려넣고 
ul에 map으로 받아와서 videoitem 컴포넌트 그려넣고 
video  prop주고
이것도 prop으로 videos를 받아서 박아주는데 
그럴려면 app.jsx에서 ul컴포넌트에  videos prop심어줌

그리고 스타일들은 항상 import styles from 해야하고 
= 쓸때 {styles.name}

3. 이제 헤더부분 로고랑 인풋, 버튼 
이부분은 구조는 간단한데 간단하지 않음 

이거를 인풋에서 쿼리를 검색하는걸로 api를 불러야되는데
작성하는 부분이 감은 오는데 설명이 안되는걸 보면 
아직 어려운거같음 

4. service  폴더 따로빼서 즉
첨에 postman 에서 가져온 구문을 
네트워크 통신하는 파일 따로 만들어서 관리하고 

내 api key값이 노출되면 안되니까 
env라는 파일을 만들어서 여기에 키값 넣고 
gitignore에 이 파일명 기입하고 
이거를  index.js에 새 변수명해서 인자로 키값 넣어줬음 
이거는 흐름이해만 하고 나중에 계속 프로젝트를 
만들면서 이해해야할듯함