[Node.js 이용한 백엔드 스터디] 라우팅 이해하기

Next.js 는 페이지 개념(concept of pagas) 을 기반으로 구축된 파일 시스템 기반 라우터가 있다.

프로젝트 내 pages 폴더 구조 일부를 확인해보면,

pages
  ㄴ api
    ㄴ beverages
      ㄴ index.ts
    ㄴ events
      ㄴ [eventId]
        ㄴ orders
          ㄴ [guestId].ts
          ㄴ index.ts
        ㄴ index.ts
      ㄴ index.ts
    ㄴ members
      ㄴ [id].ts
      ㄴ index.ts
  ㄴ events
    ㄴ [event_id].tsx
    ㄴ create.tsx
  ㄴ index.tsx

'pages' 폴더에 추가된 파일로 라우트를 자동 생성한다.

pages/api 폴더 외에 위치한 모든 파일은 html 로 반환한다.

.tsx, .ts 는 타입스크립트의 파일용 확장자

 

 

여기서 ! 

.tsx는  Javascipt의 JSX 확장자와 비슷

JSX : JS를 확장한 문법.

-

잠깐, JSX 설명을 하자면

 

UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장.

React element 를 생성하는 JSX.

 

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신,

둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다

이후 섹션에서 다시 컴포넌트로 돌아오겠지만,

JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것이다.

React는 JSX 사용이 필수가 아니지만,

대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다.

또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

-

 

1. Index Route

index 란 이름을 가진 파일을 루트로 자동 라우팅 하는 것

pagas/api/beverages/index.ts -> /api/beverages

pages/index.tsx -> /

 

2. Nested Route

중첩된 파일도 차례로 풀어서 라우팅한다.

 

 

3. Dynamic Route

동적 라우팅을 사용하려면 대괄호[]를 쓴다.

이렇게 하면 Request 객체를 통해 대괄호 안의 값을 사용할 수 있다.

전체적으로 pages 안에 위치한 파일과 폴더를 통해 패스가 만들어진다.

 

 

API Route(라우트)는 Next.js로 API 를 만드는 솔루션

앞서 살펴본 pages/api 폴더 내 모든 파일은  /api/* 라는 path로 매핑된다

이 기능을 활용해도 클라이언트 사이드 번들 크기에는 지장이 없다.

API 라우트가 작동하려면 함수를 기본값으로 내보내야 한다.

 

2가지 매개변수를 수신하는데 req, res와 똑같은 기능을 한다.

 

 

< pre-built middlewares >

 

API Routes provide built-in request helpers which parse the incoming request (req):

• req.cookies - An object containing the cookies sent by the request. Defaults to {}
• req.query - An object containing the query string. Defaults to {}
• req.body - An object containing the body parsed by content-type, or null if no body was sent

 

<  helper functions >

 

The Server Response object, (often abbreviated as res) includes a set of Express.js-like helper methods to improve the developer experience and increase the speed of creating new API endpoints.

The included helpers are:

• res.status(code) - A function to set the status code. code must be a valid HTTP status code
• res.json(body) - Sends a JSON response. body must be a serializable object
• res.send(body) - Sends the HTTP response. body can be a string, an object or a Buffer
• res.redirect([status,] path) - Redirects to a specified path or URL. status must be a valid HTTP status code. If not specified, status defaults to "307" "Temporary redirect".
• res.revalidate(urlPath) - Revalidate a page on demand using getStaticProps. urlPath must be a string.

---

 

이게 약간 spring 에서 본 정적파일 로딩하는 것과 똑같은거 같다.

첫 시동할때 index.html 을 자동으로 불러오는데

이걸 req, res 로 풀어서 쓴 느낌? 

promise 함수에 대해 좀더 공부하는것도 좋은거 같다.

모던 deep dive 책을 한번 더 봐야겠다.

 

정해진 파일 패스로 불러올 수 있는 파일들이 존재하고 

이외 추가적으로 규칙들?을 알아야 하는거 같다.

1. index 라우팅  / 2.중첩된 파일 라우팅 / 3. 동적 라우팅(request)

 

+추가적 검색결과)

라우팅(routing)은 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다. 최적의 경로는 주어진 데이터를 가장 짧은 거리로 또는 가장 적은 시간 안에 전송할 수 있는 경로다.

 

인터넷상의 트래픽의 단위전달을 의미하는 패킷(PACKET)이 효율적이며 효과적으로 최단거리 또는 최단 시간에 전달될수 있도록 하는 것이다. 이때 이용되는것은, 일반적으로 라우터, 브릿지, 게이트웨이, 방화벽 또는 스위치로 불리는 중간 노드를 거쳐 출발지부터 최종 목적지까지 논리적으로 주소가 부여된 패킷의 전달 과정을 총괄 하는 것이 라우팅(Routing)이다

 

 

- 위키백과 출처

+추가개념

CIDR(사이더)

ATM(비동기 전송 방식) 

 

 

 

개인적으로 알고리즘 공부를 좀 더 하면 쉬워질 것 같다는 생각이 든다.

연결된 개념처럼 보인다.