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

- 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..