자바스크립트 웹 개발 기본기

LEE GYUHO·2023년 10월 7일

📌웹 기초 다지기

📘fetch 함수
웹브라우저가 서버에 보내는 요청: request
서버가 다시 보내준 응답: response

fetch('https://www.google.com')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

(response) => response.text()와 같이 나중에 어떤 조건이 만족되었을 때 실행되는 함수를 콜백이라고 한다.

.then이 콜백을 등록해주는 메소드이다.
.then은 fetch함수가 리턴하는 어떤 객체의 메소드이다. promise 객체라고 한다.

fetch('https://www.google.com')
 .then((response) => { console.log(response); });

'이렇게 코드를 적어도 리스폰스의 내용을 출력할 수 있지 않나요?' 라는 의문을 가지셨을 수도 있는데요.

사실 이 response 파라미터로는 리스폰스의 실제 내용 자체가 넘어오는 게 아닙니다. response 파라미터에는, 리스폰스에 관한 각종 부가 정보들과, 실제 내용을 함께 갖고 있는 하나의 객체(object)가 넘어오는데요. 그래서 우리가 원하는 리스폰스의 실제 내용을 보려면, 처음 예시처럼 적어야 한다.

📌Web API

📘JSON이란?
Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷이다.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

자바스크립트에서 객체와 배열을 나타내는 문법이 그대로 JSON에서 쓰이고 있다고 했습니다. 그런데 이 두 가지가 비슷하기는 하지만 완벽하게 동일한 것은 아닙니다.

- JSON에서는 각 프로퍼티의 이름을 반드시 큰따옴표(")로 감싸줘야 합니다.
- JSON에서는 값이 문자열인 경우 큰따옴표(")를 사용해야 합니다.
- 자바스크립트에서는 프로퍼티의 값으로 사용할 수 있는 undefined, NaN, Infinity 등을 JSON에서는 사용할 수 없습니다.
- JSON에는 주석을 추가할 수 없습니다.
📘JSON데이터 객체로 변환

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { console.log(typeof result); });
실행 결과는 string이 나온다.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { const users = JSON.parse(result); });

- 여기서 JSON은 JSON데이터를 다루기 위해 사용되는 자바스크립트의 기본 객체이다.
- JSON이라는 객체에 parse라는 메소드를 사용하면 string 타입의 JSON데이터를 자바스크립트 객체로 변환할 수 있다.
- 다르게 표현하자면 string 타입의 JSON데이터에 표현된 사용자 정보들의 배열을 실제로 자바스크립트 배열로 변환한다는 뜻이다.
- JSON데이터를 변환해서 생긴 users라는 이름을 붙인 것이다. 이 users라는 배열을 사용하면 원하는 작업을 쉽게 처리할 수 있다.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { 
    const users = JSON.parse(result); 
    console.log(users.length);
    users.forEach((user) => {
      console.log(user.name)
    });
  });
// 총 길이 10이 나오며 이름들이 출력된다.

📘메소드의 의미 (Request의 종류)
- Request의 구성 요소
  Head와 Body로 이루어져 있다.
  Head에는 Request에 대한 부가 정보가 들어있으며 그 예로는 메소드가 있다.
  Body는 실제 데이터를 담는 부분이다.
  GET과 DELETE는 보통 body에 내용을 담을 필요가 없다.
- 데이터 조회(GET -> GET Request) / 데이터 처리: READ
- 데이터 추가(POST -> POST Request) / 데이터 처리: CREATE
- 데이터 수정(PUT -> PUT Request) / 데이터 처리: UPDATE
- 데이터 삭제(DELETE -> DELETE Request) / 데이터 처리: UPDATE
- 특정 직원 정보 조회 - GET
  기존 직원 정보 수정 - PUT
  기존 직원 정보 삭제 - DELETE
  
  이 작업들을 수행할 때는 작업의 대상이 되는 직원 정보를 특정할 수 있도록 URL 끝에 아래와 같은 고유 식별자를 붙여줘야 합니다. (직원의 id 값입니다.)

https://learn.codeit.kr/api/members/3
지금 이 URL은 3번 직원 정보에 대한 작업을 수행하겠다는 뜻입니다. 
이렇게 작업의 종류에 따라 메소드뿐만 아니라 URL도 적절하게 변경해가며 써줘야 합니다.

📘POST request

const newMembet = {
  name: 'Jerry',
  email: 'jerry@codeitmall.kr',
  department: 'engineering',
};

fetch('https://learn.codeit.kr/api/members', {
  method: 'POST',
  body: JSON.stringify(newMember),
})
  .then((response) => response.text())
  .then((result) => { console.log(result); });

//method: 'POST',
//body: JSON.stringify(newMember),
//이 부분은 옵션객체이다.
//POST request를 보낼 때는 fetch함수의 두번째 파라미터에 옵션 객체를 넣어줘야 한다.
  
