클론코딩 6

#5 - Passport를 사용해 User Authentication하기

passport? 여권? 로그인 기능(+소셜 로그인 기능)을 만드는 데 도움을 주는 Node.js의 미들웨어! 사용자의 정보는 브라우저의 쿠키 안에 저장되어있는데, passport는 그것을 가져와서 user객체를 만들고 requset객체 안에 넣어준다. 그러면 우리는 그 user객체와 passport를 가지고 뚝딱뚝딱 로그인 기능을 만들 수 있는 것이다. 사용자가 로그인을 할 때는 두 가지 종류가 있다. 하나는 아이디와 비밀번호를 사용해서 로그인하는 것이고 (해당 사이트의 아이디, 비밀번호) 다른 하나는 구글, 페이스북, 깃허브와 같은 다른 소셜의 정보를 가지고 로그인하는 것이다. passport에서는 첫번째 방식을 "local" 전략이라고 부르고 두 번째 방식은 "google", "facebook", ..

#4 - Webpack을 이용해 Styling하기

Webpack이란? 웹팩의 기본 개념 자바스크립트 코드가 많아지면 하나의 파일로 관리하는데 한계가 있다. 그렇다고 여러개 파일을 브라우져에서 로딩하는 것은 그만큼 네트웍 비용을 치뤄야하는 단점이 있다. 뿐만 아니라 각 파일은 서로의 스코프를 침범하지 않아야 하는데 잘못 작성할 경우 변수 충돌의 위험성도 있다. jeonghwan-kim.github.io 한 문장으로 말하면... 여러 개의 파일들을 합쳐주는 것!? 설치 npm i webpack webpack-cli (webpack-cli는 콘솔에서 webpack을 사용할 수 있게 해준다.) 설정 1. package.json 수정 //package.json { "scripts": { "dev:server": "nodemon --exec babel-node i..

#3 - MongoDB를 이용해 데이터 다루기

Nomad Coders % Complete academy.nomadcoders.co Mongoose 설치와 사용방법 이 수업에서는 데이터베이스로 MongoDB를 사용했다. 그리고 MongoDB를 Node.js에서 사용할 수 있게 도와주는 것이 Mongoose이다. 설치(먼저, MongoDB를 설치해야 함.) npm i mongoose 사용 //db.js import mongoose from "mongoose"; import dotenv from "dotenv"; dotenv.config(); mongoose.connect(process.env.MONGO_URL, { useNewUrlParser: true, useFindAndModify: false, }); const db = mongoose.connec..

#2 - Pug로 뼈대 만들기

Pug란 무엇인가? #1에서는 노드와 관련된 필수 개념들에 대해 배웠다. 나는 그 과정에서 이런 의문이 들었다. res.send()를 사용해서 브라우저에 간단한 텍스트를 보여줄 수 있다면 html파일은 어떻게 보여줄 수 있을까? 그것은 res.render()와 함께 Pug를 사용하면된다. express에는 다양한 view engine이 존재하는 데, 그 중 가장 유명한 view engine(또는 template engine)이 Pug라고 한다. view: MVC(Model, View, Controller) 중 하나로 클라이언트에게 보여지는 부분을 말한다. template: header나 footer와 같이 대부분의 페이지에서 중복되는 부분을 template이라고 한다. Pug 시작하기 설치 npm ins..

#1 - Express.js 기반 다지기

이 글은 Nomad Coder의 유튜브 클론 코딩을 본 후 복습 겸 강의 흐름을 정리해 놓은 글입니다. 1. Express로 서버 만들고 Router 맛보기 명령어 npm init (node 프로그램을 시작(initialize)하는 명령어로 package.json 파일을 생성해줌) //app.js const express = require('express'); const app = express(); const port = 5000; const handleListening = () => console.log(`Listening at http://localhost:${PORT}`); const handleHome = (req, res) => res.send("This is Home!"); app.get('..