Express (Node.js) Pug - make template

이제 각 페이지들의 기본 틀을 만들어 주자

pug를 이용한 템플릿들 만드는거라 사진 올리고 그에 대한 간단한 설명을 하겠다.

먼저 로그인과 회원가입 페이지

폼태그를 만들어주고 routes로 url 지정을 해준다. 중요 정보가 넘어가기 때문에 post 방식을 이용한다.

뭐 나머지 태그는 쉽게 이해 되는 부분이고

include partials/socialLogin부분은 

로그인과 회원가입 페이지에 흔히 보이는 소셜계정으로 가입하기 로그인하기를 구현하기 위해 중복사용 되는 부분이므로

partials에 socialLogin.pug를 만들어서 인클루드 해줫다.

내용을 보고 pug에 한 포인트만 짚어보자.

다른 부분은 다 아는 부분인데 continue blalba~~ 앞에 vertical bar가 있다.

이는 pug에서 시작되는 텍스트는 태그로 인식을 하기 때문에 텍스트라고 인식시켜줄 매개로 vertical bar가 쓰였다

vertical bar를 쓰면 pug에서는 텍스트로 인식한다 ~~~알아두자.

이렇게 두 페이지의 기본틀은 만들었고 차후에 css를 해주자

 

그리고 프로필 수정페이지를 만들자

수정페이지도 마찬가지로 form태그를 이용해서 만들자.

근데 route.editProfile로 url을 이동시 전에 user detail페이지가 뜬다.

문제점의 원인은 userRouter.js에 있었다. 

바로 이부분.. userDetail이 먼저 있었기 때문이다.. 무슨말이냐고?

처음 routes.js 에서 url을 변수에 담고 객체로 만들때

이렇게 만들었다. user_detail의 url이 "/:id" 로 써놨다. express는 : 를 붙여주면 변수로 인식한다고 했다.

고로 userRouter.js에서 순서가 위에 있으므로 /뒤에 오는 url값이 변수로 인식되어 user_detail에 먼저 접속이 되버리는 것이다.

순서를 맨아래로 내려주자. (내가 이해한 바로는 이렇다.) 

videoRouter.js도 마찬가지다. id값을 받아와 연결하는 url의 순서 변경을 해주자.

 

자 그럼 다시 돌아가서 /edit-profile 템플릿을 보자.

음 다른건 없다. 아 수정할 부분이 있다 /users/edit-profile로 접속 되기 때문에

"/users/"+routes.editProfile로 변경해주자.

그리고 링크에 비밀번호 변경 페이지 연결을 해주자 역시 /users를 덧붙이자

/* 참고사항으로 `(백틱)/users${routes.editProfile}`   의 방식으로 적어도 된다 */

이제 비밀번호 변경 템플릿으로 가서 역시 폼태그 작성을 해주자

여기도 동일한 방식이다~

이어서 폼태그가 들어갈 템플릿들 upload.pug, editVideo.pug, 도 역시 수정 해준다.

완료!!!!