웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어이다. 인터넷에 접속하기 위해 사용하는 크롬, 사파리, 엣지, 파이어폭스 등이 브라우저이다.
웹 브라우저의 동작 원리는 여러 단계로 나뉘어져 있는데 사용자가 웹 페이지를 요청하고 이를 렌더링하는 과정에서 다양한 기술이 활용된다.
브라우저의 구조
사용자 인터페이스(User Interface) : 주소 표시줄, 각종 버튼(이전/다음, 새로고침, 설정, 닫기 등), 북마크 메뉴 등. 요청한 페이지를 보여주는 영역을 제외한 나머지 모든 부분이 사용자 인터페이스에 해당한다.
브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진. 자료 저장소를 참조하며 로컬에 데이터를 읽기/쓰기 하면서 다양한 작업을 한다.
렌더링 엔진 : 요청한 콘텐츠를 표시한다. 요청한 웹 페이지의 HTML과 CSS를 파싱하여 화면에 표시
통신 : HTTP 요청과 같은 네트워크 호출에 사용
자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행
UI 백엔드 : input, select 와 같이 기본적으로 지원하는 요소를 그린다. OS 사용자 인터페이스에서 정해준것들을 사용한다.
자료 저장소 : 쿠키, 로컬 스토리지와 같이 로컬 영역에 저장해야 하는 모든 종류의 데이터들을 저장한다.
1. URL 입력 및 요청
사용자가 웹 브라우저에 URL을 입력하면, 브라우저는 해당 URL을 해석하여 웹 서버에 요청을 보낸다. 이 과정에서 DNS(Domain Name System)를 통해 도메인 이름을 IP 주소로 변환한다.
2. 요청 전송
브라우저는 HTTP(HyperText Transfer Protocol) 또는 HTTPS(HyperText Transfer Protocol Secure) 프로토콜을 사용하여 웹 서버에 요청을 전송한다. 이 요청은 보통 GET 요청으로 이루어지며, 서버에게 특정 리소스(예: HTML 파일, 이미지 등)를 요청한다.
3. 서버 응답
웹 서버는 요청을 처리한 후, 요청된 리소스를 포함한 HTTP 응답을 브라우저에 반환한다. 이 응답에는 상태 코드(예: 200, 404)와 함께 HTML 문서, CSS 파일, JavaScript 파일 등이 포함될 수 있다.
4. HTML 파싱 및 DOM 생성
브라우저는 응답받은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. DOM은 HTML 문서의 구조를 나타내는 객체 모델이다.
5. CSS 파싱 및 CSSOM 생성
브라우저는 HTML 문서와 함께 요청한 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. CSSOM은 스타일 정보를 구조화하여 브라우저가 렌더링을 할 수 있도록 돕는다.
6. JavaScript 실행
브라우저는 HTML 문서 내의 JavaScript 코드를 실행한다. 이 과정에서 JavaScript는 DOM과 CSSOM을 수정할 수 있으며, 브라우저는 이를 반영하여 페이지를 업데이트한다.
7. 렌더 트리 생성
브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 렌더 트리는 화면에 표시될 요소들만 포함하며, 각 요소의 스타일과 위치 정보가 포함된다.
8. 레이아웃 및 페인팅
렌더 트리를 기반으로 브라우저는 레이아웃을 계산하여 각 요소의 정확한 위치와 크기를 결정한다. 이후, 이 정보를 바탕으로 화면에 각 요소를 그리는 과정을 페인팅이라고 한다.
9. 최적화 및 재렌더링
브라우저는 페이지가 동적으로 업데이트될 때 최적화를 통해 불필요한 렌더링을 줄인다. JavaScript가 DOM을 수정하면, 브라우저는 필요한 부분만 다시 렌더링한다.
결론
웹 브라우저는 이러한 여러 단계를 통해 사용자가 요청한 웹 페이지를 화면에 표시한다. 이 과정에서 다양한 프로토콜과 기술이 사용되며, 각 단계는 브라우저의 성능과 사용자 경험에 큰 영향을 미친다.
axios는 fetch보다 문법이 조금 더 간단하고 다양한 편의기능을 제공하기 때문에 실무에서 많이 사용한다.
axios는 서드파티 모듈이기 때문에 설치를 해줘야 하는데 터미널을 키고 npm install axios 라고 입력해주면 된다.
axios 설치
axios는 HTTP 메소드 이름과 동일한 메소드를 사용하고 리스폰스 바디를 data 프로퍼티로 접근할 수 있다.
GET 리퀘스트
axios로 GET 리퀘스트를 보내려면 axios.get 메소드를 사용하면 된다.
// axios
import axios from 'axios'; //axios import하기
async function getColorSurvey(id) {
const res = await axios.get(`https://learn.codeit.kr/api/color-surveys/${id}`);
return res.data;
}
axios 역시 promise를 리턴하기 때문에 앞에 await을 적어줘야 한다. 그리고 axios에서는 바디 내용을 파싱할 필요 없이 그냥 data 프로퍼티로 가져오면 된다. 상태 코드 status나 헤더 headers를 가져올 수도 있다. 그리고 그걸 데이터 변수에 할당할 필요 없이 그냥 리턴해줄 수 있다.
// fetch
async function getColorSurvey(id) {
const res = await fetch(`https://learn.codeit.kr/api/color-surveys/${id}`);
const data = await res.json();
return data;
}
쿼리 파라미터도 조금더 쉽게 처리할 수 있는데 쿼리파라미터를 보낼 경우 url 객체를 사용할 필요없이 params 옵션을 사용하면 된다.
// axios
export async function getColorSurveys(params = {}) {
const res = await axios.get(
'https://learn.codeit.kr/api/color-surveys',
{ params }, //이 문법은 params라는 프로퍼티로 params 객체를 설정하는 것이다.
);
return res.data;
}
이렇게 쿼리 파라미터를 담고 있는 객체를 전달하면 객체에 있는 프로퍼티들로 알아서 쿼리 스트링을 만들고 URL 뒤에 붙여서 리퀘스트를 보내준다. 만약 프로퍼티 값이 null이나 undefined이면 그 프로퍼티를 무시하고 쿼리 스트링을 만들어준다.
// fetch
async function getColorSurveys(params = {}) {
const url = new URL('https://learn.codeit.kr/api/color-surveys');
Object.keys(params).forEach((key) =>
url.searchParams.append(key, params[key])
);
const res = await fetch(url);
const data = await res.json();
return data;
}
params 외에 헤더 같은 정보도 옵션으로 설정할 수 있다.
POST 리퀘스트
POST는 axios.post를 사용하면되고, 각 HTTP 메소드는 동일한 이름의 axios 메소드를 쓰면 된다. 그리고 POST 메소드는 바디로 전달할 데이터를 두번째 아규먼트로 받는데 자바스크립트 객체를 그대로 사용할 수 있다.
// axios
async function createColorSurvey(surveyData) {
const res = await axios.post('https://learn.codeit.kr/api/color-surveys', surveyData);
return res.data;
}
axios가 알아서 자바스크립트 객체를 JSON 문자열로 변환해 주기 때문에 JSON.stringify 같은 메소드를 쓰지 않아도 된다. 그리고 헤더도 바디 데이터를 보고 알아서 설정해 주기 때문에 내가 설정하지 않아도 된다.
// fetch
async function createColorSurvey(surveyData) {
const res = await fetch('https://learn.codeit.kr/api/color-surveys', {
method: 'POST',
body: JSON.stringify(surveyData),
headers: {
'Content-Type': 'application/json',
},
});
if (!res.ok) {
throw new Error('데이터를 생성하는데 실패했습니다.');
}
const data = await res.json();
return data;
}
리퀘스트에 바디가 필요 없는 get이나 delete는 옵션을 두 번째 파라미터로 받는다.
바디가 필요한 post, patch, put은 바디 데이터를 두 번째 아규먼트로 받고,
옵션을 세 번째 아규먼트로 받는다. 옵션에서는 헤더, 쿼리 파라미터, 타임아웃 등 다양한 설정을 할 수 있다. <참고>
리퀘스트에 바디가 필요 없는 get이나 delete는 옵션을 두 번째 파라미터로 받는다바디가 필요한 post, patch, put은 바디 데이터를 두 번째 아규먼트로 받고
axios 인스턴스
리퀘스트마다 공통되는 부분이 있으면 인스턴스를 생성하고 인스턴스로 리퀘스트를 보내면 된다. 예를들어 리퀘스트 URL은 보통 경로만 다르고 앞부분은 항상 동일하다. base URL로 앞부분을 설정하고 리퀘스트 timeout을 3초로 설정해보자.
const instance = axios.create({
baseURL: 'https://learn.codeit.kr/api', //baseURL에서 URL은 모두 대문자로 작성하자
timeout: 3000,
}); //이제 인스턴스에서 baseURL을 설정했으니 axios를 사용하는 부분들을 바꿔주면 된다.
async function getColorSurveys(params = {}) {
const res = await instance.get(`/color-surveys`, { //나머지 함수들도
params, //비슷하게 바꿔주면 된다.
});
return res.data;
}
인스턴스로 리퀘스트를 보내고 있기 때문에 모두 baseURL과 timeout이 설정되어 있다. 이제 URL 앞부분이 바뀌거나 해도 한군데서만 바꾸면 된다. 인스턴스를 만들 때 설정할 수 있는 옵션은 리퀘스트를 보낼 때 설정할 수 있는 옵션과 똑같다.
axios 오류 처리
fetch 함수는 리퀘스트 자체가 실패했을 때만 promise가 reject되고 400이나 500 에러 리스폰스가 돌아왔을 때는 promise가 reject 되지 않았다.
axios는 리퀘스트 자체가 실패하거나 리스폰스의 상태 코드가 실패(4XX, 5XX)를 나타내면 Promise를 reject 한다. 그러니까 리퀘스트가 성공하고 200대의 상태코드를 가진 리스폰스가 돌아와야만 promise가 fulfilled가 되는 것이다. (그래서 오류처리가 좀 더 편하다.) axios 함수들을 호출할 때 try catch로 감싸주면 된다.
//demo.js
import { getColorSurvey, createColorSurvey } from './api.js';
const btn = document.querySelector('button');
const statusDiv = document.querySelector('div.status');
const dataDiv = document.querySelector('div.data');
const mbtiInput = document.querySelector('#mbti');
const colorCodeInput = document.querySelector('#colorCode');
btn.addEventListener('click', async function (e) {
statusDiv.textContent = '로딩 중...'; //이 함수는 우선 status를 로딩중으로 설정해주고
dataDiv.innerHTML = '';
try {
const survey = await getColorSurvey(3); //이렇게 리퀘스트를 보낸다. getColorSurvey함수를 실행하고 있는데
statusDiv.textContent = '완료'; //리스폰스가 돌아오면 status를 완료로 바꾸고
dataDiv.innerHTML = `<span>${survey.mbti}</span><span>${survey.colorCode}</span>`; //dataDiv 안에 설문 객체의 mbti 필드와 colorCode 필드를 보여준다.
} catch (e) { //만약 리퀘스트를 보내는 부분에서 에러가 나면
statusDiv.textContent = '오류'; //status를 오류로 바꾸고
dataDiv.innerHTML = `<span>${e.message}</span>`; //에러 메세지를 dataDiv 안에서 보여준다.
}
});
위 코드 그대로 실행해본 화면
페이지에는 그냥 폼 요소랑 버튼, 그리고 텍스트가 있다. html에서 body태그 안에 class status는 네트워크 요청 상태를 보여줄 div이고 class data div는 네트워크 요청 결과를 보여줄 div이다. 그리고 html 파일은 demo.js 파일과 연결되어 있는데 demo.js 파일을 보면 일단 API 함수들을 임포트하고 페이지에 있는 각종 요소들을 가져오고 있다. 그리고 중요한 이벤트 영역이 있는데 버튼을 클릭하면 안에 있는 함수(async function (e)부터 dataDiv.innerHTML = `<span>${e.message}</sapn>`;}});까지)가 실행된다.
이벤트의 상세 내용에 대해선 위에 있는 demo.js의 코멘트를 확인해보자.
개발자 도구의 Network 탭을 들어가보면 보이는 화면
개발자 도구가 열려 있는 상태라면 네트워크 요청이 기록되는데 새로고침을 해보면 어떤 기록들이 생성된다.
스티커가 위치한 부분이 기록들이다.
이 기록들 하나하나가 다 리퀘스트이다. 각 리퀘스트의 상태 코드(status), 타입(type), 어디서 리퀘스트를 보냈는지(Initiator), 사이즈(size), 걸린 시간(time) 등을 볼 수 있고, 마지막 waterfall은 리소스를 가져오는 과정과 타이밍을 그림으로 그린 것이다. 200ms 400ms 600ms 등 써 있는 중간 부분은 전체적인 waterfall을 보여주는 것이다.
type이 fetch라고 쓰여있는 리퀘스트를 선택해보면 waterfall이 조금씩 바뀌는것을 확인할 수 있다.
그리고 컬럼 헤더에 마우스를 올려 우클릭을 해보면 다른 정보도 볼 수 있다. 리퀘스트 Method도 볼 수 있게 Method를 선택해보자.
메소드를 선택하면 메소드 칸이 추가된다.
이제 리퀘스트를 선택해보면 여러 탭을 클릭할 수 있다.
Headers에서는 리퀘스트와 리스폰스의 헤더를 확인 할 수 있다.
그리고 Response는 리스폰스의 바디를 확인할 수 있는데,
아래쪽에 라이언 스티커 옆에 있는 중괄호 아이콘
중괄호 아이콘을 클릭하면 압축된 결과와 예쁘게 출력된 결과를 확인할 수 있다.
그리고 Preview 탭은 리스폰스 내용의 미리보기를 보여준다. 지금처럼 JSON의 경우 큰 차이가 없지만 리스폰스 내용이 HTML인 경우 HTML에 대한 화면을 보여준다.
HTML에 대한 화면을 보여준다.
디버깅(debugging 컴퓨터 프로그램 개발 단계에서 발생하는 오류나 비정상적인 연산(버그)을 찾아내고 수정하는 작업 과정)을 하다보면 헤더가 제대로 설정되고 있는지, 예상된 리스폰스가 돌아오고 있는지 등을 확인해야 하는 경우가 많은데 그럴 때 Network 탭으로 리퀘스트, 리스폰스의 모든 정보를 볼 수 있기 때문에 아주 유용하다.
이번엔 그냥 fetch failed라고 나온다. try문이 안에서 발생한 오류르 잡아서 catch문 안에 있는 코드가 실행된 것이다. 지금은 콘솔에 오류 메세지를 출력하지만 실제 웹사이트 코드라면 오류 메세지를 화면에 보여줄 수 있을 것이다.
유효하지 않은 주소를 입력하는 것 외에도 유효하지 않은 헤더 이름을 사용하거나 헤더 값이 이상하면 리퀘스트 자체가 실패해서 fetch가 리턴하는 promise는 rejected 상태가 된다. 주의해야할 점은 리퀘스트 자체가 실패했을 때만 promise가 rejected 상태가 되고 400이나 500같은 에러 리스폰스가 돌아오는 경우에는 promise는 fulfilled 상태가 된다.
그러니까 예를 들어 잘못된 바디 내용을 보내서 400리스폰스가 돌아오거나 서버 측에서 오류가 발생해서 500 리스폰스가 돌아와도 fetch의 promise는 fulfilled 상태가 된다. 그래서 이걸 깔끔하게 처리하는 방법은 리스폰스의 상태 코드가 성공을 나타내지않으면 오류를 발생시키는 것이다.
// api.js
export async function getColorSurveys(params = {}) {
const url = new URL('https://learn.codeit.krrrrr/api/color-surveys'); //일부러 오류만들기
object.keys(params).forEach((key) =>
url.searchParams.append(key, params[key])
);
const res = await fetch(url);
//오류 발생
if (!res.ok) {
throw new Error('데이터를 불러오는데 실패했습니다.');
}
const data = await res.json();
return data;
}
export async function getColorSurvey(id) {
const res = await fetch(`https://learn.codeit.kr/api/color-surveys/${id}`);
const data = await res.json();
return data;
}
export async function createColorSurvey(sueveyData) {
const res = await fetch('https://learn.codeit.kr/api/color-surveys', {
method: 'POST',
body: JSON.stringify(surveyData),
headers: {
'Content-Type': 'application/json'
}
});
const data = await res.json();
return data;
}
여기서 추가한 res.ok는 리스폰스 상태 코드가 2로 시작하면 true, 그렇지 않으면 false를 리턴한다. if문 안에서 리스폰스의 실제 상태 코드나 바디내용을 보고 더 세밀한 처리를 해줄 수도 있다. 리퀘스트 자체가 실패해도 오류를 throw하고 오류를 나타내는 상태 코드가 돌아와도 오류를 throw 하는 것이다.
이렇게 처리를 하는게 헷갈리지 않고 함수를 사용할 때 더 편리하다.
일부러 만들었던 주소 오류는 수정을 하고, 유효하지 않은 mbti를 쿼리 파라미터로 보내본다면,
방금 작성한 메세지가 잘 출력되는걸 확인 할 수 있다. 만약 if (!res.ok) {throw new Error('데이터를 불러오는데 실패했습니다.');} 이 코드가 없었다면 잘못된 mbti를 전달했기 때문에 상태코드 400이 돌아올것이다. 상태코드 400이 돌아와도 아무 문제없이 다음줄이 실행되는데 이 때 상태코드 400에 해당하는 리스폰스의 형식도 JSON이라면 바디가 파싱되서 그대로 리턴된다. 함수 안에서 아예 오류가 발생하지 않는 것이다. 반면 리스폰스 바디 형식이 JSON이 아니라면 오히려 바디를 파싱하는 과정에서 오류가 발생한다.
이렇게 다양한 케이스가 있어서 헷갈릴 수 있기 때문에 리스폰스가 성공적으로 처리되지 않으면 그냥 오류를 throw 하는 것이다. 나머지 코드도 비슷하게 바꿔주면 이렇게 할 수 있다.
// api.js
export async function getColorSurveys(params = {}) {
const url = new URL('https://learn.codeit.kr/api/color-surveys');
object.keys(params).forEach((key) =>
url.searchParams.append(key, params[key])
);
const res = await fetch(url);
//오류 발생
if (!res.ok) {
throw new Error('데이터를 불러오는데 실패했습니다.');
}
const data = await res.json();
return data;
}
export async function getColorSurvey(id) {
const res = await fetch(`https://learn.codeit.kr/api/color-surveys/${id}`);
if (!res.ok) {
throw new Error('데이터를 불러오는데 실패했습니다.');
}
const data = await res.json();
return data;
}
export async function createColorSurvey(sueveyData) {
const res = await fetch('https://learn.codeit.kr/api/color-surveys', {
method: 'POST',
body: JSON.stringify(surveyData),
headers: {
'Content-Type': 'application/json'
}
});
if (!res.ok) {
throw new Error('데이터를 생성하는데 실패했습니다.');
}
const data = await res.json();
return data;
}
마무리 복습하기
fetch 오류는 크게 두가지가 있다.
URL이 이상하거나 헤더 정보가 이상해서 리퀘스트 자체가 실패하는 경우
리퀘스트는 성공적인데 상태코드가 실패를 나타내는 경우
여기서 조심해야 할 부분은 첫번째 경우에만 fetch의 promise가 rejected 상태가 된다는 것이다. 그래서 오류를 깔끔하게 처리하는 방법 중 하나는 두번째 경우에도 수동적으로 오류를 throw 해주는 것이다. 리퀘스트가 성공적으로 처리되고, 성공적인 리스폰스가 돌아왔을 때만 데이터를 리턴하고 나머지 모든 경우엔 오류를 발생시키는 것이다.
그래야 API 함수를 사용하는 입장에서 try catch로 쉽게 로직을 구분할 수 있다.
fetch에 대한 오류를 처리할 때는 언제 promise가 rejected 되는지, 어떤 내용이 리스폰스 바디로 돌아오는지를 잘 생각해보도록 하자.
보통 웹 개발을 할 때는 aPI를 호출하는 함수들을 따로 모아두고 필요할 때 import해서 사용한다.
//api.js
//GET/api/color-surveys를 하는 함수부터 만들어보자.
export async function getColorSurveys() {
const url = new URL('https://learn.codeit.kr/api/color-surveys');
url.searchParams.append('offset', 10);
url.searchParams.append('limit', 10);
const res = await fetch(url);
const data = await res.json();
return data;
}
함수 안에서 await을 사용하니 async 키워드도 추가해주고, 데이터를 리턴하는것으로 바꿔주었다. 그리고 위 코드에선 쿼리 파라미터가 고정되어 있는데 쿼리파라미터를 함수 파라미터로 대신 받도록 바꿔준다.
//api.js
export async function getColorSurveys(params = {}) {
const url = new URL('https://learn.codeit.kr/api/color-surveys');
object.keys(params).forEach((key) =>
url.searchParams.append(key, params[key])
);
const res = await fetch(url);
const data = await res.json();
return data;
}
params 객체의 프로퍼티를 돌면서 url.searchParams에 추가해 주는 코드이다. 예를 들어 params에 이런 객체( params = { offset: 5, limit: 10}; )가 전달된다면 url.searchParams에 offset은 5, limit은 10이 추가된다.
이제 이 함수를 import해서 사용하면 되는데 main.js에서 나머지 코드 부분을 코멘트 처리하고 코드를 작성해준다.
//main.js
import { getColorSurveys } from './api.js';
const data = await getColorSurveys(); //async 함수는 promise를 리턴하기 때문에 앞에 await을 적어준다.
console.log(data);
이 상태로 실행해봐도 이전과 같이 리스폰스가 잘 출력된다. 여기에서 쿼리 파라미터도 바로 사용할 수 있는데
//main.js
import { getColorSurveys } from './api.js';
const data = await getColorSurveys({ offset:20, limit:20 });
console.log(data);
결과값
이번엔 offset과 limit에 따라 next와 previous의 값이 돌아오고, 결과도 총 20개가 돌아온다.
// api.js
// GET/api/color-surveys를 하는 함수
export async function getColorSurveys(params = {}) {
const url = new URL('https://learn.codeit.kr/api/color-surveys');
object.keys(params).forEach((key) =>
url.searchParams.append(key, params[key])
);
const res = await fetch(url);
const data = await res.json();
return data;
}
// GET/api/color-surveys/:id
export async function getColorSurvey(id) {
const res = await fetch(`https://learn.codeit.kr/api/color-surveys/${id}`);
const data = await res.json();
return data;
}
// POST/api/color-surveys
export async function createColorSurvey(sueveyData) {
const res = await fetch('https://learn.codeit.kr/api/color-surveys', {
method: 'POST',
body: JSON.stringify(surveyData),
headers: {
'Content-Type': 'application/json'
}
});
const data = await res.json();
return data;
}
main.js에 적혀있던 코멘트한 리퀘스트 함수들을 api.js 파일로 긁어와서 구분, 작성해준 뒤 실행을 시켜보도록 하자.
//main.js
import { getColorSurveys, getColorSurvey, createColorSurvey } from './api.js'; //함수들을 import하고
const data = await getColorSurvey(10); //getColorSurvey에 id 10을 전달
console.log(data);
POST 리퀘스트로 데이터를 생성하면 서버가 생성된 데이터를 리스폰스로 돌려주는 경우가 많은데 const data = await res.json(); 의 json 메소드로 리스폰스를 파싱해서 출력한다.
결과창
코드를 실행해 보면 새로 생성된 설문 객체가 잘 돌아온다.
실제 웹 개발을 하는 상황이라고 생각해 보면 사용자가 폼에 mbti, 좋아하는 색상 정보를 입력하면 그 값으로 surveyData 같은 객체를 만들고 그걸 POST 리퀘스트의 바디에 전달해서 설문 결과를 생성하는 것이다. 그리고 생성된 결과가 리스폰스로 돌아오면 그걸 화면에 보여주거나 할 수 있다.
이 부분에서 offset=10&limit=10 이 부분 때문이다. offset은 데이터 몇개를 건너뛰고 요청할 것(offset=10은 11번째 항목부터 시작하여 데이터를 가져오겠다는 뜻)인지, limit은 데이터 몇개를 요청할 것인지를 뜻한다.
지금 결과에서 10개를 받았으니 다음에는 처음에서부터 10개를 건너뛰고 10개를 받아올 것이다. 그래서 next 값이 이런 URL인 것이다. 이 URL로 리퀘스트를 보내보면
const res = await fetch('https://learn.codeit.kr/api/color-surveys/?offset=10&limit=10');
const data = await res.json();
console.log(data);
next와 previous 값이 바뀌었고 다음 10개의 데이터가 잘 출력되는것을 확인 할 수 있다.
이렇게 작성하면 mbti가 ISTJ인 설문 결과만 돌아오게 할 수도 있다.
const res = await fetch('https://learn.codeit.kr/api/color-surveys/?mbti=ISTJ');
const data = await res.json();
console.log(data);
쿼리 스트링을 직접 작성하지 않고 URL이라는 객체를 사용할 수도 있다.
const url = new URL('https://learn.codeit.kr/api/color-surveys'); //먼저 이렇게 URL 객체를 만들고
//객체의 searchParams라는 프로퍼티에 쿼리 파라미터를 추가하면 된다.
url.searchParams.append('offset', 10);
url.searchParams.append('limit', 10);
const res = await fetch(url); //이 부분은 url로 입력해주고 코드를 실행해보면
const data = await res.json();
console.log(data);
이전처럼 offset=10, limit=10 결과가 잘 돌아온다.
//쿼리 파라미터: mbti, limit, offset
const res = await fetch('https://learn.codeit.kr/api/color-surveys');
const data = await res.json();
console.log(data);
GET api/color-surveys는 여러 설문 객체를 가져오는데 쓰이고, GET api/color-surveys/id는 설문 객체 하나를 가져오는데 쓰인다. 만약 id 5에 해당하는 객체 하나만 가져오고 싶다면 'https://learn.codeit.kr/api/color-surveys/5' 로 작성해주면 id : 5에 해당하는 설문 객체 하나만 돌아온다.
fetch 함수 안에 리퀘스트(웹 브라우저가 서버에 요청)를 보낼 URL을 쓰면 된다. fetch는 기본적으로 get 리퀘스트를 보내고 promise를 리턴한다. 시간이 지나고 리스폰스(서버가 보내주는 응답)가 도착하면 promise는 fulfilled 상태가 되고, 리스폰스를 결과값으로 갖게된다. 그래서 리스폰스를 가져오려면 await문을 써줘야 하는것이다.
const res = await fetch('https://learn.codeit.kr/api/color-surveys');
console.log(res); //리스폰스 출력
출력된 결과, 이 밑으로도 내용이 쭉 있다.
조금 복잡한 결과가 출력됐는데, 리스폰스에는 다양한 정보가 있다. 이중에서 가장 많이 사용하는 것은 상태코드, 헤더와 바디 내용이다.
상태코드 200과 헤더의 길고 긴 정보들. 이 중 content-type value: application/json을 기억하자!
이렇게 status와 headers로 프로퍼티로 접근할 수 있다. 반면 body는 내용이 일반 문자열이라면 텍스트 메소드, json 문자열이라면 json 메소드를 써야한다. 위의 헤더 내용 중content-type value: application/json을 확인 할 수 있는데 사용할 API가 json 문자열을 돌려준다는 의미이기 때문에 json 메소드를 사용하면 된다.
//바디 내용은 단순히 프로퍼티로 가져올 수 없고 메소드를 사용해야 한다.
const res = await fetch('https://learn.codeit.kr/api/color-surveys');
const data = await res.json();
console.log(data);
json 메소드 역시 promise를 리턴하는 비동기 함수이기 때문에 앞에 await을 넣어줘야한다. json 메소드는 바디의 json 문자열을 읽어서 자바스크립트 객체로 변환해 준다.
리스폰스의 바디 내용이 잘 출력된다.
실제 설문 데이터 외에도 count나 next, previous 같은 필드들이 있는데, count는 모든 데이터 갯수, next는 다음 데이터를 받아오는 URL, previous는 이전 데이터를 받아오는 URL, 그리고 results는 현재 페이지에 해당하는 데이터 배열이다. (자세한건 다음 포스팅 참조)
데이터 변수에 할당된 이 결과는 자바스크립트 객체이기 때문에 디스트럭처링(Destructuring) 같은 문법을 사용해서 프로퍼티들을 쉽게 가져올 수 있다.
예를 들어 설문 목록에 해당하는 results 프로퍼티를 가져와서 첫번째 설문 객체의 프로퍼티들을 출력해본다면,
const res = await fetch('URL');
//fetch: 아규먼트로 URL을 전달
// 리스폰스 상태 코드
res.status;
// 리스폰스 헤더
res.headers;
// 리스폰스 바디
await res.json(); // JSON 문자열을 파싱해서 자바스크립트 객체로 변환
await res.text(); // 문자열을 그대로 가져온다.
fetch와 json 함수 모두 promise를 리턴하기 때문에 앞에 await을 써줘야 한다.
