조인 > 로그인을 진행하면서 했던 것들기본적으로 조인에 필요한 정보가 무엇인지 고려해야함계정명을 이메일로 하고 비밀번호 확인하고 닉네임까지이메일과 닉네임은 중복되지 않아야 하고비밀번호와 닉네임은 submit 되기 전에 이벤트로 구현을 해야하지만 현재는 백엔드에서 확인하고 있음유저 보안을 위해 비밀번호를 해싱화했고 bcrypt라는 라이브러리 사용또한 계정이 생성되기전에 해싱되야 하므로 mongoose의 미들웨어를 사용했음그 미들웨어에 save 훅을 사용했으며 document 미들웨어라서 this를 통해 userSchema의 비밀번호를 대상으로 삼을 수 있음이전에 공부했듯 비밀번호가 업데이트 될때 해싱으로 인한 문제가 발생할 수 있다는걸 기억해야 함로그인을 할때 compare를 사용하지 않고 입력받은 비밀번..

1. 사용할 패키지들 node.js는 기존에 브라우저 안에서만 사용되던 언어였지만 브라우저 밖에서도 사용하기 위해 만들어졌으며, 프론트엔드와 백엔드에서 동시에 사용할 수 있다는 장점이 있다. node.js에는 npm을 통해 패키지를 관리한다. npm init을 사용하여 프로젝트를 생성하고 나면 package.json이 생성된다. json은 데이터를 전송할 때 사용하는 양식이며 package.json에는 해당 프로젝트의 패키지를 관리하기 위한 문서다. 우리가 npm을 사용하여 설치한 모든 것들은 package.json의 dependencies에 기록된다. dependencies는 프로젝트를 실행하기 위한, devDependencies는 개발자를 위한 패키지들이다. express라는 node.js의 프레임워..

1. POST - 그동안은 router에서 get만 했었지만 backend에 post까지 하는 방법을 배워야함 - 우선 현재의 목표는 db에 있는 모든 것들을 나열   - 이미 home.pug에서 구현이 된 상태 - 유저가 한번에 1개의 영상만 볼 수 있도록 해야함 - 그 다음으로는 영상을 업로드 할 수 있어야 함 - https://github.com/Daniel-Jeon/wetube-loaded/commit/997d75b5d7fa8c0c90b5008f17d92954d2af83ee Study post(1) :) · Daniel-Jeon/wetube-loaded@997d75bbefore study db, study post!github.com // watch.pugextends base.pugblock c..

1. Mixins - 데이터를 받을 수 있으며 스마트 한 partial이 mixin - 기존의 footer.pug은 하단의 고정된 한 조각으로 되었고 데이터를 받을 수 없었음 - 하지만 반복되는 HTML block에서 서로 다른 데이터가 필요한 경우가 있음 - 유튜브를 보면 사이드바, 메인, 인기 동영상 페이지, 각 채널들 등등 - 반복되고 재사용되는 부분들을 최소화 시켜야함 - partial은 단순한 HTML일 뿐이었지만, mixin은 뭔가를 해줘야 함 - https://github.com/Daniel-Jeon/wetube-loaded/commit/0001e632cf4a60a4fb0e6c1f9daee50c86ff0dbd Study Mixins ! · Daniel-Jeon/wetube-loaded@000..

1. Conditional - 특정 상황의 유저에게만 보이게 하기 위해 Template에 작성// base.pugdoctype htmlhtml(lang="ko") head title #{pageTitle} | Wetube link(rel="stylesheet" href="https://unpkg.com/mvp.css") body header h1=pageTitle main block content include partials/footer.pug - h1=pageTitle 과 h1 #{pageTitle} 은 같긴 하지만 여기선 variable을 다른 text와 섞고 싶지 않기 때문임   - ta..

1. Partial - View 파일마다 매번 복붙하여 화면을 통일해도 되지만 고정된 부분들을 따로 관리하고 싶을 때 사용하는 것이 Partial// src/views/partials/footer.pugfooter © #{new Date().getFullYear()} Wetube// home, watch.pug에 include include partials/footer- https://pugjs.org/language/includes.html Includes – PugIncludes Includes allow you to insert the contents of one Pug file into another. //- index.pug doctype html html include includes..

0. Returning HTML - 우리는 지금까지 HTML을 return 할때 controller에서 res.send()를 사용했음 - 한줄 정도의 HTML을 보내는건 상관없으나 한 페이지 전체를 보낼 경우 매번 많은 내용을 작성해야함 - 이 부분을 개선하기 위해 Template Engine을 사용할 것임 1. Pug - Template을 이용하여 View 만들기를 돕는 Engine - https://github.com/pugjs/pug/tree/master/packages/pug#syntax pug/packages/pug at master · pugjs/pugPug – robust, elegant, feature rich template engine for Node.js - pugjs/puggithu..