1. 기획의 시작.
언제가부터 프로그래밍은 어떤 기술 스택을 다룰 줄 아느냐에 대해서 굉장히 중시되고 있는 것 같다.
프론트는 말할 것도 없거니와, 백엔드 역시 다양한 기술 스택들이 급속도로 발전하고 있는 것은 부정할 수 없는 사실이다.
하지만?
필자는 여기서 한 번 의문이 들었다.
물론.... 저 많은 기술 스택 다 알고 잘 다루면, 정말 좋겠지만... 저런 기술들의 근본도 모르고서 제대로 된 개발자라고 할 수 있을까?
부끄러운 얘기지만, 필자 역시 저런 기술들을 익혔지만 완벽하게 근본에 대해 아직 많이 부족하다는 생각이 든다. 그래서 이제는 근본을 하나씩 더 단단하게 다져야 한다는 생각에 근본시리즈라는 미명 아래에 새로운 기획 시리즈를 연재해 보겠다. 앞으로 필자의 개발 프로그래밍의 근본과 초석을 다지기위해서라도...
2. 근본의 의미.
어떤 기술을 무지성으로 사용하지 않아야 하는 것처럼, 언어에 있어서도 말의 뜻을 이해하고 넘어가야 한다.
그래서 준비했다. 근본이란 것의 참뜻.
한자로 풀자면, 결국 뿌리 전체에서 땅에 뭍힌 부분을 의미한다. 즉, 본질이자 핵심이다. 간단한 얘기를 해보겠다.
현재, 꽃이 만발해서 겉으로 보기 좋아보이는 나무와 꽃 한 점 피지 않는 푸른 잎만 가진 나무가 있다. 당신이라면 현재 어떤 나무를 선택하겠는가?
백이면 백. 거의 대부분의 사람은 꽃이 만발한 나무를 선택할 것이다. 하지만, 그 나무가 30년 아니 비단 10년 도 못 가서 죽어버리는 것은 상상도 못한 채로 말이다. 이와 반대로, 꽃 한점 피지 않는 나무는 30년을 넘어 100년이 넘어도 살아남으면서 뿌리 깊은 나무의 본질을 보여준다.
필자는 이것이 비단, 설화 같은 애기라고 생각하지 않는다. 웹의 기술 역시 마찬가지라고 생각한다. 앞서 수많은 기술 스택이 출시되었고, 출시 예정이라고 하지만, 우리에게 본질은 웹에 대한 기본적인 이해라고 본다.
3. 웹의 근본적인 동작 원리.
앞서, 사설이 좀 길었던 것 같지만, 결국 이 얘기부터 시작하고자 한다.
1) 웹과 현실의 상관 관계?
개발자들의 백과사전인 MDN에 들어가서 웹의 동작원리에 대해 검색해 보면 이런 그림이 나온다.
처음에는 필자 역시 그림만 봐서는 도저히 그 뜻을 알기 힘들었다.
지금은, 웹이 도로라고 상상해봅시다. 도로의 한 쪽 끝은 여러분의 집 같은 클라이언트 입니다. 다른 한 쪽 끝은 여러분이 뭔가를 사길 원하는 상점같은 서버입니다.
그렇다. 우리가 보통 인터넷에 접속해서 어떤 곳에 접속하는 이런 일련의 과정은 마치 어딘 가로 향하는 것과 같다. 장소마다 주소가 있고, 웹에서도 도메인마다 주소가 있듯이 우리는 어떤 주소지로 찾아가고, 그곳에 찾아가면 우리는 정신적으로 물질적으로 뭔가를 보게 된다. 그래서 이런 감을 잡고 한 번 웹의 동작 방식에 대해 한 번 생각해 보면 쉽게 이해할 수 있다.
2) 웹의 동작 원리 1단계
우리가 흔히 웹의 동작 원리라고 구글링을 해 보면 나오는 대표적인 이미지다.
사실 이 압축된 그림이 웹의 시작이자 끝을 잘 대변해 주고 있다고 생각한다.
사실, 각 페이지의 모든 개념에 대해 설명하면 좋겠지만, 그 보다는 이번 시리즈에서는 웹의 동작과 흐름만 간단하게 알아보는 글이므로... 어떤 흐름으로 흘러가는 지만 이해하고 넘어가겠다. 추후 이에 대해서는 더 자세한 글로 찾아뵙겠다.
<동작의 순서>
- 사용자는 우리가 흔히 보통 도메인 주소라고 불리는 웹페이 url(여기서는 www.google.com)을 입력하고 웹에 접속한다.
- 그러면 dns라고 불리는 domain name system이 도메인 네임을 ip주소로 변환한다. 여기서 변환하는 이유는 기본적으로 원래 통신은 숫자로 된 주소 체계를 통해 이루어져 있다. 하지만, 사용자의 편의성을 위해 도메인으로 변환해 준 것 뿐이다. 따라서 이때 해당 값을 다시 컴퓨터가 읽기 편하도록 ip주소로 변환해 줘야 한다.
- 그리고 다시 http라고 불리는 일명 HyperText Transfer Protocol 을 통해 서버에 html 데이터를 서버에 요청하게 된다.
여기서 간단히 정리하자면, HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지(HTML)나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 된다. 이 정보가 모니터와 같은 출력 장치를 통해 사용자에게 나타나는 것이다.
- 여기서 다시 tcp라는 전송 제어 프로토콜을 통해 다시 클라이언트와 서버간의 통신이 이루어진다.
전송 제어 프로토콜(Transmission Control Protocol, TCP, 문화어: 전송조종규약)은 인터넷 프로토콜 스위트(IP)의 핵심 프로토콜 중 하나로, IP와 함께 TCP/IP라는 명칭으로도 널리 불린다. TCP는 근거리 통신망이나 인트라넷, 인터넷에 연결된 컴퓨터에서 실행되는 프로그램 간에 일련의 옥텟을 안정적으로, 순서대로, 에러없이 교환할 수 있게 한다. TCP는 전송 계층에 위치한다. 네트워크의 정보 전달을 통제하는 프로토콜이자 인터넷을 이루는 핵심 프로토콜의 하나로서 국제 인터넷 표준화 기구(IETF)의 RFC 793에 기술되어 있다.
-> 결론적으로 말하자면, 서버에 가기 위한 터널 같은 곳이라고 생각하면 되겠다.
- tcp를 통해 http를 거쳐 사용자, 즉 클라이언트의 요청이 제대로 전달이 된다면, 웹 서버에 도달하게 된다. 그러면 http는 서버에 서버에서 정해둔 웹 서버의 데이터가 담긴 url을 전달한다.
- 다시 웹서버는 해당 url의 데이터를 이제는 반대로 http의 응답 메시지로 tcp, http 등을 거쳐서 클라이언트에게 전달한다.
- 정상적으로 데이터가 전달된다면, http는 서버에서 받아온 웹 페이지 데이터(대개 html 데이터)를 웹 브라우저에 다시 전달한다.
- 그러면 웹 브라우저는 다시 해당 데이터(html 문서)를 분석해서 돔에 랜더링을 시켜서 사용자가 화면에 볼 수 있도록 그려준다.
이렇게 처리가 끝나면 사용자는 웹 상에서 화면을 볼 수 있는 구조다. 즉, 이런 기본적인 원리에 따라 웹의 다양한 기술들이 조금 더 빠르게, 더 효율성 높게 발전했다고 보면 이해하기 쉽다. 이 글을 읽으시는 모든 분들이 조금이라도 이해가 되었으면 한다. 부족한 부분은 향후에도 지속적인 포스팅을 통해 채워나가겠다.
이후에 바로 8번 과정에서 우리가 흔히 얘기하는 돔에 대한 조작이 이뤄지는데, 프론트 개발자인 필자는 이 돔에 대해 조금 더 공부를 해보고 싶기에... 아마 다음 편에서 그 얘기를 이어가고자 한다.
그러면 뿌리 깊은 나무와 같은 개발자가 될 수 있도록 다시 철저히 공부해서 다음 편 <돔의 조작에 대한 웹의 동작 원리>를 잘 준비해서 포스팅 해 보겠다.
그럼 우리 모두 뿌리깊은 나무가 되는 그날까지~~~
