From dc97081c3dd9c0126fa918c8542b9d01c337b624 Mon Sep 17 00:00:00 2001 From: feb4th Date: Thu, 2 Jan 2020 00:06:54 +0900 Subject: [PATCH] 3week --- 3week/class/package-lock.json | 41 +++++++++++---- 3week/class/src/App.js | 5 +- 3week/class/src/component/navbar/Navbar.js | 12 +++++ 3week/class/src/container/Game.js | 61 ++++++++++++++++++++++ 3week/class/src/container/MainView.js | 2 +- 3week/class/src/container/Search.js | 56 ++++++++++++++++++++ 6 files changed, 164 insertions(+), 13 deletions(-) create mode 100644 3week/class/src/container/Game.js create mode 100644 3week/class/src/container/Search.js diff --git a/3week/class/package-lock.json b/3week/class/package-lock.json index 0a0f4e6fb..62791e11f 100644 --- a/3week/class/package-lock.json +++ b/3week/class/package-lock.json @@ -4760,7 +4760,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -4778,11 +4779,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4795,15 +4798,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4906,7 +4912,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4916,6 +4923,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4928,17 +4936,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4955,6 +4966,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5027,7 +5039,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5037,6 +5050,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5112,7 +5126,8 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5142,6 +5157,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5159,6 +5175,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5197,11 +5214,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.2", - "bundled": true + "bundled": true, + "optional": true } } }, diff --git a/3week/class/src/App.js b/3week/class/src/App.js index 762886089..4ba2ea04a 100644 --- a/3week/class/src/App.js +++ b/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 컴포넌트를 렌더링하게됩니다. */} - + + ) diff --git a/3week/class/src/component/navbar/Navbar.js b/3week/class/src/component/navbar/Navbar.js index 6eb06dcb3..9358514bf 100644 --- a/3week/class/src/component/navbar/Navbar.js +++ b/3week/class/src/component/navbar/Navbar.js @@ -20,6 +20,18 @@ class Navbar extends Component { 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..2d687f1f0 --- /dev/null +++ b/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 ( +
    + +
    + ) + } +} \ No newline at end of file diff --git a/3week/class/src/container/MainView.js b/3week/class/src/container/MainView.js index b79a710d5..986accd66 100644 --- a/3week/class/src/container/MainView.js +++ b/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만 가져옴 diff --git a/3week/class/src/container/Search.js b/3week/class/src/container/Search.js new file mode 100644 index 000000000..bb074f9b8 --- /dev/null +++ b/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 ( +
    +
    + +
    + +
    + ) + } +} \ No newline at end of file