저번에 mock data를 받아오는 것과 실제 API를 받아오는 것을 class를 사용하여 로직을 짜보았다. but, 이렇게 해도 여전히 문제가 발생한다. 사용하는 곳(네트워크 통신이 일어나는 곳)마다 class 인스턴스를 생성해서 호출해야 한다는 것. 🥺 이렇게 되면 내부 로직이 노출되어 있을 뿐만 아니라, 계속 호출할 때마다 새로운 인스턴스를 생성해야 해서 성능면에서 좋지 못하다. 그렇기 때문에 이번에는 Context API를 사용해서 youtube API를 담당하는 우산을 하나 만들어 줄 거고 그 우산에서 딱 하나의 인스턴스를 가지고 있을 수 있도록 만들어 볼 것이다. 1. 먼저, src 폴더 내에 context 폴더 만들기. 그리고 YoutubeApiContext.js 파일 생성해주기. creat..

Youtube API를 이용해서 Youtube를 구현하고 있는 지금, mock data를 받아오는 과정에서 발생한 문제점들. Google에서 제공하는 Youtube API 실제 데이터를 받아오기 이전에, Postman을 통하여 데이터 요청을 보내고 넘겨받은 데이터를 실제 데이터인 것처럼 mock data로 만들어 사용했다. 총 만든 mock data는 4개. 1. ChannelDetailContent.json => 채널 상세 콘텐츠 목록. 2. ListByKeyword.json => 검색창에 무언가를 검색했을 때 받아올 동영상 목록. 3. ListByRelatedVideo.json => 연관되어 있는 동영상 목록. 4. ListByTrendVideo.json => 처음 youtube를 켰을 때 가장 먼저..

- Quiz : 핑하면 퐁하기! ✍ 지금까지 배운 내용을 바탕으로 핑을 입력하면 퐁하고 alert을 띄워줘보기! [해야할 것 순서 정리] 1. mock api 만들기 2. 버튼 만들기 3. fetch나 axios로 “http://localhost:5001/ping”으로 get 요청하기 4. 버튼 눌러서 확인하기 먼저, 프로젝트를 하나 생성해줌. 그리고 거기에 json-server를 설치해줌. yarn add json-server json-server를 설치했다면 이제 src 폴더 밖에 db.json을 만들어줌. 서버 내에서 ping으로 접근해야 하므로 key 값을 "ping"으로 해줌. - db.json { "ping": { "answer": "pong" } } 그 다음 5001로 서버를 열어줌. htt..

1. 네트워크 요청, http 프로토콜 1-1. Mock API 만들기 이번 시간은 Mock API를 만들고 테스트까지 해볼건데요! 테스트하기 위한 준비물이 있습니다. 바로바로 POST MAN이라는 프로그램이에요. 포스트맨 사이트에서 포스트맨을 설치하신 후 강의를 진행해주세요! (설치하러 가기→) 1) Rest API란? : mock API를 배우기 전에 잠깐! REST API가 뭔지 살짝만 읽어보고 가요. 😊 [REST API] REST API는 REpresentational State Transfer API의 약어예요. 소프트웨어 개발 아키텍쳐의 한 형태로, 클라이언트와 서버 사이 통신 방식 중 하나입니다. RESTful은 REST API를 제공하는 웹서비스를 말합니다. - REST 구성 자원: UR..