본문 바로가기
더이상 하지 않는 Backend - NodeJS/Node-Express 개론(완)

[O'REILLY] Node & Express - 14장 : 라우팅(Route)

by VictorMeredith 2023. 4. 10.

- 라우팅은 웹서비스에서 중요한 요소 중 하나이다.

- 라우팅은 보통 파일 기반으로 운영된다.

- 단순하지만 유연하지 않다.

- 익스프레스 라우팅의 기술적인 측면에서는 정보구조(Information Architecture, IA) 의 개념을 알아야 한다.

- IA는 콘텐츠를 개념적으로 구조화 하는것.

- IA는 즉, 콘텐츠를 주의깊게 분류하고, 논리적으로 분류하고, 스스로 코너에 몰리지 않도록 하는 개념적 방법론이다.

 

1. 오랫동안 유지할 수 있는 IA의 수립 조건

- URL에 기술적 세부사항을 노출하지 않는다

- URL에 의미없는 정보를 노출하지 않는다. : 의미 없는 단어가 있다면 제거한다.

- 의미 없이 긴 URL은 피한다. : 다른 조건이 모두 같다면, 짧을수록 좋다. 하지만 SEO도 명심해야 한다. URL 또한 SEO에 영향을 주기 때문.

- 단어 구분자는 일관성있게 사용한다. : 하이픈, 밑줄 등을 사용하는 방법이 일관성 있어야 한다. 대부분의 SEO 전문가들은 하이픈을 권한다.

- 공백문자 혹은 타이핑이 불가능한 문자는 쓰지 않는다.

- 소문자를 쓰는 것이 좋다. 의견이 갈리긴 하는데 그냥 소문자 쓰면 된다.. 

 

2. 라우트와 SEO

- 중요한 키워드가 있고 합리적이라면, URL에 키워드를 넣는 편이 좋다.

- 마구잡이로 다 넣으면 역효과 나니까 합리적으로 명확하게 정하는 것이 가장 효율적이다.

 

3. 서브도메인

- REST API에 api.asdf.com을 할당하거나 

- 관리자 인터페이스에 admin.adsf.com 을 할당하는 등의 사용이 최선이다.

- 워드프레스같은 것을 사용한다면, 분리해야 하는 기술적인 문제도 있다. 하지만 NGINX 등의 리버스프록시를 사용하는 것이 더 현명하다. 어차피 NGINX는 '갓갓갓갓갓' 이기 때문에, 다양한 기능들을 활용한다면 더 좋은 사이트가 될 것이다.

- SEO 플랜에 포함된 컨텐츠를 서브도메인에 할당할 때는 다른 옵션이 있는지 확인해야한다. 

- 서브도메인은 SEO플랜에 상당한 영향을 주기 때문이다. 

 

4. 라우터 핸들러는 미들웨어이다.

- next()를 통해 다음 미들웨어로 넘길 수 있다.

- 다양한 활용이 가능하다.

인가되지 않은 사용자를 필터링하는 미들웨어로 활용할 수 있다.

 

5. 라우트 매개변수

- 라우트의 일부를 매개변수로 사용하는 방법이다.

// url/api/thisistesttype 으로 요청했을 때

app.get('/api/:type' , (req, res, next)=>{
	console.log(req.params.type) // thisistesttype
})

- 이렇게 사용하면 된다. 파라미터를 사용하는 방법이다. 아주 쉽다.

 

6. 라우트 구성원칙

- 라우트 핸들러에는 이름 붙은 함수를 사용한다. (인라인으로 만들지 말고 구분하고 쪼개고 모듈화 해라.) 

- 알쏭달쏭해서는 안된다. (특정 URL을 어디에서 찾아야 하는지 알고 있어야 한다.)

- 라우트는 확장성 있게 구성해야 한다. 

- 뷰에 기반한 자동 라우트 핸들러를 사용한다 (static 코드 이거 알지?)

 

7. 그래서 어떻게 구성할까

- 사람의 성향마다, 프로젝트마다, 회사마다 라우트 구성은 다르지만, 개인적으로 여러가지 구성해보았을 때 가장 알아보기 쉬운 구성은 디렉토리구조로 모듈화하는 것이었다.

- 엔드포인트의 역할과 연결구성은 별도의 gitMind 파일로 구조화하고, 디렉토리 구조를 기반으로 모듈화 해서 연결한다면 내가 봐야할 코드가 어디에 있는지 확실하게 알기 때문에 찾아가서 보기만 하면 된다.

- 내가 구성하는 방식이 정답이 아니다. 처음 설계를 시작하면서 어떤 것이 효율적이었고, 어떤점을 고쳐야하는지 파악하면서 고쳐나가다보면 어느 순간 이 프로젝트에서 이 정도로 정착해야겠다 하는 순간이 온다. 내 기준에서는 이런 방식이었다.

- 다음과 같은 디렉토리 구조를 가진다.

연습프로젝트의 일부

- routes의 index에서 1차분기를 해주고

- 각 js 파일들에게서 2차분기를 해서 controllers의 로직들을 호출한다.

- 각 controllers의 로직은 utils를 호출해서 요청/응답을 처리한다.

 

routes/index.js

이렇게 정리해놓으면 이뻐진다

 

chatmain.js

필요한 controller를 호출하는 2뎁스 router

 

gitMind로 정리한 flowChart-프로젝트 구조

- 이런식으로 정리해놓으면 지나가던 개미똥꾸녕이 봐도 알아볼 거 같다. 

댓글