//stringify는 parse메소드와 정반대의 기능을 한다.
//자바스크립트 객체를 string타입의 json데이터로 변환한다.
//어떤 자바스크립트 객체가 담고 있는 정보를 외부에 전송하고 싶으면
//stringify메소드를 사용해서 string타입의 json데이터로 변환해줘야 한다.
//자바스크립트 객체 그 자체는 외부로 바로 전송할 수 없다.

📘PUT request

//Alice의 부서를 engineering에서 marketing으로 바꾸는 방법

const member = {
  name: 'Alice',
  email: 'alice@codeitmall.kr',
  department: 'marketing',
};

fetch('https://learn.codeit.kr/api/members/2', {
  method: 'PUT',
  body: JSON.stringify(member),
})
  .then((response) => response.text())
  .then((result) => { console.log(result); });

📘DELETE request

//Alice가 퇴사를 해서 직원정보를 삭제하는 방법

fetch('https://learn.codeit.kr/api/members/2', {
  method: 'DELETE',
})
  .then((response) => response.text())
  .then((result) => { console.log(result); });
  
//DELETE request는 body프로퍼티가 필요없다.

📘Serialization(직렬화)
자바스크립트 객체를 string 타입의 JSON 데이터로 변환하는 것
📘Deserialization(역직렬화)
string 타입의 JSON 데이터를 자바스크립트 객체로 변환하는 것
📘Response
Response도 Request와 마찬가지로 Head와 Body로 나누어져 있다.
Head에는 Response에 대한 부가 정보가 들어있고(상태 코드(Status Code))
Body는 실제 데이터를 담는 부분이다.(JSON 데이터)
- 상태 코드(Status Code)는 Request를 받는 서버가 작업 결과를 나타내기 위해서 Response의 Head에 넣는 숫자이다.
  (보통 200을 많이 보는데 Request의 내용대로 서버가 정상 처리를 했다는 것이다.)
  (정상처리되지 못한 경우 대표적으로 볼 수 있는 것이 404이다.)
  (해당 URL에 해당하는 데이터를 찾을 수 없음을 나타낸다.)
  - (1) 100번대
    서버가 클라이언트에게 정보성 응답(Informational response)을 줄 때 사용되 는 상태 코드들
    
    100 Continue : 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은지 물어봤을 때, 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 코드
    
    101 Switching Protocols : 클라이언트가 프로토콜을 바꾸자는 리퀘스트를 보냈을 때, 서버가 '그래요, 그 프로토콜로 전환하겠습니다'라는 뜻을 나타낼 때 쓰이는 상태 코드
  - (2) 200번대
    클라이언트의 리퀘스트가 성공 처리되었음을 의미하는 상태 코드들
    
    200 OK : 리퀘스트가 성공적으로 처리되었음을 포괄적으로 의미하는 상태 코드201 Created : 리퀘스트의 내용대로 리소스가 잘 생성되었다는 뜻
    
    202 Accepted : 리퀘스트의 내용이 일단은 잘 접수되었다는 뜻
  - (3) 300번대
    클라이언트의 리퀘스트가 아직 처리되지 않았고, 리퀘스트 처리를 원하면 클라이언트 측의 추가적인 작업이 필요함을 의미하는 상태 코드들
    
    301 Moved Permanently : 리소스의 위치가 바뀌었음을 나타냅니다.
    
    302 Found : 리소스의 위치가 일시적으로 바뀌었음을 나타냅니다.
    
    304 Not Modified : 브라우저들은 보통 한번 리스폰스로 받았던 이미지 같은 리소스들을 그대로 내부에 저장하고 있습니다. 그리고 서버는 해당 리소스가 바뀌지 않았다면, 리스폰스에 그 리소스를 보내지 않고 304번 상태 코드만 헤드에 담아서 보냄으로써 '네트워크 비용'을 절약하고 브라우저가 저장된 리소스를 재활용하도록 한다.
  - (4) 400번대
    리퀘스트를 보내는 클라이언트 쪽에 문제가 있음을 의미하는 상태 코드들
    
    400 Bad Request : 말그대로 리퀘스트에 문제가 있음을 나타냅니다.
    
    401 Unauthorized : 아직 신원이 확인되지 않은(unauthenticated) 사용자로부터 온 리퀘스트를 처리할 수 없다는 뜻입니다.
    
    403 Forbidden : 사용자의 신원은 확인되었지만 해당 리소스에 대한 접근 권한이 없는 사용자라서 리퀘스트를 처리할 수 없다는 뜻입니다.
    
    404 Not Found : 해당 URL이 나타내는 리소스를 찾을 수 없다는 뜻입니다.
    
    405 Method Not Allowed : 해당 리소스에 대해서 요구한 처리는 허용되지 않는다는 뜻입니다.
    
    413 Payload Too Large : 현재 리퀘스트의 바디에 들어있는 데이터의 용량이 지나치게 커서 서버가 거부한다는 뜻입니다.
    
    429 Too Many Requests : 일정 시간 동안 클라이언트가 지나치게 많은 리퀘스트를 보냈다는 뜻입니다.
  - (5) 500번대
    서버 쪽의 문제로 인해 리퀘스트를 정상적으로 처리할 수 없음을 의미하는 상태 코드들
    
    500 Internal Server Error : 현재 알 수 없는 서버 내의 에러로 인해 리퀘스트를 처리할 수 없다는 뜻입니다.
    
    503 Service Unavailable : 현재 서버 점검 중이거나, 트래픽 폭주 등으로 인해 서비스를 제공할 수 없다는 뜻입니다.

