Projects/유튜브 클론코딩(73)
-
[유튜브 클론코딩] 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 -
[유튜브 클론코딩] 4. WEBPACK - 설치 및 설정
Webpack이란 - 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈번들러 - 모듈 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구 ** 즉, 프로젝트 작업을 하다보면 HTML CSS Javascript Image 등 파일 수가 엄청 많아지는데 이를 하나로 묶어주는 도구를 말하는 것이다. ★ 노마드코더 강의가 현 기준으로 몇 년 된 강의라서 웹팩도 바뀐 점이 많아 강의를 그대로 따라하면 안되는 부분이 많았다. 다행히 덧글에 천사😇분들께서 해결방법을 알려주셔서 그대로 따라했다!,,,, 1. extract-text-webpack-plugin가 webpack이 4버전으로 넘어..
2021.03.09