Network3 프론트엔드가 백엔드와 소통하는 법 (feat. Fetch API / Axios 비교) 프리온보딩 지원 과제로 todo 앱을 만들던 중, 기술에 대한 고민 없이 단순히 fetch 로 네트워크 요청을 보내게 되었다. 그러던 중, POST 요청의 body에 담아서 보내야 하는 데이터 타입이 헷갈렸고, 네트워크 탭의 에러메세지를 보며 디버깅하는데에 시간을 꽤 쓰게 되었다. 그래서 fetch API, axios 라이브러리 등 이미 배웠지만 까먹고 헷갈리는 네트워크 요청에 대해 한번 공부해서 정리해보고자 한다! 이 둘을 비교하고, 어떤 상황에서 어떤 기술을 선택해야 하는지의 기준을 정리해볼 것이다. Fetch API / Axios는 무엇인가? 공통점 - promise 기반의 HTTP 클라이언트이다. 네트워크 요청을 이행했을 떼, resolve / reject 할 수 있는 promise가 반환된다... 2023. 6. 13. 네트워크 02 AJAX 1. 현재의 무드: 매일회고 쓰고 온 직후라 생략. 반성모드임ㅎㅎ 부트캠프 컨텐츠 외에도 적극적으로 찾아서 이해의 폭과 깊이를 넓히면서 공부하자!! 2. 오늘 학습한 내용 중 키워드: AJAX 3. 오늘 학습한 내용 요약 *서버: 유저가 데이터를 요구하면 데이터를 보내주는 프로그램 -> 원하는 데이터 URL로 GET 요청을 하면 해당 데이터를 준다. GET 요청을 날리는 법 1) 주소창에 URL 쓰기 2) form 태그, 버튼으로 GET 요청 -> 브라우저 전체가 새로고침됨 3) AJAX로 GET 요청 -> 새로고침없이 서버에게 GET요청하는 자바스크립트 코드! AJAX 란? Asynchronous JavaScript And XMLHttpRequest -> JavaScript, DOM, Fetch, XM.. 2022. 12. 6. 네트워크 01 기초 / HTTP 1. 현재의 무드: 낯선 용어 천지이지만...! 저번 주에 붙캠에서 배운 파트는 다시 복습하고 80% 이상 이해하고 넘어가자! 2. 오늘 학습한 내용 중 키워드: 웹 애플리케이션 아키텍쳐 / API / URL, URI / IP, PORT / 도메인, DNS / HTTP 3. 오늘 학습한 내용 요약 웹 애플리케이션 아키텍처 클라이언트 - 서버 아키텍처 (2-tier architecture) 서버 (server) - 제공(serve) 하는 주체 (리소스가 존재하는 곳) 클라이언트 (client) - 리소스를 사용하는 앱 리소스가 존재하는 곳 (서버) 과 리소스를 사용하는 앱 (클라이언트) 를 분리시키는 것이 유리함. 왜냐하면, 분리되지 않은 경우 데이터를 업데이트 할 때마다 앱을 계속 업데이트해야하는 비효율.. 2022. 12. 4. 이전 1 다음
