Express (Node.js) Core : Routing

음 잘 알지는 못하지만 ECMAScript6에는 브라우저상에서 자바스크립트를 모듈을  export, import할 수 있게 되었다.

일단 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화 하고

공개가 필요한 API만을 외부에 노출한다.

모듈은 파일 단위로 분리 ~ 필요에 따라 명시적으로 모듈을 로드하여 재사용한다.

 

c, java, python은 #include, import등의 모듈 기능을 가지고 있다.

그러나 클라이언트 사이드 자바스크립트는 script태그를 사용하여 외부의 스크립트 파일을 가져 올 수 는 있지만,

파일마다 독립적인 파일 스코프를 갖지 않고 하나의 Global Object를 공유한다.

ES6에서는 이를 해결? 하기 위해 export, import키워드를 추가해서 모듈을 사용할 수 있게 해주었다.

 

서버사이드인 Node.js는 이를 지원하지 않는다. 기본적으로 common module 방식으로 require/ exports를 이용해 유사한 기능을 할 수있다.

하지만 Babel을 설치했다!!! 쓸 수 있다. 바벨은 참 편리함을 제공한다.

근데 생각해보니 이미 import는 썼다... babel설치하고 미들웨어를 임포트 할 때...

근데 아직 export는 안썼다 ㅋㅋ

 

우선 init.js를 만들어 주자. 만들어주고 기존 index.js를 app.js로 명칭을 바꿨다. 그저 명칭이다.

그후 필요 없는 부분은 삭제하고

하단부에 export default app을 해주자 . const app = express();에서 app인듯 하다.

default로 설정 해주었다.

default로 설정해주면 기존 import방식과 같은 형태로 모듈을 입력해주면 된다.

app을 init.js에서 실행해 주기 위해 import app from './app'을 해주자 ./app은 경로인듯.. app.js를 뜻하는 듯하다

미들웨어 임포트와 똑같다 대신 app.js에서 app을 default로 export했다는 것을 기억하자.

참고로 init.js는  서버를 구동시키기 위한 파일이다. 그저 따로 나누어준 것 뿐이다. 이것도 모듈화라고 해야하나?

init.js에서 포트 설정해주고 callback함수를 만들어주자 이건 굳이 안만들어도 되는 듯 하나 어디에 접속되는지 콘솔창에 띄워주려고 하는 듯, 여기서 콘솔창은 vscode상의 터미널이다.

 

아 그리고 한가지 빼먹은게 있는데 init.js를 만들고 설정을 마쳤다면

package.json에서 실행파일 이름을 init.js로 바꿔줘야 한다. 이전에는 index.js로 되어있어 파일이 없어졌기에 안된다.

 

그리고 router.js를 만들어준다.

라우터를 만드는 이유는 뭘까? 우리가 접속하는 웹은 단순하지 않다. 예를 들어 주소창에 /user/password/ 이렇게 여러 경로가 뜬다

(그저 예시이다)

route는 여러개로 구성된다.

각 router에 접속이 용이하게 하기 위해 설정을 해주는 것이다? 라고 이해 했다.

이렇게 root, /edit,  /password 라우터를 설정 해줬다. 그리고 userRouter라는 변수에 담아줬다.

그리고 userRouter를 export(추출??)해줬다

그리고 app.js에서 export된 userRouter모듈을 import해준다

주의 할점은 default로 export되었다면 그냥 import userRouter로 써주면 되지만

그게 아니라면 { userRouter } 라고 중괄호를 꼭 써주자

 

import 했고~ app.use("/user", userRouter); 를 작성했다.

자 풀이를 하자면 /user라는 경로에 접속(use)하면  userRouter를 이용하겠다? 라는 거다.

실제 localhost:4000/user로 접속을 하게되면 userRouter의 루트 경로에 접속하게 되고

페이지에 user index라는 구문이 뜨게 된다.

 

이어 /user/edit을 접속하면 user edit이 뜬다. 각 루트뒤에 쪼개진 라우터로 들어가게 되는 거다. 어썸

파이썬 플라스크를 잠시 했을때는 이렇게 쪼개는건 해본적 없다. 그냥 각 한페이지로 들어가게 해준 적은 있지만 ㅋ

 

내가 이해한게 맞길... ㅋ 일단 다시 복습하며 route에 관해 더 찾아보겠다

이번 포스팅은 여기서 일단 끝