서버가 리퀘스트를 잘 처리했든, 실패했든 상태 코드로 항상 200번을 보내버린다거나 하는 것은 매우 좋지 않습니다. 가장 이상적인 것은 존재하는 상태 코드를 최대한 많이 활용하는 것입니다.

Content-Type 헤더
Content-Type 헤더는 현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타낸다.

Content-Type 헤더는 왜 필요한 걸까요? Content-Type 헤더가 존재하면, 바디의 데이터를 직접 확인해서 그 타입을 추론하지 않아도 되기 때문이다.

사실 이때까지 우리는 리퀘스트 또는 리스폰스의 바디에 HTML, JavaScript 등의 코드 또는 JSON 데이터가 들어가는 경우만 봤습니다. 하지만 실무 개발에서는 리퀘스트 또는 리스폰스의 바디에 이것 말고도 정말 다양한 종류의 데이터들을 넣게 될 텐데요. 텍스트부터 시작해서 이미지, 영상까지 정말 많은 것들이 들어갈 수 있습니다. 바로 이런 데이터들의 타입 정보가 Content-Type 헤더에 담겨있는 겁니다.

Content-Type 헤더의 값은 '주 타입(main type)/서브 타입(sub type)'의 형식으로 나타나는데요. 우리가 흔히 만나게 될 Content-Type 헤더의 값으로는 다음과 같은 것들이 있습니다.
- 주 타입이 text인 경우(텍스트)
  일반 텍스트 : text/plain
  CSS 코드 : text/css
  HTML 코드 : text/html
  JavaScript 코드 : text/javascript ...
- 주 타입이 image인 경우(이미지)
  image/bmp : bmp 이미지
  image/gif : gif 이미지
  image/png : png 이미지 ...
- 주 타입이 audio인 경우(오디오)
  audio/mp4 : mp4 오디오
  audio/ogg : ogg 오디오 ...
- 주 타입이 video인 경우(비디오)
  video/mp4 : mp4 비디오
  video/H264 : H264 비디오 ...
- 위 타입들에 속하지 않는 것들은, 보통 application이라고 하는 주 타입에 속하는데요.
  
  주 타입이 application인 경우
  application/json : JSON 데이터
  application/octet-stream : 확인되지 않은 바이너리 파일 ...
  application/json이라는 값이 JSON 데이터를 나타낸다는 사실을 잘 기억해둡시다.

📘JSON 말고 XML도 있다
개발자들이 어떤 정보를 나타내기 위해 흔히 쓰는 데이터 포맷으로는 JSON 뿐만 아니라 XML(Extensible Markup Language)이라고 하는 데이터 포맷도 있습니다. XML을 한마디로 쉽게 이야기하자면, 태그를 사용해서 데이터를 나타내는 것입니다.

{
   "name":"Michael Kim",
   "height":180,
   "weight":70,
   "hobbies":[
      "Basketball",
      "Listening to music"
   ]
}

이런 JSON 데이터를 XML로는 이렇게 나타낼 수 있습니다.

<?xml version="1.0" encoding="UTF-8" ?>
<person>
    <name>Michael Kim</name>
    <height>180</height>
    <weight>70</weight>
    <hobbies>
        <value>Basketball</value>
        <value>Listening to music</value>
    </hobbies>
</person>

오늘날 XML의 입지는 다소 좁아진 것이 사실입니다.

자바스크립트의 문법과 JSON 문법이 대체로 호환되기 때문에 더더욱 JSON을 사용하는 것이 편리합니다.

📘form 태그에서 사용되는 타입들
- application/x-www-form-urlencoded 타입
  form 태그를 사용하면 자바스크립트 코드 없이 오로지 HTML만으로도 리퀘스트를 보내는 것이 가능하다.
  
  form 태그를 사용하지 않고 자바스크립트 코드로 직접 사용자의 입력값을 취합해서 리퀘스트를 보내는 방법이 많이 사용되고 있지만 여전히 form 태그만으로 리퀘스트를 보내는 방식도 쓰이고는 있기 때문에 알아두는 게 좋다.
  
  form 태그는 기본적으로 이 application/x-www-form-urlencoded 타입의 데이터를 바디에 담아서 보낸다.
