지영이의 개발 블로그

원본코드처럼 api를 무분별하게 호출하게 된다면 대규모 프로젝트에 투입하게 됐을때 네트워크통신이 계속해서 중첩되면서 버그가 생길수도 있고 시간과 비용을 낭비된다. 이를 위해 네트워크 통신하는 컴포넌트를 따로 모아놓은 class를 만들어 놓고 거기서 필요한 것을 컴포넌트 안에다가 injection + dependency하게 해주면 코드의 단순화 뿐만 아니라 재사용을 높혀줄 수있다 여기서 injection + dependency 이란 내부에서 만든 변수를 외부에서 넣어주는 것이다. Dependency 의존 관계를 가지는 상황에 대한 이해를 하시면 될 것 같습니다. 예를 들어 B 클래스에서A 클래스를 내부에 변수로 사용하게 됨으로써 B 클래스는 A 클래스에 의존관계가 생기게 됩니다. Injection 내부가 ..

두개의 request 처리 하는방법 (Axios의 multiple request) 2개 뿐만아닌 여러개도 가능하며 이 기능을 사용하면 묶어서 요청이 가능하고 한번에 데이터를 받아올 수 있다. axios .all([axios.get('https://codingapple1.github.io/shop/data2.json') ,axios.get('https://codingapple1.github.io/shop/data3.json')]) .then( axios.spread((res1,res2)=>{ const rest = res1.data; const resr = res2.data; const res = [...props.shoes, ...rest, ...resr]; const resp =res.slice(0,6..

1.video_item.js에서 선택한 li 의 정보를 가져와서 2.app.js에 usestate에 저장하고 3.detail 컴포넌트에 가져와서 표시

이번에는 검색창에 원하는 정보를 입력하면 해당하는 정보를 불러오는 검색기능을 만들어 보고자합니다. 입력값 state에 인풋에 입력한 값을 저장해줍니다 query 함수를 호출하면 원하는 api를 불러오는데 q=bts를 query로 바꿔주고 search로 우리의 param을 받아올수 있음 우리가 input에 입력한 값이 입력값에 저장이 되고 param 을 이용해서 onSeach로 App.js의 search를 실행해줌(query 함수 실행) 동일한 id를 가지고 있는 비디오가 리턴이 되는 오류가 발생 id가 object 형식으로 받아짐 여기서 videoId를 받아오고 싶기때문에 items 배열을 map함수를 써서 id 를 videoId로 덮어주는 새로운 배열을 만들어줌 //App.js function App(..

비디오의 popular 목록 api를 이용해 보여줘 보겠습니다 먼저 간단하게 제목을 가져와 보겠습니다 import React, { useEffect, useState } from 'react'; import './App.css'; import VideoList from './component/video_list/video_list'; function App() { const [videos, setVideos] = useState([]); console.log(videos) useEffect(()=>{ const requestOptions = { method: 'GET', redirect: 'follow' }; fetch("https://youtube.googleapis.com/youtube/v3/vide..

youtube api 불러오는법 1. google cloud platform 등록 https://code.google.com/apis/console/?hl=ko Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 프로젝트 만들기를 눌러준다. 프로젝트 이름을 youtube라 적어주고 만들기를 누른다. 생성한 프로젝트를 누르고 youtube를 검색 후에 youtube Data API v3을 눌러준다. 사용을 눌러준다. 2. 가장 인기있는 데이터 받아오기 아래의 url에 들어가자. https://developers.google.com/youtube/v3/docs/videos/li..