join, login, sociallogin 칸 만들기

다음 글에서는 join, login 템플릿을 꾸미는 법, 그리고 각각에 social-login 버튼(github, facebook)

을 만드는 법을 배워보겠다.

이것을 통해 페이지에서 실제로 사용자가 회원 가입과 로그인을 할 수 있는 칸을 만들 수 있다.

- join

1) 다음은 join.pug에 입력한 코드다.

text, email, password, password확인, submit 이렇게 5개 칸(혹은 버튼)을 만들었다.

사용자는 앞의 4개의 칸에 정보를 입력하고, submit 버튼을 통해 제출할 수 있다.

2) npm start를 통해 실행하면, 다음과 같이 5개의 칸이 생긴 것을 확인할 수 있다.

다음은 login.pug를 꾸밀 차례다.

1) 다음은 login.pug에 입력한 코드다.

email, password, submit 이렇게 2개의 칸과 하나의 버튼을 만들었다.

2) npm start를 통해서 다음과 같이 2개의 칸과 버튼이 만들어진 것을 확인할 수 있다.

다음은 sociallogin.pug를 만들 차례다.

우선, github 로그인 버튼을 만드는 법을 배워보겠다.

1) 우선 partials 폴더에 sociallogin.pug를 새로 만든다.

2) 폰트를 제공하는 https://fontawesome.com/ 에 방문한다.

3) 검색창에 github을 검색하면 다음과 같은 github 로고를 확인할 수 있다.

4) github로고를 클릭한 후, 다음 코드를 복사한다.

단, 이 글(https://brunch.co.kr/@topherlee/48)의 2)가 선행되어야 한다.

5) 다음과 같이 코드를 입력한다.

단, <i class="fab fa-github"></i> -> i.fab.fa-github

으로 수정되었다.

6) join.pug와 login.pug로 이동해서 각각 include partials/sociallogin을 입력한다.

7) npm start를 통해 실행하면, join과 login 페이지에

각각 github 로그인 버튼이 생성된 것을 확인할 수 있다.

8) 그리고 다음과 같이 sociallogin.pug에 facebook 버튼도 만든 후,

9) join과 login 페이지에서 마찬가지로 결과를 확인할 수 있다.

"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."