javasciprt - 웹 개발

JM·2022년 3월 31일

JavaScript

이해 못 한다고 너무 머무르지 말고 과감하게 앞으로 나아갈 필요가 있따.

이해가 쉽지 않다... 힘을 내야한다!! 다시 돌아오면 된다

웹브라우저와 서버

request: 서버에 요청
response: 서버가 반응

fetch 함수

fetch: 서버에 request 요청
then: 서버의 response 처리

response 파라미터에는 각종 부가 정보들과 실제 내용을 함께 갖고 있는 하나의 객체가 넘어온다. 실제 내용을 확인하기 위해서는 text 메소드를 사용해야한다.

// fetch 함수로 request 보내기
fetch('https:///www.google.com')
	// 서버에서 response 가 오면 아래 함수 실행된다.
	.then((response) => response.text())
	// 위 결과가 result로 넘어간다.
  	.then((result) => {console.log(result); })

웹 이란?

웹(World Wide Web) / HTML(Hyper Text Markup Language)

URL 이란?

Uniform Resource Locator: 웹에 존재하는 특정 데이터를 나타내는 문자열,
그렇다면 URL 로 어떻게 특정 문자열을 나타낼까?

호스트(Host): 전세계 서버 중 하나의 서버를 특정
www.codeitshopping.com
경로(Path): 서버에 있는 데이터 중 원하는 데이터를 특정
/men/shirts
쿼리(Query): 데이터에 관한 세부적인 요구사항
서버마다 정해진 규칙이 다르다.
?color=blue&size=m

특정 서버를 외우기 어려운 IP 주소가 아니라 외우기 쉬운 문자열로 나타내는 것을 도메인 네임(Domain Name) 이라고 한다.
그렇다면 서버는 어떻게 도메인 네임만으로 특정 서버를 식별할까?
이를 위해서 Donmain Name Resolution 이라는 작업을 실행해야한다.

HTTP 란?

https: 프로토콜의 이름 --> https 포로토콜을 지키겠다 라는 의미
http(HyperText Transfer Protocol)
HyperText: 다른 텍스트에 대한 참조를 갖고 있는 텍스트
https(HyperText Transfer Protocol Secure)

스킴(Scheme): 프로토콜의 이름
프로토콜(Protocol): 통신을 하는 두 주체가 지켜야하는 통신 규약

한 번의 접속으로 웹 브라우저의 여러 모습들을 가져올 수 없다. 우리는 한 번 접속하지만 브라우저는 여러 번의 Request 를 한다.

JSON 이란?

JSON(JavaScript Object Notation)
Object Literal: 객체의 프로퍼티의 이름(키)과 값(밸류) 쌍을 순서대로 나열하는 방법
Json과 javascript 차이점

