도도의 IT이야기
[자바스크립트 기본-1] 우선 웹이란 무엇일까? 본문
저는 왕초보 독학러로써 제가 적은 부분에 틀린 부분이 있을 수도 있다는 점을 감안해주시길 바랍니다.
HTML, CSS, 자바스크립트는 전부 다 웹 개발에 사용되는 언어입니다.
우리는 이 중에 자바스크립트(JavaScript)라는 언어에 대한 고찰을 시작하려고 합니다.
하지만. 그전에 우리가 꼭 알아야 하는것이 있습니다.
웹은 무엇일까?
인터넷 > 웹 > 웹사이트 > 웹페이지
우리는 웹을 자주 사용하지만 지나가다 아무나 붙잡고 "웹이 뭐야?!"라고 물어본다면 정확한 정의를 대답할 수 있는 사람은 많지 않을겁니다.
우선 웹을 이해하기 전에 인터넷이라는 것에대해 알아야합니다.
인터넷이란?
인터넷은 컴퓨터, 스마트폰을 포함한 전자기기들을 포괄하는 거대한 네트워크입니다. 비유를 하자면 우리가 전자기기고 인터넷은 우리를 감싸고 있는 거대한 바다라고 표현할 수도 있겠네요. 인터넷이란 네트워크 안에서 우리는 지구 반대편에 있는 친구와도 손쉽게 채팅을 주고 받을 수 있습니다. 그리고 이 인터넷에는 사람들이 작성한 많고 많은 정보들이 존재합니다. 예전엔 정보를 얻기위해 신문을 사러 가야 했지만 지금은 클릭 몇번으로 엄청난 양의 정보를 얻을 수 있습니다.
웹은 뭘까?
웹은 인터넷 안에 있는 정보들을 효율적으로 주고 받을 수 있게 해주는 정보 시스템입니다. 웹은 수 많은 웹사이트들로 이루어져 있습니다. 웹사이트란 텍스트, 동영상, 그림이나 다른 형태의 미디어들로 이루어진 정보들을 하나의 동일한 이름(domain name)으로 묶은 것 입니다. 그리고 실제로 웹사이트 안에서 우리들의 모니터 보여지는 각각 특정한 정보들의 집합을 우리는 웹페이지라고 합니다.
그럼 우리는 이제 인터넷이라는 네트워크를 통해 웹사이트에 접속하여 동영상을 보거나 친구들과 채팅을 하거나 뉴스를 볼 수 있다는 사실을 알게됬습니다.
웹과 열결하는 방법
그럼 웹에 있는 정보들이 어떻게 우리 앞에 나타나는 걸까요?
우리가 침대에 누워있는데 "아 네이버에서 축구 뉴스가 보고싶다!"라고 외치면 우리 앞에 네이버 스포츠가 짠하고 나타나지 않습니다. 그럼 어떻게 우리는 웹에 연결할까요? 당연한 얘기지만 우선 인터넷에 연결되어 있어야 합니다. 인터넷과 연결되는 과정을 설명하는 것을 너무나도 복잡하고 저도 완전히 이해를 하지 못했기에 그 과정을 생략하고 우리에게 인터넷과 연결되어있는 아이폰이 있다고 가정합시다.
그럼 우리는 이제 방대하고 거대한 웹에서 "네이버"라는 특정한 웹사이트를 찾아내야 합니다. 다행히도 우리에겐 인터넷(웹)안에 있는 특정한 웹사이트에 원활하게 접속시켜주는 어플리케이션이 있습니다. 그것이 바로 "웹 브라우저"라는 어플리케이션인데 예전엔 IE를 많이 사용했지만 요즘엔 "구글 크롬"이 웹브라우저 시장의 거인이 됬죠. 그럼 우선 우리는 구글 크롬에 접속합니다. 그리고 이제 naver라는 domain name이 포함된 www.naver.com 이라는 네이버의 URL주소로 접속합니다.
우리가 URL주소를 입력하면 마법처럼 네이버가 모니터에 나오지만 이 과정을 조금 더 자세히 설명하겠습니다.
IP 주소
우선 인터넷에 접속된 모든 기기는 고유의 IP(internet protocol)주소라는 것을 가지고 있습니다. 지금 우리가 사용하고 있는 컴퓨터나 스마트폰 또한 고유의 IP주소를 가지고 있죠. 그리고 네이버 웹을 운영하고 웹 서버 컴퓨터 또한 고유의 IP주소가 있습니다. 그래서 웹서버 컴퓨터에 접속하기 위해서는 이 웹 서버의 IP주소를 이용해 연결해야 합니다. 하지만 IP주소는 212.132.243.123 이거나 2001:0db8:85a3:0000:0000:8a2e:0370:7334 이런 외우기 굉장히 어려운 숫자와 문자의 조합이기 때문에 직접적으로 IP주소를 쳐서 웹에 연결하는 방식은 많이 쓰이지 않습니다. (직접적인 IP주소로 치는 것도 가능합니다! 125.209.222.141 이것을 한번 검색창에 쳐보세요)
그래서 우리는 복잡한 IP 주소를 치지 않고 그 사이트의 도메인 이름이 포함된 URL주소로 접속을 많이 합니다. www.naver.com 이런 방식으로요. 그럼 앞에서는 무조건 IP주소로 연결해야 한다고 했는데 왜 도메인 이름을 쳐도 네이버로 가는 걸까요? 우선 도메인 네임을 입력하면 네이버로 바로 가는것이 아니라 DNS(domain name server)서버라는 곳으로 보내집니다. DNS서버는 naver라는 도메인의 IP주소를 자신의 데이터베이스에서 찾아낸 다음에 우리를 자동적으로 네이버에 연결시켜주는 겁니다.
이제 우리는 네이버와 연결됬습니다. 그럼 웹브라우저는 공식적으로 "네이버야 너에 대한 정보를 주렴"이라는 HTTP 요청을 합니다. 여기서 HTTP란 클라이언트(사용자)와 웹서버가 정보를 주고 받을떄 따르는 규약이나 약속을 뜻합니다. 그러니까 우리가 회사에 공식적인 이력서를 보낼때 따라야하는 규칙이 있지 않습니까? 이런것처럼 클라이언트와 웹서버도 HTTP라는 규칙을 따릅니다.
그럼 다시한번 말하자면 우리는 웹서버에게 HTTP규약을 따르는 HTTP요청을 보냅니다. 그럼 네이버가 요청에 따른 응답을 하고 우리는 네이버를 우리 모니터에서 볼 수 있는 것입니다.
HTTP요청과 응답 세부내용
그럼 앞서 말한 내용을 조금더 자세히 알아봅시다. 아 여기서 부턴 약간 어려운 내용이므로 헷갈리시면 안읽으셔도 됩니다.
이게 웹의 작동원리입니다. 감사합니다. 끝! 이라고 해도 될만큼 요청과 응답은 웹의 핵심입니다. 간단하게 말하면 "네이버 스포츠를 요청한다 네이버!"라고 우리가 요청하면 "알겠다 지금 보내주지"라고 네이버 웹서버가 응답하는 것입니다. 하지만 저는 조금더 깊숙히 이들의 관계를 알아보려고합니다.
그럼 직접 네이버를 접속해보면서 요청과 응답을 알아보겠습니다. 구글 개발자 도구에서 network 탭에 가시면 우리가 웹서버와 요청하고 응답한 내용들이 나와있으니 그걸 보면서 알아보죠.
위 사진은 네이버에 접속한뒤 클라이언트(사용자)가 웹서버에게 보낸 첫번쨰 HTTP요청을 보여줍니다.
우선 우리의 첫번째 요청은 www.naver.com 입니다. 그리고 옆에는 우리의 요청에 대한 Request Header이라는 것이 있습니다. 이건 도데체 뭐냐? request header이란 클라이언트가 웹서버에게 보낸 요청의 세부 정보들을 나열한 것입니다. 그럼 나열된 정보를 볼까요? 우리의 요청에 대한 authority(권한)은 당연히 네이버에게 있네요. 그래서 네이버 웹 서버가 우리의 요청에 응답을 하든 말든 자기 마음입니다.
그리고 우리는 이 요청을 GET이라는 방법으로 하네요. 간단히 말하자면 GET이란 웹서버로부터 어떠한 정보를 가져올때 사용되는 방법입니다. 우리는 네이버에게 어떠한 정보도 주지 않았습니다 그저 정보를 요구했을 뿐이니 여기서는 GET을 사용한겁니다.
마지막으로 우리는 네이버 스포츠나 네이버 뉴스 같은 페이지에 간게 아니라 네이버 메인으로 갔으니 path는 / 입니다. request header을 더 읽어보시면 cookie, 웹브라우저 정보가 담겨있는 user-agent같은 정보들도 담겨져 있습니다.
위 사진은 요청에 대한 네이버의 응답을 보여줍니다.
Response header은 네이버의 응답에 대한 세부내용을 보여주는 것입니다. 여기서 꼭 기억해야하는 것이 있습니다. 우선 STATUS란 요청의 상태를 가리킵니다. status : 200은 요청을 성공적으로 받았다는 의미입니다. status가 3xx로 시작하면 다른 주소로 redirect 된다는 의미이고 status가 4xx면 에러를 뜻합니다.
이제 성공적으로 요청을 받은 웹 서버는 그에 따른 응답을 합니다. 어떤 응답을 했는지 저기 content-type에 나와 있군요. 웹서버는 클라이언트(웹브라우저)에게 text/HTML 즉 HTML파일을 줬습니다. 이 HTML파일은 RESPONSE BODY라는 곳에 담겨서 웹브라우저로 전송되고 웹브라우저는 content-type에 나와있듯이 HTML형식으로 파일을 분석(파싱)합니다. 만약 이러한 HTML 파일을 받았다고 합시다.
<html>
<head>
<link rel="style.css" href="naver/123">
</head>
<body>
//네이버 홈페이지에 대한 HTML문서
//뉴스, 키워드, 검색창 등등
<script src="fluid.js"></script>
</body>
</html>
우선 웹브라우저가 쭉 보다가 <head>태그 안에 style.css가 필요하다는 것을 깨닫습니다. 그래서 HTML은 CSS파일 요청을 보내고 웹서버는 style.css파일을 보내줍니다. 이제 CSS 파일을 받은 웹브라우저는 스타일을 적용한 HTML을 모니터에 출력합니다. 이제 <body>가 끝날때 이번엔 fluid.js라는 파일을 요청하고 받은 자바스크립트 코드를 HTML에 적용합니다.
조금 관련없는 얘기 지만 broken page를 예방하기 위해선 CSS를 <head>안에 넣는게 좋습니다. 그리고 JS파일은 HTML의 요소들이 전부 로드가 된 후 적용해야 되는 파일이기에 <body>의 마지막에 위치하거나 async, defer, window.addeventlister 등 다른 방법을 이용하셔야 합니다.
이제 우리는 HTML CSS JS 파일을 한번에 다 받는게 아니라 처음에 받은 HTML이 그들을 순서에 맞게 요청한다는 것을 배울 수 있었습니다.
GET/POST/PUT/DELETE 방법에 대한 추가설명 (중요하지 않으니 안읽어도 됨)
GET은 거의 어떠한 리소스 또는 asset을 가져올때 사용되는 method(방법)입니다. 우리가 하는 많은 요청들은 이것에 해당되기 때문에 거의 90%이상은 GET method를 사용한다고 생각하시면 됩니다. 그리고 POST method는 페이스북에 새로운 포스트을 올리거나 간단하게 로그인할때 처럼 우리가 웹 서버에게 어떠한 정보를 보낼때 사용합니다. 우리가 보낼 정보는 POST BODY에 담기고(JSON이 담기는게 흔함) content type을 포함해야 합니다. 만약 POST BODY에 JSON이 담겼다면 content-type (application/json)을 포함해서 보내야 웹서버가 해당하는 content-type대로 post body를 해석합니다. 그리고 PUT은 내용을 수정하거나 변경할때, DELETE는 어떤 내용을 삭제할때 많이 사용합니다.
GET은 리소스를 가져올때 사용한다고 말씀드렸지만 클라이언트가 데이터를 보낼때에도 사용할 수있습니다. 근데 GET은 보내는 내용을 POST BODY에 담지 않고 url에 포함시켜 보내기 때문에 굉장히 긴 내용이나 아이디 비밀번호 같은 프라이버시한 내용을 보낼때엔 사용하면 안됩니다. 그리고 자세히 아는건 아니지만 캐쉬를 사용할때는 POST말고 GET을 사용해 데이터를 보내야 한다더군요.
HTML말고 JavaScript도 웹서버에 요청을 보낼 수 있다
아까 요청한 네이버 홈페이지가 HTML CSS JS가 모두 잘 적용되어서 모니터에 비추고 있다고 합시다. 만약 우리가 네이버 홈페이지의 쇼핑 리스트 부분에서 다음 버튼을 클릭하면 어떻게 될까요? 당연한 얘기지만 다음 쇼핑리스트를 보여줍니다. 이때 중요한건 홈페이지의 내용이 바꼈다는 것입니다. 홈페이지의 내용이 바꼈다는 의미는 즉 HTML에 변화가 있었다는 의미입니다. 하지만 HTML은 혼자 마음대로 변할 수 없습니다(자바스크립트의 도움없이는). 다른언어의 도움없이 HTML을 바꾸려면 웹서버에서 새로운 HTML파일을 요청하는 방법밖에는 없습니다. 그리고 파일을 다시 요청한다는건 새로운 HTML을 요청하고 그에따른 CSS JS 다시 요청해야하니 시간도 걸리고 굉장히 비효율적입니다. 그래서 페이지의 작은부분에 변화가 일어날때에는 JavaScript를 사용해야합니다.
JavaScript라고 말했지만 자세히 말하자면 우리는 JS의 기술중 하나인 AJAX를 사용하는 것입니다. AJAX는 xmlHttpRequest라는 객체를 사용해 페이지를 새로고침 하지 않고 웹서버로 부터 데이터를 받을 수 있습니다.
const btn = document.querySelector('#next-btn');
const shoppingList = document.querySelectorAll('.shopping-list');
btn.addEventListner('click',function(){
let xhr = new xmlHttpRequest;
xhr.onload=function(){
let data = JSON.parse(xhr.responseText);
shoppingList.forEach((list,index)=>{
list.innerHTML=data[index];
});
}
xhr.open('GET',exampleSite.com/123,true);
xhr.send();
});
위의 예제처럼 버튼을 누르면 HTTP 요청을 하여 데이터를 웹서버로 부터 받아 새로운 쇼핑리스트를 나오게 하는 코드를 만들 수 있습니다.
웹의 기본에 대해 설명하려고 했는데 다른 얘기도 너무 많이 했네요.
마지막 부분들은 신경안쓰셔도 상관없을거 같습니다.
'IT > 자바스크립트' 카테고리의 다른 글
| [자바스크립트 기본]객체,생성자,프로토타입,프로토타입 체인 (1) | 2020.05.08 |
|---|---|
| Object.prototype.toString() 메서드 (0) | 2020.05.07 |
| [자바스크립트 기본] 문법과 리터럴 (0) | 2020.05.07 |
| [자바스크립트 기본] 자바스크립트의 정의와 web API (0) | 2020.05.06 |
| 콜백의 개념. 비동기적과 동기적 콜백의 차이점 (2) | 2020.05.05 |
