JavaScriptWEB

이전 영상에서는 fetch 함수로 리퀘스트를 보내고, 리스폰스를 받아서 그 내용을 출력해봤습니다. fetch 함수의 실행 원리를 다시 정리하자면,fetch 함수는 어떤 객체를 리턴하는데(Promise 객체, 챕터 3에서 배웁니다)이 객체의 then 메소드로, '리스폰스

이전 영상에서는 크롬 웹 브라우저의 '개발자 도구'에서 자바스크립트 코드를 실행했습니다. 오늘날 많은 웹 브라우저들이 이렇게 개발자 도구를 포함하고 있는데요. 이번 노트에서는 개발자 도구에 관해 알아야 할 사실들을 배워보겠습니다.웹 브라우저에 내장된 개발자 도구는, 웹

이전 영상에서는 웹에 존재하는 수많은 데이터 중에서 원하는 데이터를 특정하기 위해 URL을 사용한다는 사실을 배웠습니다. 그리고 URL은 크게로 이루어져있다는 걸 배웠는데요.(다른 구성 요소들도 있지만 일단은 일반적으로 보게 되는 것들만 배워봅시다.)이번 노트에서는 U

우리가 어떤 웹 페이지를 보기 위해 URL을 입력하고 엔터를 치면 보통 한 번 이상의 리퀘스트와 리스폰스가 오고 갑니다. 딱 한 번의 리퀘스트와 리스폰스만 오고 가면 될 것 같은데, 이게 무슨 말일까요? 확인해보겠습니다.저는 지금 크롬의 개발자 도구를 열어두었습니다.그

이전 영상에서는 자바스크립트에서 객체와 배열을 나타내는 문법이 그대로 JSON에서 쓰이고 있다고 했습니다. 그런데 이 두 가지가 비슷하기는 하지만 완벽하게 동일한 것은 아닙니다. 아래에서 둘 사이의 차이점에 대해 알아봅시다.잠깐 자바스크립트 코드로 member라는 객체

URL (uniform resource locator)웹에 존재하는 특정 데이터를 나타내는 문자열 https://www.codeitshopping.com/mem/shirts?color=blue&size=mhttp 스킴 scheme 프로토콜의 이름protocol

fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => {console.log(result)}) {},{}형태로 반환

Request 데이터 처리 요구에 따라 4가지 Request는 HEAD와 BODY로 구성이 되어 있음 HEAD Request에 대한 부가 정보 method(get,post,put,delete)값이 head에 존재 BODY 실제 데이터를 담는 부분 리퀘스트에 데이터를 넣

자바스크립트 객체를 string 타입의 JSON 데이터로 변환하는 것은 영어로 Serialization, 우리말로는 직렬화라고 합니다. 그리고 이와 반대로 string 타입의 JSON 데이터를 자바스크립트 객체로 변환하는 것을 영어로는 Deserialization, 우

이번 노트에서는 알아두면 개발할 때 도움이 되는 상태 코드(Status Code)들을 알아보겠습니다. 자, 시작해볼까요?모든 상태 코드(Status Code)는 각각 그에 대응되는 상태 메시지(Status Message)를 갖고 있습니다.예를 들어, 우리가 배운 200

이때까지 우리는 리퀘스트와 리스폰스가 둘다 헤드(head)와 바디(body)라는 걸로 이루어져 있다는 걸 배웠습니다. 그리고 헤드에는 각종 부가 정보, 바디에는 실제 데이터가 들어간다는 것도 배웠죠. 이때 헤드에 다양한 헤더(header)들이 있는 것도 직접 봤는데요.

이제 우리는 리퀘스트와 리스폰스의 바디에 정말 다양한 타입의 데이터들이 들어갈 수 있다는 것을 배웠습니다. 이때까지는 실제로 개발자가 되면 주로 사용하게 될 JSON 타입을 많이 다뤄봤는데요. 하지만 정말 개발자가 된다면 JSON 뿐만 아니라 이전 노트에서 봤던 일반

이때까지 웹 개발을 하기 위해서 알아야 할 기초 지식들을 배웠습니다. 이번 노트에서는 아직 미처 다루지 못했지만 꼭 알고가야 할 내용들을 다뤄보겠습니다. 총 3가지 주제에 대해 배워보겠습니다. 먼저 Ajax라는 것부터 배워볼게요.초창기의 웹은 특정 웹 페이지에서 다른

