static routing & dynamic routing

routing 명사로 여정, 전달, 발송절차를 뜻한다. static routing과 dynaminc routing을 직역하면 정적 전달, 동적 전달이다. static routing은 전달 방법와 주소가 정확히 정해져 있고, dynaminc routing은 전달 방법와 주소가 때마다 달라질 수 있는 방식이다. 여기서는 네트워크보다는 프론트엔드, 그리고 리액트를 확장팩격인 nextjs를 사용할 때 사용 방식을 위주로 정리한다.

static routing

static routing은 매우 간단하다. 우리가 만든 폴더가 주소다. http://도메인.닷컴/0boards/new와 같이 되어 있다면 실제 리액트에서는 아래 사진과 같은 폴더 구조를 가진다. 따라서 개발자가 폴더 이름이나 폴더 구조를 바꾸지 않는 이상 주소는 지속된다. 

nextjs에서 static routing으로 지정한 주소로 페이지를 이동시킬 땐 useRouter를 이용한다. useRouter에 있는 메서드인 push를 사용하는데, 위에서 언급한 주소로 보내려면 아래처럼 코드를 쓴다.

import router frmom "react/router"

router.push("/0boards/new")

 

dynamic routing

static routing은 폴더명 자체가 주소 체계로 들어간다면 dynamic routing은 주소가 동적으로 계속 변할 수 있다. 지정한 폴더명이 아닌 어떠한 이유로 만들어진 이름이 주소가 된다. next에서 dynamic routing을 위한 준비는 대괄호다.

dynamic routing으로 사용하기 위한 폴더명을 대괄호로 감싸면 준비 완료다. 이제 detail은 변수명이나 마찬가지다. http://도메인.닷컴/boards/[detail]로 주소가 이어지는데, 이때 [detail] 자리에 어떤 값이 들어가든 detail 페이지가 열린다. 다만 해당 자리에 들어간 고유 값이 데이더를 가지고 있어야 페이지가 제대로 로딩된다. 게시판의 경우 게시판 아이디를 해당 자리에 넣는다. 백엔드에서 자동으로 만든 고유의 게시글 아이디를 저곳에 배치해 해당 페이지가 뜨도록 한다.

 router.push(`/boards/${result?.data?.updateBoard._id}`);

detail 자리에 들어갈 주소로 서버에서 받아온 게시글 아이디 값을 적어주었다. 위와 같이 코드를 적으면 실제 주소창에서 detail이 아닌 해당 아이디 값이 주소값으로 들어간 것을 확인 할 수 있다. 이제 detail 자리는 게시글 마다 다른 값을 가지고 있기 때문에 고정 값이 아니라 게시글에 따라서 계속 변하는 값이다. 이렇게 값이 계속 변하는 게 dymanic routing이다.

 

마무리

주소를 직접 만드는 정적 라우팅은 여전히 재밌고, 내가 지정하지 않고 컴퓨터가 알아서 주소를 만들고 바뀌게 할 수 있는 동적 라우팅은 흥미롭다. 그동안 네이버든 다음이든 어떤 사이트를 들어갈 때마다 주소길이가 왜케 긴건가 싶었는데 이런 이유들이 있었다는 사실을 알게 되어 뭔가 시원하다. 주소창에 있는 게 게시글 아이디일수도 있고, 화면의 특정 구간을 나타내는 것일 수도 있고... 주소창만 봐도 어느정도 해당 페이지가 어떤 정보를 담고 있는 지 염탐할 수 있는 듯해 코딩이 더욱 재밌어진다.

재미와 다르게 주소 체계를 잘 잡아야 할 듯하다. 주소가 뒤죽박죽이면 유지보수면에서도 이해하기도 찾기도 힘들다. 사이트맵을 그리듯 처음부터 해당 웹을 어떻게 디자인 할 것인지 먼저 명확히 그린 후 접근해야 한다. 만들 때도 수정할 때도 편할 듯.

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)