BackEnd/Node.js (12) 썸네일형 리스트형 Microsoft / Typescript Express 보일러 플레이트 적용기 https://github.com/microsoft/TypeScript-Node-Starter microsoft/TypeScript-Node-Starter A starter template for TypeScript and Node with a detailed README describing how to use the two together. - microsoft/TypeScript-Node-Starter github.com 리액트와 달리 Node.js 에서 Typescript 사용은 조금 더 다른 느낌이다. 일단 왜인지 모르겠지만 webpack이나 babel의 사용없이 tsc라고 불리는 타입스크립트 컴파일러로 js파일로 만드는 과정이라던지 신기한 부분이 많다. (의도가 무엇일까...?) 일단 DB연결후.. Puppeteer.js 를 이용한 웹 자동화 https://github.com/GoogleChrome/puppeteer Puppeteer Puppeteer는 node.js를 이용하여 웹 자동화를 도와주는 API이다. 정말 간단한 사용법에 비해, 엄청나게 파워풀한 기능들을 가지고 있다. 사용 브라우저의 경우 Chrome 시리즈인 Chromium를 이용해서 사용한다. 그렇기 때문에 서버에서 사용시에 굉장히 많은 메모리 소모가 되기 때문에, 여러 사람이 사용하기에는 적합한지는 생각해보아야 할 문제다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 const puppeteer = require("puppeteer"); const doPuppeteer = async() => { const browser = await puppeteer.la.. Parse & Crawling To Node.js (노드로 파싱 및 크롤링하기) 파싱과 크롤링 전에 알아야 할 지식들을 순서대로 알아보자. 1. fs module node.js 자체 모듈이다. 파일 io를 위해서 사용되고 있다. 사용법 fs.readFile(filename, [options], callback) 외부의 파일을 읽을 때 사용된다. 이 때, callback 함수를 사용 할 경우 해당 메소드는 비동기적으로 작용하여 callback을 완료시킨다. 이 외에는 동기적으로 작동한다. 이 때 읽어들인 파일은 버퍼형태로 리턴되기 때문에 toString으로 인코딩 해주어야 한다. const parser = require("csv-parse/lib/sync"); const fs = require("fs"); const csv = fs.readFileSync("csv/data.csv");.. [MongoDB] 사용법 몽고 DB는NOSQL이고딴 것보다 데이터가 JSON가 같은 포멧인게 가장 큰 장점이라는거 같다. 설치를 하고 db.jsimport mongoose from "mongoose"; mongoose.connect(process.env.MONGO_URL, { useNewUrlParser: true, useFindAndModify: false}); const db = mongoose.connection;db.once("open", handleOpen); 다음과 같이 연결하면 된다. 그리고 서버가 시작되는 곳에 import시켜주자. 이후에 모델을 만들어 관리한다. import mongoose from "mongoose";const VideoSchema = new mongoose.Schema({ fileUrl: { .. [Express] 동영상 페이지 제작 요론 아이를 만들었다. init.jsimport app from "./app"; const PORT = 4000; const handleListening = () => console.log(`Listening on : http://localhost:${PORT}`) app.listen(PORT, handleListening) 1. 서버와 연결을 하고 app.jsconst app = express(); //MiddleWareapp.use(helmet());app.set("view engine", "pug");app.use(cookieParser());app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: true }));app.use(mo.. [Express]Pug mixins pug에서데이터만 다르고반복되는 HTML코드를 여러 템플릿에서 사용하기 위해mixin을 제공한다. mixins/videoBlockmixin videoBlock(videoObject ={}) div.videoBlcok video.videoBlock__thumbnail(src=videoObject.videoFile, controls=ture) h4.videoBlcok__title=videoObject.title h6.videoBlcok__views=videoObject.views Home.jsextends layouts/maininclude mixins/videoBlock block content div.videos each item in videos +videoBlock({ title : item.titl.. [Express] Form get header.pug .header__column form(action=route.search, method="get") input(type="text", placeholder="Search by term...", name="term") 유튜브 처럼 헤더에 form 태그를 추가했다.submit시에 route.search url로 넘어가고 method는 get방식그리고 데이터 속성의 이름은 term이다. 이제 URL을 요청하면query라는 속성에 입력값이 저장되어진다. videoController.jsexport const search = (req, res) => { //const searchingBy = req.query.term; const { query : {term : searchingBy } } =.. [Backend]Express_pug Pug는 Express에서 제공하는 템플릿 엔진이다. View단에 HTML코드를 작성할 때 사용된다. npm으로 pug를 설치한 후에 사용하면 되는데pug는 express로 동작하는 것이기 때문에 const globalRouter = express.Router(); globalRouter.get(routes.home,home) 다음과 같이 import없이 Router에 달아두기만 하면 실행된다. home.pug1. extends layouts/main block content p Home layouts/main.pugdoctype htmlhtml head title 3. #{siteName} body 2. include ../partials/header main block content include ... 이전 1 2 다음
