2021/03(76)
-
[유튜브 클론코딩] 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 -
[유튜브 클론코딩] 3.12 Searching Videos
3.12 Searching Videos 정규표현식을 사용하여 Search 구현하기 이제 검색 화면을 수정할 것이다. 정규 표현식 이라는 것이 있다. 이것은 string으로부터 무언가를 가져오는 것이다. 우리가 정규 표현식으로 하고 싶은건 handsome을 찾던 Handsome을 찾던 대소문자를 구별하지 않고 찾도록 하면서 내가 찾는 단어가 포함된 모든 걸 찾는 것이다. export const search = async(req, res) => { const {query: { term: searchingBy }} = req; let videos = []; try{ videos = await Video.find({title: {$regex: searchingBy, $options: "i"}}); }catch(..
2021.03.09 -
[자료구조] 딕셔너리(맵)
딕셔너리(맵) 딕셔너리(맵) : 데이터를 [키,값] 쌍으로 담아두는 자료구조 (키와 값의 쌍으로 이루어진 컬렉션) 키: 원소를 찾기 위한 식별자 집합의 Set 클래스와 마찬가지로 ES6에는 Map 클래스가 내장되어 있음 Map 객체와 객체의 차이 Map 객체는 객체와 유사하지만 다음과 같은 차이가 있음 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 object.keys(obj).length map.size 1. Map 객체의 생성 - new Map() / new Map([[키1,값1], [키2,값2]]) Map 객체는 Map 생성자 함수로 생성한다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다. co..
2021.03.08