HTTP를 이해하기 위한 첫 단추, URL

멀리서 단조로워 보이는 산도 한 걸음 다가가면 수많은 나무와 풀로 어우러져 있습니다. 인터넷 또한 그런 것 같습니다. 겉으로는 단일한 공간처럼 보이지만, 그 안에는 수없이 다양한 프로토콜과 데이터로 얽혀 있습니다.웹은 인터넷이라는 단단한 토양을 기반으로 움직이는데요. 잘만 활용하면 멋진 기능을 금방 만들어 낼 수 있습니다. 만약 원리에 대한 이해를 조금 더 넓히신다면, 훨씬 안정적이고 빠른 제품을 만드실 수 있을겁니다.이 글에서는 인터넷을 이루는 기초 요소 중 'URL'이라 부르는 주소에 대해 소개해 드리겠습니다. URL브라우져가 서버로 요청을 보낼 때 URL을 사용합니다. 검색창에 입력하는 그것이 말이죠. 서버를 찾기 위한 '전화번호'라고 생각해도 좋습니다.URL은 일정한 규칙을 갖고 있는데요. 이제부터 이 규칙을 하나씩 소개해 드릴게요.프로토콜://도메인:포트/경로?쿼리문자열#앵커 프로토콜'프로토콜을 맞춘다'라고 표현할 때는, '대화의 규칙을 정하자'라는 뜻입니다. URL 맨 앞에 있는 이 프로토콜(protocol)이 규칙의 종류를 구분하는 요소입니다.http:: HTML 문서를 가리키는 URL입니다. 브라우져는 HTML 문서를 다운로드하고 이것을 사람이 볼 수 있는 형태로 보여줄 거에요.mailto:: 링크를 클릭했는데 메일 앱이 실행된 적이 있나요? 바로 이 프로토콜로 시작하는 URL입니다.tel:: 전화가 걸린다면 당황하실지도 모릅니다. 브라우져는 이 프로토콜로 시작하는 URL을 전화 앱과 함께 실행합니다. 도메인프로토콜에 이어 도메인(domain)은 서버의 위치를 나타내는 규칙입니다. 브라우져는 이 도메인이 가리키는 IP 주소를 찾기 위해 DNS(Domain Name Server)에 질의하기도 합니다.예를 들면 google.com, naver.com 같은 거에요. 각 각 구글 서버, 네이버 서버 위치를 가리킵니다. 직접 서버를 실행해 개발할 때는 "이 컴퓨터"를 가리키는 localhost라는 도메인도 자주 만나게 되실 거에요.도메인은 인터넷이라는 세상에서 국가를 가리키는 역할을 합니다. 포트도메인에 해당하는 서버를 찾았다면, 그 안에서 실행되고 있는 프로그램에 접속할 차례입니다. 한 국가에 들어가기 위해 항구를 찾듯이, 포트(port)는 서버 안에서 실행 중인 프로그램을 식별하는 규칙입니다.무려 65,536개(2^16)개의 포트를 가지고 있는데요, 클라이언트는 이 중 하나를 골라서 들어 갑니다. 마치 한국에 들어올 때 인천항이나 부산항을 선택하는 것처럼요.잘 알려진 포트: 0~1023 구간으로, 운영제제만 쓸 수 있는 특별한 포트입니다. (80: HTTP, 22: SSH)등록된 포트: 1024~49151 구간으로, 여러 애플리케이션이 관례적으로 사용하는 포트에요. 보통 개발 환경에서 자주 사용합니다. (8000: 웹 개발용)동적 포트: 49152~65535 구간으로, 일시적으로 할당되는 포트입니다. (예를 들어 클라이언트가 서버의 80 포트로 요청을 보내면, 서버는 이 구간에 속하는 임시 포트를 활용해 클라이언트에 응답을 전달합니다.) 경로프로그램은 여러가지 형태의 파일을 제공하는데요, 이 파일을 식별하는 규칙이 경로(path)입니다.브라우져는 이걸 통해 "이 파일을 주세요"라고 서버에게 요청할 수 있어요. 서버가 이 파일을 찾아서 보내주면, 브라우져는 그것을 화면에 표시할 겁니다./index.html → "웹사이트 첫 화면을 주세요"/images/logo.jpg → "로고 이미지를 주세요"/css/styles.css → "스타일시트 파일을 주세요"집을 찾기 위해 나라와 도시(도메인과 포트)를 찾았다면, 경로는 특정 건물을 가리키는 셈이지요. 쿼리 문자열과 앵커때로는 서버에 추가적인 정보를 전달할 필요가 있는데, 쿼리 문자열(querystring)이 이 역할을 합니다.위치: 경로 뒤에 '?' 기호와 함께 작성합니다.형식: "키=값"형태로 데이터를 표현합니다. (예: '?query=검색어' 검색결과 페이지 요청)배가 특정 지점에 머물도록 닻을 내리 듯, 앵커(anchor)는 HTML 문서안의 특정 위치를 가리키는 역할을 합니다.위치: 경로 혹은 쿼리 문자열 뒤에 '#' 기호와 함께 작성합니다.id 값 사용: HTML 문서에서 요소에 부여한 id 값을 참조합니다. (예: #post-title) 정리지금까지 HTTP 핵심 요소인 URL에 대해 살펴보았습니다. 이것은 인터넷 상의 자원을 식별하는 주소이자, 브라우져가 서버와 대화하기 위한 출발점입니다.브라우져는 단순히 URL만 전달하는 것이 아니라, 헤더와 본문을 추가해 하나의 요청(Request)를 만듭니다. 이 요청을 받은 서버는 자원을 찾아낸 뒤, 상태 코드, 헤더, 분문을 추가해 응답(Response)로 돌려줍니다. 이렇게 요청과 응답을 수없이 주고 받으며 우리가 매일 사용하는 웹이 움직이는 것이죠.더 깊이 있는 이해를 원하신다면 제가 준비한 강의, 「웹 개발의 핵심, HTTP 완벽 마스터하기!」 1편을 참고해 보시면 도움이 될 것입니다. 웹을 처음 배우시는 분에게는 든든한 길잡이가, 경험자에게는 기초를 재정립하는 기회가 될 것입니다.이 강의에서 다루는 내용1편. HTTP 기본2편. 브라우져3편. AJAX4편. 추가 프로토콜5편. 보안6편. 성능

