[멋사] 웹 기초 간단! 정리

HTML이란?

HTML은 Hyper Text Markup Language의 약어로, 웹 페이지를 만들기 위한 가장 기본적인 마크업 언어입니다. HTML은 웹 페이지에서 텍스트, 이미지, 링크 등을 구성하는 데 사용됩니다.

HTML은 시작 태그와 종료 태그로 둘러싸인 요소(element)들의 집합으로 이루어져 있습니다. 요소는 웹 페이지에서 볼 수 있는 모든 것을 나타낼 수 있습니다. 예를 들어, \<p> 요소는 단락(paragraph)을 나타내고, \<img> 요소는 이미지를 나타냅니다.

HTML은 웹 개발에서 매우 중요한 역할을 합니다. 모든 웹 페이지는 HTML로 작성되며, HTML 태그를 사용하여 웹 페이지의 레이아웃, 텍스트, 이미지, 링크 등을 정의합니다. 이외에도 HTML은 검색 엔진 최적화(SEO)를 위해 중요한 역할을 합니다.

HTML은 웹 개발을 위한 기본 지식 중 하나이며, 모든 웹 개발자는 HTML을 숙달해야 합니다. HTML의 기본 개념과 태그들을 이해하면, 웹 페이지를 만들고 디자인할 수 있습니다.

HTML은 프로그래밍 언어인가?

HTML은 마크업 언어로, 프로그래밍 언어는 아닙니다.

프로그래밍 언어는 컴퓨터가 이해할 수 있는 코드를 작성하는 언어로, 프로그래밍 언어로 작성된 코드는 컴퓨터가 이해하고 실행할 수 있습니다.

반면에 HTML은 웹 페이지를 설계하고 구성하기 위해 사용되는 마크업 언어입니다. HTML은 웹 브라우저에게 어떤 내용이 웹 페이지에서 어디에 위치하고, 어떤 역할을 하는지 알려주는 역할을 합니다.

위에서 말한 마크업 언어란 무엇일까?

마크업 언어는 문서의 구조와 형식을 정의하는 언어입니다. 마크업 언어는 일반적으로 텍스트 파일로 작성되며, 태그와 속성을 사용하여 문서의 내용을 정의합니다.

마크업 언어는 웹 페이지를 만드는데 매우 중요합니다. 웹 페이지는 HTML이라는 마크업 언어를 사용하여 작성됩니다. HTML은 태그를 사용하여 웹 페이지의 구조와 내용을 정의하며, 웹 브라우저는 이 태그를 해석하여 페이지를 표시합니다.

다른 예로는 XML이 있습니다. XML은 데이터를 구조화하고 교환하기 위한 마크업 언어입니다. XML은 데이터를 태그와 속성으로 정의하여 문서의 구조를 나타내며, 다양한 응용 프로그램에서 사용됩니다.

마크다운(Markdown)은 일반 텍스트로 작성된 문서를 HTML로 변환해주는 마크업 언어입니다. 마크다운은 일반인도 쉽게 작성할 수 있고, 쉽게 읽을 수 있는 문서를 만들 수 있으며, 다양한 지원 도구가 있어서 많은 사용자들이 활용하고 있습니다.

 

웹이란?

간단히 말해서 웹(Web)은 인터넷을 기반으로 하는 정보 공유 시스템입니다.

웹의 특징

웹은 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공합니다.

하이퍼텍스트(hypertext)란 문서 내부에 또 다른 문서로 연결되는 참조를 집어 넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술을 의미합니다.

이때 문서 내부에서 또 다른 문서로 연결되는 참조를 하이퍼링크(hyperlink)라고 부릅니다.

웹의 구성

웹 ← 웹사이트 ←웹페이지들

웹페이지란 HTML 언어를 사용하여 작성된 하이퍼텍스트 문서를 말한다.

1. 클라이언트(Client): 사용자가 웹 브라우저를 통해 웹 페이지에 접속합니다. 웹 브라우저는 서버로부터 요청한 데이터를 받아와서 화면에 표시합니다. 사용자는 웹 브라우저를 통해 링크를 클릭하거나, 데이터를 입력하여 서버에 요청을 보낼 수 있습니다.
2. 서버(Server): 웹 페이지를 호스팅하고, 클라이언트의 요청에 따라 데이터를 제공합니다. 서버는 웹 페이지를 구성하는 HTML, CSS, JavaScript 등의 파일을 저장하고, 클라이언트의 요청에 따라 이러한 파일을 전송합니다.
3. 데이터베이스(Database): 서버는 데이터베이스에 저장된 데이터를 가져와서 클라이언트에게 제공합니다. 데이터베이스는 일반적으로 웹 사이트에서 사용되는 다양한 정보, 예를 들면 회원 정보, 게시글, 상품 정보 등을 저장합니다.
4. 네트워크(Network): 클라이언트와 서버 간에 데이터를 전송하기 위한 인터넷 연결이 필요합니다. 웹에서는 HTTP(HyperText Transfer Protocol)를 사용하여 클라이언트와 서버 간의 통신을 수행합니다.

웹 서버란

웹 서버란 HTTP 프로토콜을 이용하여 클라이언트의 GET, POST 등의 메소드를 활용한 요청을 서버에 전달하고 이를 서버라는 또 다른 컴퓨터가 그 요청을 처리하여 다시 클라이언트에게 전달해주는 작업이라고 생각할 수 있다.

