728x90
이러한 요청/응답을 자세히 보면 형식적으로 헤더 + 바디로 구성되어 있는 것을 알 수 있습니다. 요청/응답 첫 줄을 자세히 보면, 상태를 표시해주는 것을 알 수 있습니다. 예를 들어 상태번호 200은 잘 응답되었음을 표시해주는 것입니다. (상태번호에 대한 조금 더 구체적인 설명은 밑에 나옵니다)
다음에 헤더 부분을 보면 누구에게 보내는 내용인지, 어떤 언어를 사용했는지 등 통신에 아주 기본이 되는 정보들이 들어갑니다. 그리고 응답의 바디 부분을 보면 <!DOCTYPE html>로 서버가 해당 내용을 응답response 해주었음을 명확히 확인할 수 있습니다. (여기에 나오는 구체적인 값 중 일부는 일부러 아무 값들이나 적었습니다. 왜냐하면 구체적인 데이터 값보다 데이터 형식이 더 중요하기 때문입니다.)
여기서 메소드는 중요하니 한 번 짤막하게 짚고 넘어가겠습니다.
요청의 첫 줄을 보시면 메소드 + 요청 URI + 버전으로 이루어져있음을 알 수 있습니다. 맨 처음에 나와있는 GET 혹은 POST가 바로 메소드입니다.
많이 사용되는 메소드는 6가지입니다. GET, POST는 조금 더 구체적으로 설명할 예정이니 제외하고 나머지 4가지를 먼저 본다면 PUT, DELETE, HEAD, OPTIONS입니다.
PUT은 지정된 리소스에 데이터를 갱신하거나 새롭게 저장하는 것입니다. DELETE는 이름만 봐도 알 수 있다시피 삭제하는 것입니다. HEAD는 지정된 리소스의 헤더 즉 메타 데이터를 요청하는 것이고 OPTIONS는 리소스가 지원하고 있는 메소드를 표시하는 것입니다.
그 중에 가장 많이 사용되는 GET, POST를 중점적으로 보면 GET은 지정된 리소스의 데이터를 가져오라는 것이며 POST는 역으로 지정된 리소스에 해당 데이터를 보내라는 것입니다. 실전에서도 빈번하게 사용되는 것이니 가볍게 숙지해주는 것이 중요합니다.
HTTP 응답코드도 중요하니 가볍게 살펴보겠습니다.
100번대는 요청을 받았고 처리가 진행중인 것을 뜻합니다.
200은 요청이 완벽히 수행되었음을 의미합니다.
300번대부터는 뭔가 문제가 있는 것인데요. 300번대는 클라이언트가 뭔가 추가 동작을 수행해야하는 것을 의미합니다.
400번대는 클라이언트의 요청이 잘못되었음을 뜻합니다. 특히 오류의 대명사인 404 RESPONSE는 아주 유명하죠.
500번대는 클라이언트의 요청에 문제가 없음에도 서버 측에서 오류가 발생했음을 표시합니다.
HTTPS는 쉽게 말해서 HTTP의 암호화입니다. 예전에는 주로 암호화가 필요한 경우에 특별히 사용했는데 현재 개발되는 많은 서비스들은 HTTPS를 주로 사용하고 있습니다. HTTPS는 와이어샤크 등을 이용해서 중간에 메시지를 가로채도 도무지 해독 불가능한 메시지만을 출력하는 장점이 있습니다. 다시 말해서, 공격자가 중간에서 메시지를 가로챈다고 해도, 암호화되어서 표시되기 때문에 해당 메시지를(그 안에 담긴 내용을) 실질적으로 탈취하기는 어렵습니다.
여기까지 간단한 웹의 핵심 개념과 동시에 HTTP와 HTTPS를 살펴보았습니다. 매우 간단해보여도 이 안에 웹의 핵심이 담겨있습니다. 그러면 이대로는 조금 아쉬우니 가볍게 자바스크립트도 훑어볼까요?
const calculator = {
name: "hero",
add: function(a1, b1) {
return a1 + b1;
},
sub: function(c1, d1){
return c1 - d1;
},
div: function(a1, b1){
return a1 / b1;
},
mul:function(a1, b1){
return a1 * b1;
},
power: function(s1, v1){
return s1**v1;
}
};
const addResult = calculator.add(1, 13);
const subResult = calculator.sub(23, 24);
const divResult = calculator.div(31, 12);
console.log(addResult);
console.log(subResult);
console.log(divResult);
제가 직접 짠 간단한 계산기입니다. 매우 쉬운 예시이기 때문에 별다른 설명은 하지 않겠습니다.
const h1 = document.querySelector("div.hello:first-child h1");
function handletitleClick() {
const currentColor = h1.style.color;
let newColor;
if (currentColor === "blue"){
newColor = "white"
} else {
newColor = "blue"
}
h1.style.color = newColor;
}
h1.addEventListener("click", handletitleClick);
728x90
'호그와트' 카테고리의 다른 글
| 맛있는 치킨집 (1) | 2022.11.11 |
|---|---|
| pseudo code (0) | 2022.11.11 |
| 웹 기본 1 (0) | 2022.11.10 |
| 자유자재로 응용하는 익스플로잇 (0) | 2022.11.10 |
| 쿠키와 세션 (0) | 2022.11.10 |