🚀 개발 스킬 레벨업! 25% 할인 이벤트 (~ 2024년 11월 3일 까지) 🚀

개발자분들, 그리고 개발자가 되기를 꿈꾸는 취업 준비생 여러분, 모두 주목해주세요! 오늘부터 2024년 11월 3일까지 인프런 강의 25% 할인 이벤트를 진행합니다.이런 분들께 추천드립니다실무에서 사용하는 최신 웹 기술을 배우고 싶은 개발자 성공적인 취업을 목표로 웹 개발 역량을 키우고 있는 취준생📅 할인 기간: 2024년 10월 21일 ~ 2024년 11월 3일 이번 기회에 개발 역량을 한 단계 업그레이드해보세요.강의 목록리액트 1부) 만들고 비교하며 학습하는 리액트:React의 핵심 개념과 동작 원리를 다양한 예제를 통해 이해하세요. 리액트 2부) 고급 주제와 훅:리액트의 고급 기능과 최신 트렌드를 따라잡고 싶은 분들께 강력 추천! 프론트엔드 개발환경의 이해와 실습 (Webpack, Babel, ESLint):현업에서 사용하는 개발 환경을 직접 구성해보며 익히는 시간! 실습 UI 개발로 배워보는 순서 JavaScript와 Vue.js 개발:실전 프로젝트로 JavaScript와 Vue.js를 체계적으로 배우세요! 트렐로 개발로 배우는 Vue.js, Vuex, Vue-router 프론트엔드 실전 기술:실제 프로젝트를 통해 프론트엔드 스킬을 한 단계 업그레이드하세요. 견고한 JS 소프트웨어 만들기 :코드 품질을 높이고 유지보수성을 강화하는 방법을 배울 수 있습니다.