React에서 react-router-dom을 자주 사용하다가, 오랜만에 JavaScript만으로 동적 라우팅을 구현하려니 헷갈려서 정리해보고자 한다.
동적 라우팅
정적 라우팅 (Static Routing): 경로를 수동으로 추가하는 프로세스
동적 라우팅 (Dynamic Routing): URL을 동적으로 생성하거나 파라미터에 따라 다른 데이터를 로드하는 기법
Query String
Query String은 URL 뒤에 붙는 문자열로, 주로 데이터를 전달하기 위해 사용된다.
Query String의 구성
Parameter: 전달하려는 데이터의 이름
Value: 전달하려는 데이터의 값
구분자:
?: Query String의 시작을 나타냄
&: 여러 파라미터를 구분
구현 과정
카드를 클릭하면 해당 멤버의 페이지로 이동하도록 구현하려고 했다. 각 페이지는 동일한 디자인을 유지하면서 내부 데이터만 다르게 표시하는 방식이다.
Firebase Cloud Firestore의 profile 컬렉션에 데이터를 다음과 같이 저장했다:
| document_id | name | track | mbti | contact | comment | profile_img |
|---|---|---|---|---|---|---|
| 1 | a | Spring_5기 | ENFP | https://velog/... | 끝까지 포기하지 말자! | |
| 2 | b | Spring_5기 | INTJ | https://velog/... | 화이팅! |
profile.html 페이지를 불러오되, document_id를 URL 파라미터로 전달하여, 해당 값을 바탕으로 Firestore에서 데이터를 읽어오는 방식으로 구현했다. (한 줄(document 하나))
이미지처럼 profile.html을 불러오되, document_id=1로 parameter를 전달하여, 이를 토대로 firebase에서 찾아 가져와 값을 넣을 수 있도록 했다.
- window.location.href: 현재 페이지의 전체 URL을 반환
- window.location.search: URL의 Query String 부분을 반환
new URLSearchParams(): Query String을 다룰 수 있는 객체 생성 { document_id: 1 }urlParams.get("document_id"): document_id라는 키의 값을 가져옴
const docRef = doc(db, "profile", documentId);
getDoc(docRef)
를 통해 "profile" 컬렉션에서 document_Id 값이 1인 document를 가져온다.
docSnap은 다음과 같은 형태일 것이다.
{
name: name,
track: track,
mbti: mbti,
contact: contact,
comment: comment,
profile_img: profile_img
}data.name처럼 각 필드를 가져와 텍스트의 요소에 삽입한다.
결론
main.html에서는 <a> 태그의 링크 뒤에 ?key=value로 파라미터를 전달하고,
profile.html에서는 new URLSearchParams()로 URL의 Query String 부분에서 파라미터를 추출한다.
