- {/*
- Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
- */}
+
+ {/*
+ Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
+ */}
Home
-
+
+
+ {/*
+ Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
+ */}
+ Search
+
+
+ {/*
+ Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
+ */}
+ Game
+
diff --git a/3week/class/src/container/Game.js b/3week/class/src/container/Game.js
new file mode 100644
index 000000000..f35d3f8ab
--- /dev/null
+++ b/3week/class/src/container/Game.js
@@ -0,0 +1,64 @@
+import React, {Component} from 'react';
+import ContentList from "../component/contentList/ContentList";
+import axios from 'axios';
+
+class MainView extends Component {
+ constructor(props) {
+ super(props);
+ this.state={
+ //전체 화면 영상
+ fullContent:{},
+ //영상 리스트
+ contents: []
+ };
+ }
+ //서버로 받은 데이터 가공하는 매서드
+ setContents=(data)=>{
+ let list=[]
+ data.items.forEach((item,index)=>{
+ list.push({id:item.id,name:item.snippet.title})
+ })
+ return list
+ }
+ componentDidMount() {
+ this.fetchYoutube();
+ }
+
+ //유투브 데이터 가져오기
+ fetchYoutube=()=>{
+ const maxResults= 30
+ const token = 'AIzaSyBbqaKKQoPQ_3njWfhavWM7YrV7M_M1C68'
+ const url = 'https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular' + '&videoCategoryId=' + 20 + '&key=' + token + '&maxResults=' + maxResults;
+ axios.get(url)
+ .then(
+ //데이터 전달되었는지 확인
+ // response=>{console.log("success");}
+ ({data})=>{
+ // 데이터 확인(유투브에서 가져오는 데이터 중에서 data만 가져오기)
+ console.log(data);
+ // 위의 setContents 메서드로 데이터 받은것 재가공
+ const list = this.setContents(data)
+
+ this.setState({
+ contents:list.slice(1,list.length)
+
+ })
+ console.log(this.state.contents);
+
+ }
+
+ )
+ }
+
+ render() {
+ return (
+
+ {/*
리스트 화면 영역
*/}
+
Game
+
+
+ );
+ }
+}
+
+export default MainView;
\ No newline at end of file
diff --git a/3week/class/src/container/Search.js b/3week/class/src/container/Search.js
new file mode 100644
index 000000000..405369e4f
--- /dev/null
+++ b/3week/class/src/container/Search.js
@@ -0,0 +1,55 @@
+import React, {Component} from 'react';
+import axios from 'axios';
+import ContentList from '../component/contentList/ContentList.js';
+
+export default class Search extends Component {
+ state ={
+ keyword:"",
+ contents:[]
+ }
+ handleChange=(e)=>{
+ this.setState({keyword:e.target.value})
+ }
+ handleSubmit=(e)=>{
+ this.fetchSearch(this.state.keyword)
+ e.preventDefault()
+ //새로고침 방지하기 위해 이벤트 막음 (이벤트 버블링)
+ }
+ setContents = (data) => {
+ let list = []
+ data.items.forEach((item, index) => {
+ if(item.id.videoId) {
+ list.push({id:item.id.videoId,name:item.snippet.title})
+ }
+ })
+ return list
+ }
+ fetchSearch=async (keyword)=>{
+ const maxResults= 30
+ //maxResult = 몇개를 불러올지 지정해준 것
+ const token = 'AIzaSyBbqaKKQoPQ_3njWfhavWM7YrV7M_M1C68'
+ //google api key 발급받아서 다시 해보기
+ try{
+ //데이터 불러오기
+ const {data} = await axios.get('https://www.googleapis.com/youtube/v3/search?q='+keyword+'&part=snippet&key='+token+'&maxResults='+maxResults)
+ //data만 꼭 집어서 가져오는 것
+ console.log(data);
+ //id와 title 형태로 가공
+ this.setState({contents:this.setContents(data)})
+
+ }catch{
+
+ }
+ }
+ render() {
+ return (
+
+
+
+
+ );
+ }
+}
+
diff --git a/3week/class/src/index.js b/3week/class/src/index.js
index fe613d6f1..a9774d1ec 100644
--- a/3week/class/src/index.js
+++ b/3week/class/src/index.js
@@ -6,12 +6,12 @@ import { BrowserRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
ReactDOM.render((
- // 모든 컴포넌트에서 react router가 동작하기 위해서는 최상위 컴포넌트를
+ // 모든 컴포넌트에서 react router가 동작하기 위해서는 최상위 컴포넌트를
//BrwoserRouter로 감싸야함
- ),document.getElementById('root'));
+),document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.