웹 도메인의 구조

웹 도메인이란 무엇이고 각각의 역할은 무엇이 있을지 공부해보겠습니다.

1. 도메인(Domain)

정의

• 인터넷 상에서 특정 웹 서버를 가리키는 주소

• 브라우저가 어느 서버에 요청을 보낼지를 결정.

• 사람이 읽기 쉽게 작성된 URL의 주요 부분.

https://example.com

도메인의 구성 요소는 아래 3가지로 이루어집니다.

1. 프로토콜 (https://):

• 서버와 통신할 때 사용하는 방식.

• http, https, ftp 등이 있음.

2. 도메인 이름 (example.com):

• 특정 서버를 가리키는 이름.

• DNS(Domain Name System)를 통해 IP 주소로 변환되어 사용됨.

3. 서브도메인 (www.):

• 도메인의 하위 섹션.

• 예: www.example.com의 www는 서브도메인

• 아래 예시 처럼 하나의 도메인으로 여러개의 웹을 관리할 수 있게 해줍니다

mail.google.com   → Gmail
docs.google.com   → Google Docs

4. TLD(최상위 도메인) (.com):

• 도메인의 마지막 부분.

• 일반적인 TLD: .com, .org, .net.

• 국가 코드 TLD: .kr, .jp, .us.

예시

• https://google.com → Google의 웹사이트.

• https://sub.example.com → example.com의 하위 섹션.

우리가 도메인에 접근할때 이루어지는 과정은 아래와 같습니다

도메인의 작동 원리

1. 사용자가 브라우저에 example.com을 입력.

2. 브라우저는 DNS 서버에 example.com의 IP 주소를 요청.

3. DNS 서버는 도메인에 매핑된 IP 주소를 반환.

4. 브라우저가 해당 IP 주소의 서버에 요청을 전송.

5. 서버가 요청을 처리하고 웹 페이지를 반환.

도메인은 아래와 같은 역할을 담당합니다.

도메인의 역할

1. IP 주소 대체:

• IP 주소는 숫자로 되어 있어 사람이 기억하기 어려움.

• 도메인은 이를 대체해 기억하기 쉬운 형태로 제공.

2. 브랜드와 정체성:

• 도메인은 웹사이트의 브랜드를 나타냄.

• 예: google.com은 Google의 정체성을 담고 있음.

3. 접근성 향상:

• 도메인은 사용자와 서버 간의 연결을 쉽게 만들어줌.

4. 서비스 분리:

• 서브도메인을 통해 서비스를 분리하고 관리.

• 예: shop.example.com, blog.example.com.

---

2. 패스(Path)

도메인 다음의 / 이후의 값들을 Path라고 합니다.

정의

• 도메인 내에서 특정 리소스(파일, 페이지 등)를 가리키는 경로.

• URL의 도메인 뒤에 위치하며 “/”로 계층 구조를 나타냅니다.

https://example.com/products/electronics

특징

• 계층 구조를 통해 파일이나 디렉토리를 나타냄.

• RESTful API에서는 리소스 식별에 사용됨.

RESTful API에서의 사용

• /users/123: 특정 사용자(ID=123) 정보.

• /products/45/reviews: 특정 제품의 리뷰.

예시

• /about: 소개 페이지.

• /contact: 연락처 페이지.

---

3. 쿼리(Query)

정의

• URL에 포함된 추가 정보로, 서버에 데이터를 전달하거나 특정 요청을 정의.

• 패스 뒤에 ?로 시작하며, 키-값 쌍으로 구성됨.

• 여러 값을 전달할 때는 &로 구분.

https://example.com/search?query=laptop&sort=price

구성 요소

• ?query=laptop: query라는 키에 laptop이라는 값을 전달.

• &sort=price: sort라는 키에 price라는 값을 전달.

특징

• GET 요청에서 서버로 데이터를 전송.

• 쿼리는 상태를 저장하거나 필터링, 검색 조건 등을 전달하는 데 주로 사용.

예시

• https://example.com/search?query=react:

• query=react → “react”로 검색.

• https://example.com/products?category=electronics&sort=asc:

• category=electronics → 전자제품 카테고리.

• sort=asc → 오름차순 정렬.

1. 패스 파라미터

<Route path="/users/:userId" element={<User />} />

// URL: /users/123
const { userId } = useParams(); // userId = 123

2. 쿼리 파라미터

const [searchParams] = useSearchParams();

// URL: /search?query=react
const query = searchParams.get("query"); // query = "react"

---

React 의 path 관리

1. 패스 파라미터(Path Parameter) 사용 예시

<Route path="/users/:userId" element={<UserProfile />} />

/: 을이용해서 path의 값을 구분합니다

2. 쿼리 파라미터(Query Parameter) 사용 예시

<Route path="/search" element={<SearchResults />} />

위와 같이 정의하고 Route 정의에 포함하지 않고, 런타임에서 useSearchParams()로 처리

이 모든 경우를 Route에 정의하는 것은 비효율적이므로 런타임에서 처리

/search?text=react&id=123

위와 같은 형식으로 첫번째 쿼리는 ? 로 시작하고 그다음 값부터는 &으로 연결해주면 됩니다!!!

Route에서 정의가 아닌 런타임 처리라는 점을 기억하십시오!!

패스 파라미터는 계층적 구조를 따르며, 이전 경로의 맥락(Context)에 종속적이다. 반면, 쿼리 파라미터는 계층 구조와 독립적으로 동작한다는 의의를 기억해서 사용하면 좋을것 같습니다.

🤔 회고

서브도메인의 역할에 대해 깊이 생각해보지 못했던 것 같습니다. 특히 www의 역할에 대해 고민하지 않았고, 다른 값이 들어갈 경우 동작이 달라질 수 있다는 점도 간과했던 것 같습니다.

또한, 쿼리 파라미터와 패스 파라미터를 혼용해서 사용하는 경우가 많았던 것 같습니다. 이러한 방식이 적합한지 고민하지 않고 사용했던 점을 돌아보게 됩니다.

앞으로는 각각의 도메인 구성 요소가 가진 역할과 의미를 명확히 이해한 뒤 활용한다면, 사용자 편의성뿐만 아니라 팀원 간의 컨벤션 정립에도 큰 도움이 될 것이라고 생각합니다.