HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤩
개발/네트워크(Network)/
🗽
Web 기본/
🕶️
Web 기본 3요소
🕶️

Web 기본 3요소

1. URL 설계URL vs URIURI(Uniform Resource Identifier)상대 경로에서 절대 경로로의 변환(시작점은 /foo/bar)URL (Uniform Resource Locator)URI 설계 원칙(RFC-3986)2. 3. HTML(HyperText MarkupLanguage)
notion image
  • URI(Uniform Resource Identifier) : 웹에는 상당히 많은 리소스가 포진되어 있는데 웹에 있는 어떤 자원에 접근하기 위한 유일한 식별자
  • HTML
  • HTTP

1. URL 설계

URL vs URI

핵심 차이 : URL은 프로토콜을 이용하여 어떻게 접근하는지에 대한 상세정보가 포함. URI는 어떠한 메서드를 사용했는지에 상관없이 리소스를 구분하기 위해 사용되는 것
URL
URI
URL은 아이템의 identity를 서술하기위해 사용됨
URI는 아이템의 identity를 정의하기 위해 사용되는 기술(technique)을 제공함
URL은 프로토콜과 같은 접근 메서드의 도움으로 웹 페이지, 혹은 웹 페이지의 컴포넌트로 연결해줌
URI는 어떠한 메서드를 사용했는지에 상관없이 하나의 리소스를 다른 리소스로부터 구분하기 위해 사용됨
URL은 어떠한 프로토콜을 사용했는지에 대한 상세정보를 제공해줌
URI는 프로토콜의 상세 정보는 포함하지 않음
URL은 URI의 하나의 종류
URI는 URL의 superset(URI ≥ URL)
구성요소: 프로토콜, 도메인(호스트), path, hash
구성요소: scheme, authority, path, query and many more
eg: https://www.geeksforgeeks.org/
eg: urn:isbn:0-294-56559-3

URI(Uniform Resource Identifier)

  • 인터넷에서 특정 자원을 나타내는 주소 값, 해당 값은 유일함(응답은 달라질 수 있음)
  • 요청 : https://www.fastcampus.co.kr/resource/sample/1
  • 응답 : fastcampus.pdf, fastcampus.docx
notion image

상대 경로에서 절대 경로로의 변환(시작점은 /foo/bar)

notion image

URL (Uniform Resource Locator)

  • 인터넷 상에서의 자원, 특정 파일이 어디에 위치하는지 식별 하는 주소
  • 요청 : https://www.fastcampus.co.kr/fastcampus.pdf
  • 특정 위치를 나타내는 것이기에 변경될 수 없음. URL은 URI의 하위 개념

URI 설계 원칙(RFC-3986)

  • 사용할 수 있는 문자 (ASCII 문자)
    • 알파벳 : A-Za-z
    • 숫자 : 0-9
    • 기호 : -.:~@!&’()
  • URI는 정보의 자원을 표현해야 함(리소스 명은 동사보다는 명사를 사용)
  • 슬래시 구분자(/) 는 계층 관계를 나타내는 데 사용함
    • Classes/java/curriculums/web-master
  • URI 의 마지막 문자로( / ) 는 포함하지 않는다.
  • 하이픈(-)은 URI 가독성을 높이는데 사용함
  • 자원에 대한 행위는 HTTP Method(POST, GET, DELETE, PUT)로 표현
      • x GET /members/delete/1 // 리소스 명은 동사보다는 명사를 사용
DELETE /memebers/1
x GET /members/show/1 // 이렇게 하지마라
GET /members/1
POST /task/1/run //HTTP Method로 안될 때는
  • 밑줄(_)은 사용하지 않음
  • URI 경로에는 소문자가 적합함
  • 파일 확장자는 URI에 포함하지 않는다
  • 프로그래밍 언어에 의존적인 확장자를 사용하지 않는다
  • 구현에 의존적인 경로를 사용하지 않는다
    • Https://fastcampus.co.kr/servlet/clases/~~
  • 세션 ID를 포함하지 않는다.
  • 프로그래밍 언어의 Method명을 이용하지 않는다
  • 명사에 단수형 보다는 복수형 사용. 컬렉션에 대한 표현은 복수로 사용
  • 컨트롤러 이름으로는 동사나 동사구를 사용
  • 경로 부분 중 변하는 부분은 유일한 값으로 대체
    • /curriculums/web-master/lessons/{lesson-id}/users/{user-id}
    • /curriculums/web-master/lessons/2/users/100
  • CRUD 기능을 나타내는 것은 URI에사용하지 않음
  • URI Query Parameter 디자인
    • Uri 쿼리 부분으로 컬렉션 결과에 대해 필터링 할 수 있음
      • …/curriculums/web-master?chapter=2
      • …/curriculums/web-master?chapter=2&page=0&size=10&sort=asc
    • URI 쿼리는 컬렉션의 결과를 페이지로 구분하여 나타내는데 사용함
  • API에 있어서 서브 도메인은 일관성 있게 사용해야함
    • Https://fastcampus.co.kr
    • Https://api.fastcampus.co.kr
    • Https://api-fastcampus.co.kr
  • 클라이언트 개발자 포탈 서브 도메인은 일관성 있게 만든다.
    • Https://dev-fastcampus.co.kr
    • Https://developer-fastcampus.co.kr

2.
HTTP
HTTP

3. HTML(HyperText MarkupLanguage)

  • HyperText는 텍스트만 있는것이 아니라 링크가 있어서 다른 정보를 볼 수 있는것 → 이게 웹
  • 마크업 : 표시하다. 단순히 텍스트가 아닌 구조적으로 표현할 수 있게(태그를활용하여) 하는 언어