pug = 템플릿 언어이다 express의 view engine
$ npm install pug
pug set을 해준다
views폴더생성 home.pug 파일생성
라고 적고
웹페이지에 적용시키기 위해서
send -> render
("Home"); -> ("home) ;
로 바꿔준다 pug 파일명과 같은 이름을 해주면 웹페이지에 적용된다
Hello 부분이 자동으로 변환되어 있다
파일을 만들어 준다
view폴더 안에 layout폴더 생성 후 그안에 main.pug 파일생성
main 레이아웃
main 레이아웃을 확장해서 사용 할 수 있다(pug는 안써도 동작함)
레이아웃을 복사 붙여넣기 한것과 같은 효과를 볼 수 있다
main을 적용시키기 위한 모습
홈이 웹에 적용된 모습
view 폴더안에 partials 폴더 생성
그안에
footer.pug
header.pug 파일 생성
아이콘을 넣기 위해 링크를 넣어준다
컴포넌트를 분리하기 위해서 include 를 작성
footer 부분코드
컴포넌트 분리방식으로 실행된 모습
자바스크립트를 자동으로 연도가 바뀌는 코드를 넣음
header 부분 작성
header를 include에 넣어주면
웹페이지에 header부분이 적용이된다
*컨트롤러에 있는 정보를 템플릿에 추가하는 방법
-Template 틀 형식 붕어빵틀 같은것
-Controller 제어 조종장치
app.js에 locals 라는 middleeare를 만든다
local변수를 global 변수로 사용하도록 만들어주는 middleware
middleware.js 파일생성
localMiddleware 생성
localMiddleware도 자동import 추가 기능이 있다
middleware를 활용하여 웹페이지 상에서 아래 그림의 버튼이나 join , login페이지로 이동 할수 있게 되었다
이동 된다
이로써 전역적으로(글로벌) 사용할 수 있는 변수를 추가하는 방법이다
템플릿, 뷰, 모든 곳에서 사용가능하다
다음 함수로 라우터로 넘어간다는 뜻으로 next()를 써(호출)줘야 한다
*템플릿 따로 지정하기
render의 인자를 활용한다
render의 첫번째 인자는 템플릿이고, 두 번째 인자는 템플릿에 추가할 정보가 담긴 객체다
home 에만 따로 템플릿을 사용했다
search 부분 추가
name이 있어야 한다
검색 주소 부분에 name이 적용 되어있다
search 부분에 내가 운하는 정보를 가져오도록 작성
새로고침 하면 검색한 값이 나와야 한다
템플릿에 로직 추가 새로운 ES6 문법 적용
동작 한다
login 부분작업
join 부분작업
partials/socialLogin.pug 생성 (원하는 만큼 소셜 로그인 기능을 join 화면과 login 화면 모두에 띄울수 있게 코딩
login join 에 include 해준다
소셜 로그인 기능
기본적인 조인 로그인 소셜 기능 구현
editProfile 부분 작업
routes 를 사용하여 join,login 을 바꿔 준다
구현화면
/users${routes.changePassword} 로 해줘야 링크이동이 된다 (구현화면)
-가상정보를 먼저 넣어서 템플릿을 완성하고 어떤일이 어떻게 발생하는지 알아본다
그 후에 데이터베이스를 이용해 실제 정보를 추가하고 사용자 인증기능도 구현할 수 있다
db.js 파일생성
가상데이터를 넣어주고 설정
데이터를 불러올수 있게 되었다 실행화면
-mixin =
-views/mixins 폴더 생성 views/mixins/videoBlock.pug파일생성
item이 4개 있기 때문에
화면에 4개가 출력되어 있다
최종실행
search 부분 연결
홈처럼 만들고 검색기능 추가
검색을 하면 본화면처럼 실행된다
post 부분을 만들어 주고 get join 부분도 수정한다
글로벌라우터부분 수정해주고 post 만들어주고 post import 해준다
join 해보면
받은 값을 확인 할수 있다
