10/19[TIL]Routing

이번 스프린트는 개인 포트폴리오를 진행하는 스프린트였다.

기존에 스프린트는 어느 정도 셋업이 진행된 상태에서 내가 알고 있어야 할 부분을 채워 넣는 식으로 진행이 되었다면 이번 스프린트는 정말 백지화된 상태에서 기초 셋업 및 내가 채워 넣고 싶은 부분을 넣을 수 있는 어찌 보면 자유롭다고도 할 수 있지만 완전 백지화인 상태에서 스프린트를 진행하려고 하니 막막했었던 것 같다. 기초적인 셋업을 하는 부분에서도 내용을 이해하기가 버거워 힘들었는데 이번 스프린트는 내가 시간을 짬짬이 내어 완성해야겠다는 생각을 했다.

 

스프린트를 진행하면서 Routing에 관한 개념이 또 나왔는데 간단히 정리 해보았다.

 

Routing의 기본적인 개념은 쉽게 말해 근원지에서 목적지로 데이터가 전달될 수 있도록 하는 기능으로 볼 수 있으며 URL 조건에 따른 분기이다. 이러한 Routing은 Server Side Routing과 Client Side Routing 이 있다.

 

여기서 같이 나오는 개념인 SPA는 페이지를 전환하지 않고 ajax를 통해서 정보를 업데이트하고 특히 필요한 부분만 업데이트하는 것을 말한다. 그리고 URL 변경 및 앱 상태 변경이 SPA에서 말하는 Client Side Routiong이라고 한다.

 

History API의 pushState()를 이용한 기술로 실제로 서버가 제공하는 URL은 아니라는 점이다. 즉, 해당 URL은 브라우저 상에서 네비게이션 할 때만 의미가 있지 http 요청을 보낼 수 있는 URL은 아니라는 것이다.

 

Client + Server 라우팅?

가능함.. SPA를 만들고 URL 마다 상태를 가지게 한 후에 URL 직접 접근 시에 특정 상태로 즉시 이동하게 하는 방법

 

서버에서도 SPA가 사용하는 주소를 라우팅 할 수 있게 설정하고

express사용 시

app.get(‘/about’, renderAboutPage)

 

 

클라이언트에서도 특정 URL로 진입할 때 특정 상태로 즉시 렌더링 하는 방법을 사용하면 된다

react router임

<Router>
 
    <Switch>
 
        <Route path = “/about”>
 
            <About />
 
        </Route>
 
    </Switch>
 
</Router>

이렇게 어중간하게 하지 않고 모든 렌더링이나 라우팅을 서버에서 담당하게 하는 서버사이트 렌더링이라는 기술도 존재한다. ex)Next.js

 

항상 Server Side Routing과 Client Side Routing를 맞춰야 하는 것은 아니다.

파일만 Serving 하는 웹 서버를 사용할 경우, Server Side Routing을 사용할 수 없다.

 

하지만 동시에 구현해야 하는 경우

사용자 경험을 더 좋게 만들고 싶은 경우 / 검색 엔진 최적화(SEO)를 고려한 경우

 

솔직히 아직 개념 정립과 사용을 자주 해보지 않아서 그런지 완전히 이해를 하지 못해 추가적으로 나중에 정리를 해야 할 부분인 것 같다. 배운 것들을 정리를 해야 하는데 요새는 점차 정리된 것보다 정리해야 할 부분이 더 많은 것 같아 많은 시간이 필요한 것 같다.