1. 웹 서버(하드웨어)
   • 웹사이트의 컴포넌트 파일들을 저장하는 컴퓨터
   • 컴포넌트 파일에는 HTML, Images, CSS, JavaScript가 존재
   • 컴포넌트 파일을 인터넷을 통해 클라이언트에 전달
2. 웹 서버(소프트웨어)
   • 사용자가 어떻게 호스트 파일들에 접근하는지는 관리
   • 웹 서버는 주소 HTTP 프로토콜을 사용하여 클라이언트의 요청을 처리 및 응답

 

HTTP

클라이언트와 서버가 정보를 교환하는 가장 기본적인 프로토콜

HTTP는 클라이언트가 요청을 생성하기 위한 연결을 연 다음 응답을 받을 때까지 대기하는 전통적인 클라이언트-서버 모델을 따른다. 이는 클라이언트(웹 브라우저, 모바일 등)가 브라우저를 통해서 어떠한 서비스를 URI를 통해 서버에 요청(Request)하면 서버에서는 해당 요청에 대한 결과를 응답(Response)하는 형태로 동작하는 것을 말합니다.

• 클라이언트
  • 서버에게 요청을 보내는 리소스 사용자 ex) 웹 브라우저, 모바일 애플리케이션, IoT 등
• 서버
  • 클라이언트에게 요청에 대한 응답을 제공하는 리소스 관리자

 

URI 와 URL

URI(Uniform Resource Identifier)

URI는 인터넷상의 리소스 **“자원 자체”**를 식별하는 고유한 문자열 시퀀스입니다.

URI는 그 자체로 이름이거나, 이름+위치를 나타낸 형태 모두가 해당합니다.

ex) elancer.co.kr > URI

https://www.elancer.co.kr > URL, URI

URL(Uniform Resource Locator)

네트워크상에서 통합 자원(리소스)의 **“위치”**를 나타내기 위한 규약입니다. 이는 자원 식별자와 위치를 동시에 보여줍니다.

웹 사이트 주소 + 컴퓨터 네트워크 상의 자원 으로써 특정 웹 페이지의 주소에 접속하기 위해서는 웹 사이트의 주소뿐만 아니라 프로토콜(https, http, sftp, smp 등)을 함께 알아야 접속이 가능한데, 이들을 모두 나타내는 것이 URL 입니다.

즉, 어떻게 위치를 찾고 도달할 수 있는지까지 포함되어야 하기 때문에 URL은 프로토콜 + 이름(또는 번호) 의 형태로 나타낼 수 있습니다.

ex) https://www.elancer.co.kr > URL

차이점

URI가 더 포괄적인 개념이며 URL은 이 안에 포함됩니다.

 

쿠키 세션 토큰

등장배경

HTTP 통신은 요청(Request) -> 응답(Response) 이 종료되면 stateless (상태가 유지되지 않은) 한 특징 때문에 연결을 끊는 처리 방식입니다.

로그인과 같은 일을 할 때, '누가' 로그인 중인지 상태를 기억하기 위해 쿠키, 세션, 토큰을 사용합니다.

🍪 쿠키

쿠키는 공개 가능한 정보를 사용자의 브라우저에 저장시킵니다.

• 쿠키는 Key-Value 형식의 문자열입니다.
• 서버는 클라이언트의 로그인 요청에 대한 응답을 작성할 때, 클라이언트 측에 저장하고 싶은 정보를 응답 헤더의 set-cookie 에 담는다.
• 이후 클라이언트가 재요청 할 때마다 저장된 쿠키를 요청 헤더의 cookie 에 담아 보낸다.
• 서버는 쿠키에 담긴 정보를 바탕으로 해당 요청의 클라이언트가 누군지 식별 할 수 있다.

🔒 세션

session은 비밀번호와 같은 인증 정보를 쿠키에 저장하지 않고 대신에 사용자의 식별자인 session id 를 저장합니다. 서버에는 인증 정보와 더불어 이 ID에 해당하는 사용자의 정보를 저장합니다.

• 세션은 서버에 저장하기 때문에 사용자가 수백, 수천, 수만으로 늘어난다면 해당 유저의 정보를 찾고 데이터 매칭에 오랜 시간이 걸리면서 서버에 부하가 가해지게 됩니다.

💰 토큰

❕Authentication : 인증 / 유저가 누구인지 확인하는 절차, 회원가입하고 로그인 하는 것.

❕Authorization : 인가 / 유저에 대한 권한을 허락하는 것.

사용자가 자신의 아이덴티티를 확인하고 고유한 액세스 토큰을 받을 수 있는 프로토콜을 말합니다.

JWT

오늘날의 토큰은 JWT(JSON Web Token)을 사용합니다.

토큰은 헤더(Header),페이로드(payload),서명(signature) 세 파트를 . 으로 구분하는 구조입니다.

 

참고자료

What is a web server? - Learn web development | MDN

What is a web server? - Learn web development | MDN

HTTP

HTTP - 위키백과, 우리 모두의 백과사전

URI와 URL, 어떤 차이점이 있나요? | 이랜서 블로그

URI와 URL, 어떤 차이점이 있나요? | 이랜서 블로그

토큰 기반 인증이란? 인증 토큰의 종류와 JWT의 이점 | Okta Identity Korea

토큰 기반 인증이란? 인증 토큰의 종류와 JWT의 이점 | Okta Identity Korea