json 은 프로퍼티의 이름에 반드시 큰 따옴표를 붙여줘야한다.
json 에서 값이 문자열인 경우 큰 따옴표(")를 사용해야한다
undefined, Nan, Infinity 등은 표현이 불가능하다.
주석을 추가할 수 없다.

서버가 보내주는 response의 종류를 확인해보자.

JSON 데이터를 객체로 변환

parse 를 사용하면 자바스크립트 객체로 변환이 가능하다.
Deserialization(역직렬화): string 타입의 JSON 데이터를 실제 자바스크립트 객체로 변환하는 것

// fetch 함수로 request 보내기
fetch('https:///www.google.com')
	// 서버에서 response 가 오면 아래 함수 실행된다.
	.then((response) => response.text())
	// 위 결과가 result로 넘어간다.
  	.then((result) => { 
  		const user = JSON.parse(result);
  		console.log(user.length);
    })

CRUD

Request는 Head와 Body로 나눠져있다.
요청 - 데이터조회 / 데이터추가 / 데이터수정 / 데이터삭제 등이 있다.
데이터 조회 - GET
데이터 추가 - POST
데이터 수정 - PUT
데이터 삭제 - DELETE

const newMember = {
	name: 'donknow',
  	email: 'abc@gmail.com',
  	department: 'engineering',
}

fetch('https://learn.codeit.kr/api/members', {
    method: 'POST',
    // stringify: 자바스트립트 객체를 string 타입의 JSON 데이터로 변환
    body: JSON.stringify(newMember),
})
    .then((response) => response.text())
    .then((result) => {
        console.log(result);
    })

데이터 추가 및 삭제

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

fetch('***/2', {
    method: 'PUT',
    body: JSON.stringify(member),
})
    .then((response) => response.text())
    .then((result) => {console.log(result);})


fetch('***/2', {
    method: 'DELETE',
})
    .then((response) => response.text())
    .then((result) => {console.log(result);})

//  json 메소드를 사용해도 된다.
fetch('***')
  .then((response) => response.json())
  .then((result) => { const users = result; });

Web API

Web API: 프론트엔드 개발자들과 백엔드 개발자들이 모여 '프론트엔드에서 이 URL로 이렇게 생긴 리퀘스트를 보내면, 백엔드에서 이런 처리를 하고 이런 리스폰스를 보내주는 것으로 정합시다 라고 한다.

API(Application Programming Interface): 개발할 때 사용할 수 있도록 특정 라이브러리나 플랫폼 등이 제공하는 데이터나 함수 등

다시 정리하면, Web API를 설계한다는 것은 서비스에서 사용될 모든 URL들을 나열하고, 각각의 URL에 관한 예상 리퀘스트와 리스폰스의 내용을 정리한다를 의미한다.

회사마다 똑같은 URL 이라도 어떤 리스폰스를 보내야하는지는 서로 다르게 설계를 한다.

어느 방식으로 설계해도 서비스가 동작하는데 문제가 없다. 그렇다고 아무렇게 설계하는 것이 아니라 REST API라는 기준을 준수하여 작성하도록 노력한다.

REST API

Representational State Transfer(표현적인 상태 이전)
Web API 를 설계할 때, 준수하기 위해 노력하는 일종의 가이드라인 이다.

REST architecture

Client-Server: client와 server 구조를 통해 양측의 관심사를 분리해야 한다.
웹 브라우저가 실행되고 있는 컴퓨터가 Client, 서비스를 제공하는 컴퓨터가 Server

Stateless: Client가 보낸 리퀘스트에 관해서 Serever는 어떤 맥락(context)도 저장하지 않는다. 즉, 매 리퀘스트는 각각 독립적인 것으로 취급해야한다. 리퀘스트에는 항상 필요한 모든 정보가 담겨있어야 한다.

Cache: Cache를 활용해서 네트워크 비용을 절감해야한다. Server는 리스폰스에, Client가 리스폰스를 재활용해도 되는지 여부(Cacheable)를 담아서 보내야한다.

Uniform Interface: Client가 Server와 통신하는 인터페이스는 하위 4가지 조건을 준수해야한다.

이하 생략 .. 수정중

Layered System:Client와 Server 사이에는 프록시(proxy), 게이트웨이(gateway)와 같은 중간 매개 요소를 두고, 보안, 로드 밸런싱 등을 수행할 수 있어야한다. 이를 통해 client와 server 사이에는 계층형 층(hierarchical layers) 들이 형성된다.

Code on Demand: Client는 받아서 바로 실행할 수 있는 applet이나 script 파일을 Server로부터 받을 수 있어야한다. Optional한 조건으로 REST architecture가 되기 위해서 반드시 만족될 필요는 없다.

REST API는 바로 이런 REST architecture에 부합하는 API를 의미한

다시 정리

자바스크립트 객체를 string 타입의 JSON 데이터로 변환하는 작업(리퀘스트를 보낼 때) => Serialization(직렬화) ==> JSON.stringfy()
string 타입의 JSON 데이터를 자바스크립트 객체로 변환하는 작업(리스폰스를 받았을 때) => Deserialization(역직렬화) ==> JSON.parse()

Response

Status Code

상태코드는 100 ~ 500 번대 까지 존재한다.

200: 요청 내용을 서버가 정상 처리함
404: 해당 URL에 해당하는 데이터를 찾을 수 없음

100번대

서버가 클라이언트에게 정보성 응답(Informational response)을 줄때 사용되는 상태 코드
- 100 Continue: 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은지 물어봤을 때, 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 코드
- 101 Switching Protocols: 클라이언트가 프로토콜을 바꾸자는 리퀘스트를 보냈을 때, 서버가 프로토콜로 전환하겠다 라는 뜻을 나타낸다.

200번대

클라이언트의 리퀘스트가 성공 처리되었음을 의미하는 상태 코드
- 200 OK: 리퀘스트가 성공적으로 처리되었음을 포괄적으로 의미하는 상태 코드
- 201 Created: 리퀘스트의 내용대로 리소스가 생성되었다는 뜻
- 202 Accepted: 리퀘스트의 내용이 일단은 접수되었다는 뜻

300번대

클라이언트의 리퀘스트가 처리되지 않았고, 처리를 원하면 클라이언트 측의 추가적인 작업이 필요함을 의미하는 상태 코드들이다.
- 301 Moved Permanently: 리소스의 위치가 바뀌었음을 나타낸다.
- 302 Found: 리소스의 위치가 일시적으로 바뀌었음을 나타낸다.

400번대

리퀘스트를 보내는 클라이언트 쪽에 문제가 있음을 의미하는 상태 코드들
- 400 Bad Request: 리퀘스트에 문제가 있음을 나타낸다.
- 401 Unauthorized: 아직 신원이 확인되지 않은 사용자로부터 온 리퀘스트를 처리할 수 없다는 뜻
- 403 Forbidden: 사용자의 신원은 확인되었지만 해당 리소스에 대한 접근 권한이 없는 사용자라서 리퀘스트를 처리할 수 없다는 뜻
- 404 Not Found: 해당 URL이 나타내는 리소스를 찾을 수 없다는 뜻입니다.
- 405 Method Not Allowed: 해당 리소스에 대해서 요구한 처리는 허용되지 않는다는 뜻입니다.
- 413 Payload Too Large: 현재 리퀘스트의 바디에 들어있는 용량이 지나치게 커서 서버가 거부한다는 뜻입니다.
- 429 Too Many Requests: 일정 시간 동안 클라이언트가 지나치게 많은 리퀘스트를 보냈다는 뜻입니다.

500번대

서버 쪽의 문제로 인해 리퀘스트를 정상적으로 처리할 수 없음을 의미하는 상태 코드
- 500 Internal Server Error: 현재 알 수 없는 서버 내의
- 503 Service Unavaikable:현재 서버 점검 중이나 트래픽 폭주 등으로 인해 서비스를 제공할 수 없다는 뜻이다.

Content-Type 헤더

현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타낸다.
Content-Type 헤더가 존재하면, 바디의 데이터를 직접 확인해서 그 타입을 추론하지 않아도 된다.
브라우저는 리스폰스의 Content-Type 헤더의 값으로 application/octet-stream이 쓰여 있으면 보통, 사용자에게 '다운로드 받으시겠습니까'와 같은 alert 창을 띄웁니다

Ajax

초창기의 웹은 다른 웹 페이지로 갈 수 있는 링크를 클릭하면 새로운 웹 페이지가 로드 되는 방식. 오늘날에도 여전히 쓰이고 있는 방식이다.

하지만, 매번 새 페이지가 로드되는 방식은 효율적이지 않다. 이런 단점을 극복하기 위해 Ajax 라는 기술이 도입 되었다.

Ajax는 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아서, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해준다.

Ajax 는 Asynchronous JavaScript And XML 줄임말로 자바스크립트를 사용해서 비동기적(=사용자가 보고 있는 현재 화면에 영향을 미치지 않고 별도로 백그라운드에서 작업을 처리한다는 뜻)으로 리퀘스트를 보내고 리스폰스를 받는데 기반이 되는 기술들의 집합을 의미한다. 오늘날에는 XML 말고 JSON도 꽤 많이 사용되고 있다.

XMLHttpRequest 라고 하는 객체를 통해 Ajax를 통신할 수 있다.

const xhr = new XMLHttpRequest();
xhr.open('GET', '****');
xhr.onload = function () {
  console.log(xhr.response);
};
xhr.onerror = function () {
  alert('Error!');
};
xhr.send();

요즘은 XMLHttpRequest 를 사용하지 않아도 된다.
1. fetch 함수를 사용해서 Ajax 통신을 할 수 있다.
2. XMLHttpRequest 기반으로 더 쓰기 편하게 만들어진 axios 라는 패키지가 존재한다.(자바스크립트에서는 라이브러리보다는 패키지라는 단어를 더 많이 사용한다.)

HTTP 프로토콜

HTTP, HTTPS 이외에도, SSH, FTP, TCP, UDP 등이 많은 프로토콜들이 있는데, 이런 프로토콜은 각각 네트워크 통신의 특정 계층에 속하는 것이다.

HTTP <- TCP <- IP <- Ethernet
위로 갈수록 고수준 프로토콜, 아래로 갈수록 저수준 프로토콜
'백엔드 개발자'의 경우에는 서비스의 사용자 수가 늘어나서 리퀘스트의 수가 늘어날 수록 HTTP 아래에 있는 프로토콜에 대해서도 어느 정도 알고 있어야 각종 성능 문제 등을 해결할 수 있다.

초조해하지 말자! 나는 충분히 할 수 있다! 인생은 길다!

이전 포스트

javascript - 객체 지향

다음 포스트