3week

3week/class/src/App.js

@@ -4,6 +4,8 @@ import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';//bootstrap css를 사용하기 위해서 불러옵니다.
 import Navbar from './component/navbar/Navbar.js';
 import MainView from './container/MainView.js';
+import Search from './container/Search.js';
+import Game from './container/Game.js';
 import ContentView from './component/contentView/ContentView.js';
 import {Switch, Route } from 'react-router-dom'//router를 사용하기 위해서 react router dom 불러옵니다.
 
@@ -21,7 +23,8 @@ const Main =()=>(//라우팅할때 url이 중복되는것을 막기 위해서 sw
           ":이름"" 이렇게 설정하면 url을 /view/123, /view/555 라고 해도 ContetnView 컴포넌트를 렌더링하게됩니다.
       */}
 			<Route  path="/view/:id" component={ContentView}></Route>
-
+      <Route path='/search' component={Search} />
+      <Route path='/game' component={Game} />
 		</Switch>
 	)
 

3week/class/src/component/navbar/Navbar.js

@@ -20,6 +20,18 @@ class Navbar extends Component {
 					Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
 		        */}
 		        <Link className="nav-link" to="/">Home</Link>
+		      </li>
+			  <li className="nav-item active">
+		        {/* 
+					Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
+		        */}
+		        <Link className="nav-link" to="/search">Search</Link>
+		      </li>
+			  <li className="nav-item active">
+		        {/* 
+					Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
+		        */}
+		        <Link className="nav-link" to="/game">Game</Link>
 		      </li>
 		    </ul>
 		  </div>

3week/class/src/container/Game.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import axios from 'axios'
+import ContentList from '../component/contentList/ContentList.js'
+
+export default class Game extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            contents : [] // 하단의 리스트에 들어갈 콘텐츠를 가지는 state
+        };
+      }
+
+  // 서버로 부터 받은 데이터를 내가 원하는 형태로 변경 하는 함수
+  // {id: , name: } 형식으로 모든 데이터들을 변환
+    setContents = (data) => { 
+     let list = []
+      data.items.forEach((item, index) => {
+          list.push({id:item.id,name:item.snippet.title})
+      })
+      return list
+    }
+
+  //컴포넌트 렌더링이 완료된 후 유튜브에서 데이터 불러옴
+    componentDidMount() {
+        this.fetchYoutube()
+    }
+
+  //유튜브에 ajax 통신을 해서 데이터를 불러 오는 함수
+    fetchYoutube = () => {
+        //axios를 이용해서 유튜브에 영상 목록을 달라고 요청
+      axios.get('https://www.googleapis.com/youtube/v3/search?q=게임&part=snippet&chart=mostPopular&key=AIzaSyASlUxKp9-sRxTnJUghY0f9D0ia0Iqp91U&maxResults=30')
+      .then(({data}) => {//유튜브로 부터 요청한 데이터를 전달 받으면 then으로 데이터를 받음
+                          //디스트럭쳐링을 통해서 유튜브로부터 받은 데이터중에서 data만 가져옴 
+
+          const list = this.setContents(data)//받아온 데이터를 내가 원하는 형태로 가공
+
+          this.setState({// 가공한 데이터로 지금 바로 실행할 데이터와, 목록에 보여줄 데이터를 state에 저장
+              contents:list.slice(1,list.length),//slice 함수는 배열형 데이터를 첫번째인자부터 두번째인자 전까지를 반환해주는 함수 입니다.
+              fullContent:list[0]//가져온 데이터중 첫번째 데이터를 화면에서 실행 시킵니다.
+          })
+      })
+    }
+    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
+     }
+
+    render() {
+        return (
+            <div>
+                <ContentList contents={this.state.contents} />
+            </div>
+        )
+    }
+}

3week/class/src/container/MainView.js

@@ -98,7 +98,7 @@ class MainView extends Component {
 //유튜브에 ajax 통신을 해서 데이터를 불러 오는 함수
   fetchYoutube = () => {
   	//axios를 이용해서 유튜브에 영상 목록을 달라고 요청
-    axios.get('https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&key=AIzaSyC-v1sIG2Wn3YnoD_7_bBS4zPDceDLKmLY&maxResults=21')
+    axios.get('https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&key=AIzaSyASlUxKp9-sRxTnJUghY0f9D0ia0Iqp91U&maxResults=21')
     .then(({data}) => {//유튜브로 부터 요청한 데이터를 전달 받으면 then으로 데이터를 받음
     					//디스트럭쳐링을 통해서 유튜브로부터 받은 데이터중에서 data만 가져옴 
 

3week/class/src/container/Search.js

@@ -0,0 +1,56 @@
+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()
+    }
+    // preventDefault : event 하지마!
+
+    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
+        const token = 'AIzaSyASlUxKp9-sRxTnJUghY0f9D0ia0Iqp91U'
+        // var는 너무 글로벌해서 관리가 어려워서 사용 x, let 보다 const 를 자주 사용
+        try {
+            const {data} = await axios.get('https://www.googleapis.com/youtube/v3/search?q='+ keyword +'&part=snippet&key='+ token +'&maxResults='+maxResults)
+            // 여러 값들 중에서 data 부분만 저장하겠다
+            this.setState({contents: this.setContents(data)})
+        } catch {
+
+        }
+    }
+
+
+    render() {
+        return (
+            <div>
+                <form onSubmit={this.handleSubmit}>
+                    <input type='text' value={this.state.keyword} onChange={this.handleChange} />
+                </form>
+                <ContentList contents={this.state.contents} />
+            </div>
+        )
+    }
+}