From 061c47087bfe2c2333fbc971d7fe3e963006e214 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cj2hyun=E2=80=9D?= <wlgus9686@gmail.com>
Date: Sat, 4 Jan 2020 00:33:47 +0900
Subject: [PATCH] =?UTF-8?q?3week=20=EA=B3=BC=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                                     | Bin 0 -> 6148 bytes
 .idea/awesome-react-student.iml               |   8 ++
 .idea/inspectionProfiles/Project_Default.xml  |   7 +
 .idea/misc.xml                                |   6 +
 .idea/modules.xml                             |   8 ++
 .idea/vcs.xml                                 |   6 +
 .idea/workspace.xml                           | 126 ++++++++++++++++++
 3week/class/package-lock.json                 |  41 ++++--
 3week/class/src/App.js                        |   6 +-
 .../src/component/contentList/ContentList.js  |   2 +-
 3week/class/src/component/navbar/Navbar.js    |  22 ++-
 3week/class/src/container/Game.js             |  64 +++++++++
 3week/class/src/container/Search.js           |  55 ++++++++
 3week/class/src/index.js                      |   4 +-
 14 files changed, 335 insertions(+), 20 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 .idea/awesome-react-student.iml
 create mode 100644 .idea/inspectionProfiles/Project_Default.xml
 create mode 100644 .idea/misc.xml
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/vcs.xml
 create mode 100644 .idea/workspace.xml
 create mode 100644 3week/class/src/container/Game.js
 create mode 100644 3week/class/src/container/Search.js

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..60dcb00afa76bb0c973e39c669d74b7e4cb1a9d4
GIT binary patch
literal 6148
zcmeHK%}N6?5Kgq!v?BH()MGA!haOu0iiogOJ@h85=s`tyZPCSbBkk5jYh_<U-@r%l
z349!#NygGzdsUIlGWjNxnPl@p{upDt)@f82D=@|cC}JiL#W#ZOs3S5#o@qd?`?#uy
z>f8^NKN4#lmI2Ga-(vvRZkAP8!kX|6u3y{|HbIx(wdh|Ti1d^84XyN7|0WFDak>1)
zCnhu5sc9kdB0rlyaW7Tk#$McM*Syvd*7m&k(kFXgsjzQ*{z1@8P7CwfDvG@zYPNK8
z&}c%)@nH}(R8mu&sL|H_xTZmfoXDLP7P{TF>PAT}uWs~8vRkc|OLBE(z1Pc$;$mg1
zes+C#-+kykKIus?4x5#hIl@nP24i4~w{9y6RdfMf%*e9kF*LnE>o86I$p1@Ie~KeC
zt$a@tFMgp3s#boH0a^xP<`@6L4s98*4E#+7aDR}Xhz?<DP;VVj=qCVR2HaY}#)|{y
zNJ57&H3%&r+@u1UR8CI}ZqmUoDb68G4VrYu>G8p7WKJ&>u1AOdr4DD@F=$K6fMsBq
zfk{&>;Q7Bh{{26kWNVfI%fP>4fM<5xof=Gu&eoC1;aMv|&p=TyE;XoAprGSe8+a5i
cfNFs@i3XrUm>L8Rh`k7C8f;-1_)!Kv06=fG?EnA(

literal 0
HcmV?d00001

diff --git a/.idea/awesome-react-student.iml b/.idea/awesome-react-student.iml
new file mode 100644
index 000000000..c956989b2
--- /dev/null
+++ b/.idea/awesome-react-student.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 000000000..9c6941105
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,7 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="TsLint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 000000000..24eb271ab
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 000000000..62496779d
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/awesome-react-student.iml" filepath="$PROJECT_DIR$/.idea/awesome-react-student.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 000000000..94a25f7f4
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 000000000..06b5821cc
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="1255281e-c30c-4905-bb67-ce8a6a2b4e12" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/3week/class/src/container/Search.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/3week/class/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/3week/class/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/3week/class/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/3week/class/src/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/3week/class/src/component/navbar/Navbar.js" beforeDir="false" afterPath="$PROJECT_DIR$/3week/class/src/component/navbar/Navbar.js" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="JavaScript File" />
+      </list>
+    </option>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="IgnoredFileRootStore">
+    <option name="generatedRoots">
+      <set>
+        <option value="$PROJECT_DIR$/.idea" />
+      </set>
+    </option>
+  </component>
+  <component name="ProjectId" id="1VHMPTAMzDZ3GRBcpm903BOuTjT" />
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true">
+    <ConfirmationsSetting value="2" id="Add" />
+  </component>
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showExcludedFiles" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="ASKED_ADD_EXTERNAL_FILES" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="node.js.detected.package.eslint" value="true" />
+    <property name="node.js.detected.package.tslint" value="true" />
+    <property name="node.js.path.for.package.eslint" value="project" />
+    <property name="node.js.path.for.package.tslint" value="project" />
+    <property name="node.js.selected.package.eslint" value="(autodetect)" />
+    <property name="node.js.selected.package.tslint" value="(autodetect)" />
+    <property name="nodejs_package_manager_path" value="npm" />
+  </component>
+  <component name="ServiceViewManager">
+    <option name="viewStates">
+      <list>
+        <serviceView>
+          <treeState>
+            <expand />
+            <select />
+          </treeState>
+        </serviceView>
+      </list>
+    </option>
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="1255281e-c30c-4905-bb67-ce8a6a2b4e12" name="Default Changelist" comment="" />
+      <created>1576905542645</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1576905542645</updated>
+      <workItem from="1576905543835" duration="2371000" />
+      <workItem from="1576908787969" duration="1478000" />
+      <workItem from="1577067268260" duration="159000" />
+      <workItem from="1577100067095" duration="5705000" />
+      <workItem from="1577417847924" duration="4777000" />
+      <workItem from="1577469426745" duration="265000" />
+      <workItem from="1577494986345" duration="1899000" />
+      <workItem from="1577505305640" duration="597000" />
+      <workItem from="1577628609459" duration="295000" />
+      <workItem from="1577682774079" duration="791000" />
+    </task>
+    <task id="LOCAL-00001" summary="counter 컴포넌트 재사용은 하지 못했습니다.">
+      <created>1576905774841</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1576905774841</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="VcsManagerConfiguration">
+    <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
+    <MESSAGE value="counter 컴포넌트 재사용은 하지 못했습니다." />
+    <option name="LAST_COMMIT_MESSAGE" value="counter 컴포넌트 재사용은 하지 못했습니다." />
+  </component>
+  <component name="WindowStateProjectService">
+    <state x="284" y="37" key="CommitChangelistDialog2" timestamp="1576905774630">
+      <screen x="0" y="0" width="1440" height="900" />
+    </state>
+    <state x="284" y="37" key="CommitChangelistDialog2/0.0.1440.900@0.0.1440.900" timestamp="1576905774630" />
+    <state x="64" y="190" key="Vcs.Push.Dialog.v2" timestamp="1576905800537">
+      <screen x="0" y="0" width="1440" height="900" />
+    </state>
+    <state x="64" y="190" key="Vcs.Push.Dialog.v2/0.0.1440.900@0.0.1440.900" timestamp="1576905800537" />
+    <state x="122" y="219" width="683" height="476" key="find.popup" timestamp="1577419243855">
+      <screen x="0" y="23" width="1440" height="832" />
+    </state>
+    <state x="122" y="212" width="683" height="476" key="find.popup/0.0.1440.900@0.0.1440.900" timestamp="1576906056520" />
+    <state x="122" y="219" width="683" height="476" key="find.popup/0.23.1440.832@0.23.1440.832" timestamp="1577419243855" />
+    <state x="334" y="117" width="671" height="732" key="search.everywhere.popup" timestamp="1577468290439">
+      <screen x="0" y="0" width="1440" height="900" />
+    </state>
+    <state x="2034" y="140" width="1192" height="878" key="search.everywhere.popup/0.0.1440.900/1440.0.2560.1080@1440.0.2560.1080" timestamp="1577103653654" />
+    <state x="334" y="117" width="671" height="732" key="search.everywhere.popup/0.0.1440.900@0.0.1440.900" timestamp="1577468290439" />
+    <state x="385" y="179" width="670" height="676" key="search.everywhere.popup/0.23.1440.832@0.23.1440.832" timestamp="1576909730634" />
+  </component>
+</project>
\ No newline at end of file
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..ec56511ed 100644
--- a/3week/class/src/App.js
+++ b/3week/class/src/App.js
@@ -4,9 +4,12 @@ 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 불러옵니다.
 
+
 //router를 감싸고 있는 함수형 컴포넌트
 const Main =()=>(//라우팅할때 url이 중복되는것을 막기 위해서 switch 사용
 		<Switch>
@@ -21,7 +24,8 @@ const Main =()=>(//라우팅할때 url이 중복되는것을 막기 위해서 sw
           ":이름"" 이렇게 설정하면 url을 /view/123, /view/555 라고 해도 ContetnView 컴포넌트를 렌더링하게됩니다.
       */}
 			<Route  path="/view/:id" component={ContentView}></Route>
-
+            <Route path="/search" component={Search}></Route>
+            <Route path="/game" component={Game}></Route>
 		</Switch>
 	)
 
diff --git a/3week/class/src/component/contentList/ContentList.js b/3week/class/src/component/contentList/ContentList.js
index cb6a24d85..9880fed89 100644
--- a/3week/class/src/component/contentList/ContentList.js
+++ b/3week/class/src/component/contentList/ContentList.js
@@ -8,7 +8,7 @@ class ContentList extends Component {
 
   //한줄에 4개의 콘텐츠를 출력 하기 위해서 컴포넌트를 구성해주는 함수
   listRender() {
-    console.log(this.props.contents)
+    // console.log(this.props.contents)
   	var count = Math.ceil(this.props.contents.length/4)//현재 콘텐츠를 한줄에 4개씩 보여주면 몇줄이 나오는지를 구함
   	let component = [] //컴포넌트를 담을 배열 선언
   	for(let i =0;i<count;i++) {//반복문을 이용해서 한줄씩 컴포넌트를 만들어줌
diff --git a/3week/class/src/component/navbar/Navbar.js b/3week/class/src/component/navbar/Navbar.js
index 6eb06dcb3..53b313e12 100644
--- a/3week/class/src/component/navbar/Navbar.js
+++ b/3week/class/src/component/navbar/Navbar.js
@@ -15,12 +15,24 @@ class Navbar extends Component {
 
 		  <div className="collapse navbar-collapse" id="navbarSupportedContent">
 		    <ul className="navbar-nav mr-auto">
-		      <li className="nav-item active">
-		        {/* 
-					Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
-		        */}
+		      	<li className="nav-item active">
+					{/*
+						Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
+					*/}
 		        <Link className="nav-link" to="/">Home</Link>
-		      </li>
+		      	</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>
 		</nav>
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 (
+            <div className="mainView">
+                {/*<div>리스트 화면 영역</div>*/}
+                <p>Game</p>
+                <ContentList contents={this.state.contents}/>
+            </div>
+        );
+    }
+}
+
+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 (
+            <div>
+                <form onSubmit={this.handleSubmit}>
+                    <input type="text" value={this.state.keyword} onChange={this.handleChange}/>
+                </form>
+                <ContentList contents={this.state.contents}/>
+            </div>
+        );
+    }
+}
+
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로 감싸야함
 	<BrowserRouter>
 		<App />
 	</BrowserRouter>
-		),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.