[Wetube] VIEW_JOIN/LOGIN 화면 구성 / partial

결과물

partial 파일을 만들어, Social login 버튼을 JOIN/LOGIN화면에 추가하였다.

partial 파일

다른 view파일 내부에서 보여지는 view이다. 뷰 속의 뷰?

 

1. 기존의 View파일을 작게 쪼개서 관리할 수 있다는점,(캡슐화)
2. 일부를 수정하기위해 전체를 수정 할 필요 없다. 쪼개서 관리!

이 partial 의 장점이다.

예시

• main화면 내의 header/footer로 쪼개기
• 소셜 로그인 버튼 캡슐화 하기(깃허브,카카오톡,네이버,페이스북)

코드

SocialLogin.pug

.social_login
    button
        span.social-login--github
            i.fab.fa-github
        |continue with github
    button.social-login--facebook
        span
            i.fab.fa-facebook
        |continue with facebookd=

Login.pug

extends layouts/main.pug

block content
    .form-container
        form(action="routes.login", method="post")
            input(type="email", name="email", placeholder="email")
            input(type="password", name="password", placeholder="password")
            input(type="submit", value="Log In")
        include partials/socialLogin

join.pug

extends layouts/main.pug

block content
    .form-container
        form(action="routes.join", method="post")
            input(type="text", name="name", placeholder="full name")
            input(type="email", name="email", placeholder="email")
            input(type="password", name="password2", placeholder="verify password")
            input(type="submit", value="Join Now")
        include partials/socialLogin

가입/로그인 정보는 보안성을 띄어야 하므로, form태그의 post메소드를 사용하였다.

User Controller.js

export const join = (req, res) => res.render("Join", { pageTitle: "Join" });
export const login = (req, res) => res.render("Login", { pageTitle: "Login" });
export const logout = (req, res) => res.render("Logout");
export const users = (req, res) => res.render("users");
export const userDetail = (req, res) => res.render("user Detail");
export const editProfile = (req, res) =>
	res.render("editProfile", { pageTitle: "editProfile" });
export const changePassword = (req, res) =>
	res.render("changePassword", { pageTitle: "changePssword" });

 

컨트롤러의 join,login 함수에 Res.render(view파일을 받아서 응답해주는 method)를 이용하여 각각의 PUG파일을 연결시켜주었다.