하고 싶은게 많은 아이의 개발 성장 일지

Fetch API?JavaScript 에서 네트워크 요청을 보낼 때 사용하는 기본 API 과거 XMLHttpRequest 를 사용했으나 코드가 복잡해 가독성이 저하되는 문제가 말생했었다. 이를 개선하기 위해 Fetch API가 등장했는데 Promise 기반으로 비동기 요청을 훨씬 더 깔끔하게다룰 수 있다.1. Fetch API 기본 문법fetch('url', option).then(response => response.json()) // 응답을 JSON으로 변환.then(data => conosole.log(data)) // 변환 데이터 출력.cath(error => console.error('Error:', error)); // 에러처리✅ fetch(URL) : 저장된 URL로 네트워크 요청 보냄✅ r..

이전 비동기 프로그래밍을 다룰 때 콜백함수, 프로미스를 사용하면서 코드가 복잡해지면서 가독성이 떨어지는 문제가 발생했다.이를 해결하기 위해 async / await 등장했다. async/await 에 대해 들어가기 전 비동기 프로그래밍이란 무엇인지부터 알아보도록 하자.1. 비동기 프로그래밍?한 번에 하나의 작업만 수행하는 동기적인 코드와 달리 시간이 걸리는 작업(네트워크 요청 etc)을 기다리는 동안다른 작업을 실행할 수 있도록 하는 방식2. async/await ? 1) async✅ 함수 앞에 붙으며 해당 함수가 항상 Promise를 반환하다록 만듦→ 함수 내 await 키워드 사용 가능  2) await✅ Promise가 처리될 때까지 기다렸다가 결과값 반환→ async 함수 내부에서만 사용 가능안쪽..

Promise비동기 작업을 보다 쉽게 다룰 수 있도록 도와주는 객체기존 콜백 함수 방식보다 가독성/유지보수 ↑ → 비동기 연산의 최종 완료(실패) 여부와 그 결과 값을 나타내는 객체→ 최종 결과를 반환하는 것이 아닌 미래 어떤 시점에서 결과를 제공해주는 것1. Promise 상태 → 한 번 변경되면 재변경 x1) 대기 (Pending) : 초기 상태로 비동기 작업이 완료되지 않은 상태2) 이행 (Fulfilled) : 작업이 성공적으로 완료된 상태3) 거부 (Rejected) : 작업 실패 상태2. Promise 기본 문법1) Promise 객체 생성const myPromise = new Promise((resolve, reject) => { const success = true; if (s..

JSON(Java Script Object Notation)데이터를 저장하고 전송하는 데 사용하는 경량 데이터 형식자바스크립트 객체와 비슷한 형태로 1:1 매핑에 용이 + 저장되거나 전송될 때 문자열(string) 형태로 변환1. JSON 특징- 텍스트 기반 데이터 포맷- 자바스크립트 객체 표기법 따름- 키-값 (key - value) 구조- 중첩 가능- 배열 지원2. 작성 방법{"데이터 이름", "값"}JSON 의 작성 방법은 모든 객체에 문자열 표시가 붙으며 데이터 쌍은 , 으로 구분한다.→ 중괄호는 객체, 대괄호는 배열을 의미한다. (객체 안에 배열 넣기 가능)3. JSON과 호환되는 자바스크립트 타입- string, number, object, array, boolean, null4. JSON과 ..