```
{
  "id": 6,
  "name": "Jason",
  "age": 34,
  "department": "engineering"
}

// 이 데이터를 application/x-www-form-urlencoded 타입으로 나타내보면

id=6&name=Jason&age=34&department=engineering
// 이것과 같다.
// URL의 query 부분에서 사용하는 방식과 똑같다.

<form action="/upload" method="get" enctype="application/x-www-urlencoded">
 // 지금 form 태그의 method라는 속성의 값으로 get이, 
 // enctype이라는 속성의 값으로 application/x-www-form-urlencoded라고 써있다.
 // 이렇게 속성을 적으면, 나중에 이 form 태그가 리퀘스트를 보낼 때, 
 // 리퀘스트의 메소드를 GET으로 설정하고 사용자가 입력한 데이터를, 
 // URL의 쿼리 부분에 application/x-www-urlencoded 타입으로 넣는다.
 // 지금 enctype 속성을 저렇게 설정을 해줘도 되고, 
 // 설정을 안 해줘도 form 태그는 기본적으로 application/x-www-urlencoded 타입을 사용
```
  일단, 아래와 같은 특수 문자들은 URL에서 특별한 용도를 갖고 있는 문자들입니다. 이런 특수 문자들이 각자 자신의 원래 용도가 아닌 다른 용도로 사용되는 경우 Percent Encoding을 해줘야 합니다.
  
  URL에 대한 해석 오류를 방지하기 위해서
```
:	 /	 ?	 #	 [	 ]	 @	 !	 $	 &	 '	...	  ' '(공백)
%3A	%2F	%3F	%23	%5B	%5D	%40	%21	%24	%26	%27	...	  %20 또는 +
```
- multipart/form-data 타입
  여러 종류의 데이터를 하나로 합친 데이터를 의미하는 타입
  
  우리는 글의 제목과 내용을 적고, 이미지 파일이나 영상 파일을 첨부하기도 합니다. 이때 우리가 '게시글 업로드' 버튼을 누르면 파일들의 내용도 리퀘스트에 함께 담겨서 가야할텐데 이때 Content-type의 값은 무엇이어야 할까요? 바로 이럴 때 사용되는 것이 multipart/form-data입니다.

📌그 밖의 알아야 할 내용

📘Ajax(Asynchronous JavaScript And XML)
- 자바스크립트를 사용해서 비동기적으로(=사용자가 보고 있는 현재 화면에 영향을 미치지 않고 별도로 백그라운드에서 작업을 처리한다는 뜻) 리퀘스트를 보내고 리스폰스를 받는데 기반이 되는 기술들의 집합을 의미한다.
- Ajax는 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아서, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해주는 기술이다.
- 자바스크립트에서는 XMLHttpRequest라고 하는 객체를 통해 Ajax 통신을 할 수 있다.
```
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://learn.codeit.kr/api/members');
xhr.onload = function () {
 console.log(xhr.response);
};
xhr.onerror = function () {
 alert('Error!');
};
xhr.send();
```
- 지금 가장 첫 번째 줄의 코드에 XMLHttpRequest라고 하는 생성자 함수로 객체를 생성한 것이 있다. 이런 식의 코드를 작성하면 Ajax 통신을 할 수 있습니다.
  요즘은 굳이 이렇게 하지 않는다.(fetch 사용)
- 이때까지 배운 fetch 함수가 사실은 Ajax 통신을 하는 함수였다.
📘GET, POST, PUT, DELETE 이외의 메소드들
- PATCH
  PATCH 메소드는 기존의 데이터를 수정할 때 사용하는 메소드이다.
  
  PUT은 기존 데이터를 아예 새로운 데이터로 덮어씀으로써 수정하려고 할 때 쓰는 메소드이고, PATCH는 새 데이터로 기존 데이터의 일부를 수정하려고 할 때 쓰는 메소드이다.
  
  PUT 메소드의 경우에는 원하는 새 데이터의 온전한 모습 전체를 바디에 담아서 보내줘야 한다.
- HEAD
  HEAD 메소드는 GET 메소드와 동일합니다. 대신 GET 리퀘스트를 보냈을 때 받았을 리스폰스에서 바디 부분은 제외하고, 딱 헤드 부분만 받는다는 점이 다르다.

LEE GYUHO

누구나 같은 팀으로 되길 바라는 개발자가 되자

이전 포스트

모던 자바스크립트

다음 포스트

자바스크립트 웹 개발 기본기

📌웹 기초 다지기

📌Web API

📌그 밖의 알아야 할 내용

모던 자바스크립트

위클리 페이퍼 5주차

0개의 댓글