Projects(99)
-
[유튜브 클론코딩] 6.1 Passport로 Local Authentication(로컬 인증) 하기 (1)
6.1 Passport로 Local Authentication(로컬 인증) 하기 (1) 1. models > User.js 파일 만들기 & import (init.js) User라는 model을 만들 것이다. User는 이름, 이메일, 페이스북 아이디, 깃허브 아이디, 아바타 URL 등을 가질 것이다. i mport mongoose from "mongoose"; const UserSchema = new mongoose.Schema({ name: String, email: String, avatarUrl : String, facebookId : Number, githubId: Number }); const model = mongoose.model("User",UserSchema); export defaul..
2021.03.10 -
[유튜브 클론코딩] 6.0 PassportJS 소개
6.0 PassportJS 소개 PassportJS 이제 인증 기능을 위해서 Passport를 사용할 것이다. Passport는 아주 멋진 미들웨어로 사용자 인증을 구현시켜줄 것이다. 📝사용자 인증 브라우저 상에 쿠키(Cookies)를 설정해주면 그 쿠키를 통해서 사용자 아이디 등을 알 수 있을 거고 Passport가 브라우저에서 자동으로 쿠키를 가져와서 인증이 완료된 User object를 controller에게 넘겨줄 것이다. 또한 대부분의 다른 서비스들로부터 인증을 받을 수도 있다.(페이스북으로 로그인하기, 카카오로 로그인하기 등) 📝그 전에 쿠키에 대해서 이해하기 쿠키는 우리가 브라우저에 저장할 수 있는 것들인데 (쿠키에 대해서는 너무 걱정하지 않아도 된다) 쿠키는 크롬에서 검사(inspect)로..
2021.03.10 -
[유튜브 클론코딩] 5. STYLING - 3 2021.03.09
-
[유튜브 클론코딩] 5. STYLING - 2
assets > scss > partials 폴더를 만들고 그 곳에 header.scss를 생성한다. assets > scss > pages 폴더를 만들고 그 곳에 home.scss를 생성한다. @import "config/_variables.scss"; @import "config/reset.scss"; @import "main.scss"; @import "partials/header.scss"; @import "pages/home.scss"; ↑ styles.scss 그리고 이 모든 것을 styles.scss에서 가져온다.(import) header.header .header__wrapper .header__column a(href=routes.home) i.fab.fa-youtube .header_..
2021.03.09 -
[유튜브 클론코딩] 5. STYLING - 1
reset.scss html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, ..
2021.03.09 -
[유튜브 클론코딩] 4. WEBPACK - ES6 with Webpack
babel-loader 진보한 자바스크립트를 끼워넣어서 어떻게 될지 시험해보겠다. import "../scss/styles.scss"; const something = async() => { console.log('something'); } ↑ main.js 작성하고 npm run dev:assets로 실행 근데 사실 만들어진 파일은 똑같다. 사실은 조치를 취해야 된다. 즉, 옛날 자바스크립트로 만들어주어야 한다. npm install babel-loader로 바벨로더를 설치한다. webpack.config.js로 가서 rule을 하나 더 추가한다. npm run dev:assets로 실행해본다. 그리고 static 폴더에 있는 main.js를 보면 사실 거의 같지만, 잘 작동한 것이다. 이렇게 하면 문..
2021.03.09