이전 영상의 코드를 다시 보겠습니다.console.log('Start!');fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(

이전 노트에서는 fetch 함수가 비동기 실행된다는 게 무슨 의미인지, 그리고 비동기 실행이 동기 실행에 비해서 가지는 장점이 무엇인지 배워봤습니다. 사실 자바스크립트에는 fetch 함수 말고도, 비동기 실행되는 함수들이 존재합니다. 그 예시들을 하나씩 살펴보겠습니다.

이전 챕터에서는 위 코드에서 보이는 것처럼 response 객체의 text 메소드로 리스폰스의 내용을 추출(response.text();)하고 이것을 Deserialize하거나(JSON.parse(result);)response 객체의 json 메소드로 리스폰스의 내용

Promise 객체를 배울 때는 then 메소드에 관해서만 확실히 알면 딱히 어려운 내용이 없습니다. 이번 노트에서는 Promise의 then 메소드에 관한 규칙을 제대로 깊이있게 배워봅시다.잠깐 이 코드를 보세요.이때까지 배운 내용을 바탕으로 이 코드를 해석해봅시다.

이전 영상에서는 다음과 같은 catch 메소드를 봤습니다. 그런데 어떻게 fetch 함수에서 발생한 에러가 catch 메소드 안의 콜백에까지 전달될 수 있는 걸까요? 사실 이 내용은 이전의 'then 메소드 완벽하게 이해하기' 노트를 잘 읽었다면 바로 이해할 수 있는

이때까지 우리는 Promise Chaining, then/catch/finally 메소드 등 Promise 객체에 관한 많은 것들을 배웠습니다. 그런데 여기서 궁금한 점이 하나 있습니다. Promise 객체는 왜 등장한 걸까요?사실 Promise 객체가 등장하기 전에도

이전 영상에서는 직접 Promise 객체를 만드는 방법을 배웠습니다. 그럼 언제 이런 식으로 Promise 객체를 직접 만들게 되는 걸까요? 다양한 경우들이 있지만, 전통적인 형식의 비동기 실행 함수를 사용하는 코드를, Promise 기반의 코드로 변환하기 위해 P

이때까지 우리는 pending 상태에 있다가 fulfilled 상태 또는 rejected 상태가 되는 Promise 객체를 직접 만드는 법을 배웠습니다. 그런데 아예 처음부터 바로 fulfilled 상태이거나 rejected 상태인 Promise 객체를 만드는 것도 가

이때까지 우리는 하나의 Promise 객체를 다루기 위해 알아야 하는 지식들을 배웠습니다. 하지만 실무 개발에서는 여러 개의 Promise 객체를 동시에 다뤄야 하는 경우도 있는데요. 이번 노트에서는 여러 개의 Promise 객체를 다뤄야 할 때 사용되는 Promise

우리는 이때까지 fetch 함수를 사용해서 Promise 공부를 했습니다. 여기서 잠깐 챕터 1에서 배웠던 '그밖에 알아야 할 내용들' 노트의 내용 중 1. Ajax 부분을 다시 읽고 와봅시다.여기서 저는 fetch 함수가 Ajax 통신을 하는 함수라고 했는데요. 그런

이전 영상에서는 async 함수 안의 코드들이 어떤 식으로 실행되는지 배웠습니다. 이때 함수 안에 존재하는 await이 코드 실행 흐름에 변화를 주는 중요한 역할을 했는데요. 코드를 다시 살펴봅시다.사실 fetchAndPrint 함수를 언뜻 보면, 비동기 실행 함수처럼

async 함수는 그 안에서 리턴하는 값에 따라 그에 맞는 Promise 객체를 리턴합니다. 그런데 이때 적용되는 규칙은 우리가 이전에 'then 메소드 완벽하게 이해하기' 노트에서 봤던 규칙들과 유사합니다.async 함수 안에서 리턴하는 값의 종류에 따라 결국 어떤

자바스크립트에서 함수를 표현하는 방법에는 여러 가지가 있는데요.Function Declaration(함수 선언식),Function Expression(함수 표현식),Arrow Function(화살표 함수)등이 있습니다. 그리고Function Expression의 경우에

이때까지 async 함수에 관해서 많은 내용을 배웠는데요. 그런데 async 함수의 내부 코드를 작성할 때는 특히 주의해야 하는 경우가 있습니다. 잠깐 아래의 코드를 볼까요?이 getResponses 함수는 urls라는 파라미터로, 여러 개의 URL들이 있는 배열을 받