Psychogrammer

🌚 Back 검색 결과

해당 글 33건

웹팩(Webpack) 쓰는 이유 / 사용 방법

웹팩(module bundler) 쓰는 이유 2000년대 초반의 웹페이지는 각 페이지마다 새로운 html을 요청해서 화면을 나타냈다. 자바스크립트는 DOM을 조작하는 간단한 역할만 했었기 때문에 html의 script태그에 넣는 것으로도 충분했다. ajax가 유행했을 때는 자바스크립트의 비중이 조금 더 커졌지만 그래 봐야 페이지당 자바스크립트 파일 몇 개면 충분했다 SPA(single page app)는 하나의 html에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 더 이상 기존 방식이 통할리 없었다. 위의 방식으로는 계속 늘어나는 자바스크립트 파일을 관리하기 힘들다. 또한 선언되는 순서도 신경 써야 하고, 기존에 생성된 전역 변수를 덮어쓰는 위험도 존재한다. 모듈 시스템이 필요하다 자바스크립트..

🌚 Back/🧩 Node.js 2021. 2. 13. 10:49

사용자 인증 미들웨어: PassportJS

6.0 passport js 사용자 인증 구현시켜주는 미들웨어 인증이란 브라우저 상에 쿠키를 설정해주면, 그 쿠키를 통해서 사용자 ID등을 알 수 있을 것이고, Passport가 브라우저에서 자동으로 쿠키를 가져와서 인증이 완료된 user object를 controller에 넘겨준다. 쿠키에는 모든 request에 대해 백앤드로 전송될 정보들이 담겨 있다. passport역할 쿠키 생성 브라우저에 저장 유저에게 해당 쿠키를 전달 pssport integration passport.autheriface('strategy')작동 후 req.user가 생기며, 그것은 현재로그인한 사용자가 된다. passport local mongoose npm install passport-local-mongoose 사용자 ..

🌚 Back/🧩 Node.js 2021. 2. 12. 20:17

스키마 만들기: 스키마, 모델, 컬렉션

스키마(구조적 개념, 데이터 형태 만들기) : Mongoose에게 데이터(=다큐먼트)를 어떤 구조로 저장해야할지 알려주는 객체이다. 모델(= document name) : 실제 데이터를 의미한다. 스키마로 구조적 설계를 하고 모델을 생성하는 것이다. 컬렉션(추상적 개념) : Document(데이터)가 1개이상 모여 이루어지는 것이 Collection이다. 컬렉션은 별도의 스키마를 가지고 있지 않기 때문에, 모든 필드가 required=true가 아니라면 컬렉션 안에 있는 Document는 모두 다른 구조를 가질 수 있다. Collection은 여러개 만들어서 성격에 맞는 데이터들의 문서를 저장하는 것이 효율적이다. models폴더 models 폴더에 스키마 별로 js 파일들로 만든다. //Video.js..

🌚 Back/🍃 MongoDB 2021. 2. 5. 10:39

mongoDB 연결하기

db.js파일 import mongoose from "mongoose"; import dotenv from "dotenv"; dotenv.config(); mongoose.connect(process.env.Mongo_URL, { useNewUrlParser: true, useFindAndModify: false, //configuration을 설정 }); // mongoose.connect() // string으로 된 데이터베이스를 요청하여 어디에 데이터베이스가 저장되어있는지 알려준다. // Mongo_URL = "mongodb://127.0.0.1:27017/serverPractice" const db = mongoose.connection; // mongoose.connection.once로 바로 ..

🌚 Back/🍃 MongoDB 2021. 2. 5. 10:39

mixin: 같은 형식을 모듈화하여 랜더링하기

mixin: 다른 정보 + 같은 형식을 가진 것들을 캡슐화하는 컨셉을 일컫는다. ex) DB records db -> web까지의 흐름 1. db.js 2. videoController.js 3. home.pug 4. videoBlock.pug 1. db.js : db.js에서 객체'enlistedVideo' export하자. export const enlistedVideo = { ... } 2. videoController.js : controller에서 'home'페이지로 랜더링 할 때 객체'videos'를 탬플릿으로 전달하자. import { enlistedVideo } from "../db"; export const home = (req, res) => res.render("home", { pag..

🌚 Back/🧩 Node.js 2021. 1. 25. 18:37

View Engine <PUG> <res. locals>

PUG를 쓰는 이유 HTML, CSS의 다소 난잡한 코드를 PUG를 통해 간략한 코딩을 할 수 있음 Jade가 이름 바꾼 게 Pug임 This project was formerly known as "Jade." However, it has been revealed to us that "Jade" is a registered trademark, and as a result a rename is needed. After some discussion among the maintainers, "Pug" has been chosen as the new name for this project. The next major version will carry "pug" as the package name. 설정 방법 /..

🌚 Back/🧩 Node.js 2021. 1. 25. 12:38

[Express 미들웨어 코드] app.use(), app.get(), Router()

const app = express.use() app.get(path, function) 1) HTTP GET메소드에 관한 Request만 다룬다. ex) GET = 단순히 페이지를 가져오는 것, POST = 정보를 전달 2) 최종 respond를 보낼 때 사용한다. ex) res = 정보를 응답 ( res.send ) app.get('/user', function (req, res, next) {res.send('USER')} ) app.use(middleware), app.use(path, Router) 1) 모든 종류의 HTTP request를 다룬다. 2) 주로 미들웨어를 다루며, 큰 라우팅으로 나눌 때 사용된다. 3)세부적인 라우팅(http메소드)은 폴더 내 생성한 다른 라우팅 전담 파일에 맡긴..

🌚 Back/🧩 Node.js 2021. 1. 25. 12:29

[Express 미들웨어 라이브러리] morgan, helmet, cookie-parser, body-parser

1. morgan Logging미들웨어: http 상태 코드, 접속 하는데 걸린 시간, 명령어 등을 기록한다. npm i morgan import morgan from "morgan" app.use(morgan("dev")) // morgan의 인자로 combined, tiny, dev 등이 존재한다. 2. helmet 다양한 HTTP 헤더를 설정하여 Express 응용 프로그램의 보안을 유지하도록 도와준다. npm i helmet import helmet from "helmet" app.use(helmet()) 3. cookie-parser 쿠키 사용에 도움을 준다. 쿠키 헤더를 파싱하고, req.cookies를 쿠키 이름으로 키가 된 객체로 채운다. npm i cookie-parser import c..

🌚 Back/🧩 Node.js 2021. 1. 25. 12:18

[Express 미들웨어] 미들웨어란? 미들웨어 작성법

1. Middleware란? 1) HTPP 요청에서 시작해, 최종 응답으로 라우팅하기 전의 중간 단계를 말한다 2) HTTP 요청이 들어온 순간 시작된다. 3) HTTP 요청과 응답 사이에 단계별 동작을 수행해주는 함수다. 4) HTTP 요청 객체를 처리하거나, 응답 객체를 처리, 다음 미들웨어를 실행할 수 있다. 5) HTTP 응답이 최종적으로 마무리될 때까지, 미들웨어 동작 사이클이 실행된다. 6) 최종 응답으로 가지 못하게 연결을 끊을 수도 있다. 미들웨어 선언하기 const middleware = (req, res, next) => { next(); } req, res, next를 가진 함수를 작성하면 해당 함수는 미들웨어로 동작할 수 있다. - req: HTTP 요청을 처리하는 객체, HTTP ..

🌚 Back/🧩 Node.js 2021. 1. 22. 12:10

[Express 셋팅 라이브러리]: babel, nodemon

babel 이란? 최신 ES6 JS코드를 무난한 예전의 코드로 변환해주는 "자바스크립트 컴파일러 라이브러리"이다. babel 설치 npm install @babel/node npm install @babel/core npm install @babel/preset-env npm install core-js@3 // 만약 리액트를 사용한다면, 다른 종류의 프리셋을 사용해야한다. 여기선 env프리셋을 사용했다. ​ .babelrc 파일 만들기 - 바벨의 프리셋을 설정하는 파일을 만든다. - 바벨이 실행되기 전에 이 파일 거쳐, 설정해둔 프리셋을 읽게 된다. { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "corejs": 3 } ] ] } ba..

🌚 Back/🧩 Node.js 2021. 1. 21. 18:17

[Express 입문] 웹 서버 프레임 워크 express란?

1. Express란? Node.js로 서버 만들 때 사용하는 강력한 웹 프레임워크 라우팅과 미들웨어 기능을 구현하며, 엄청나게 안정적이다.​ 웹 프레임 워크: 웹 서비스를 빠르게 구성하기 위해, HTTP 요청, 응답, 라우팅, HTML Templating 등의 기능을 제공하는 툴이다. 라우팅: HTTP 요청 URL에 해당하는 알맞은 응답을 보내주는 경로를 미리 설정해주는 기능 2. Express 설치 $ npm install express $ npx express-generator my-web express-generator - 프로젝트의 기본구조를 빠르게 구축할 수 있는 방법이다. - 프로젝트 생성 이후엔 사용되지 않기 때문에 npx를 이용하여 사용된다. 디렉토리 구조 app.js: Express.j..

🌚 Back/🧩 Node.js 2021. 1. 20. 11:32

[Node] 브라우저 밖의 JavaScript

1. Node.js란? JavaScript는 브라우저에 내장되어 사용되는 언어였다. Node.js는 JavaScript를 브라우저 밖으로 가지고 나왔다. 이를 통해 파일 시스템을 다룰 수 있게 되고, 서버를 만들 수 있고, 웹 스크레퍼를 만들어서 정보들을 수집할 수 있게 됐다. 나아가 Electron을 통해 HTML, CSS, JS로 데스크탑용 APP을 만들 수 있게됐다. 2. 누가 쓸까? 대표적인 기업으로 paypal, uber, netflix등이 있다. 백앤드 개발은 한 가지 언어가 메인이 되긴 하지만, 규모가 큰 경우 여러 언어로 사용하는 것이 일반적이다. 3. 특장점 1. 익숙한 언어 프론트 개발은 모조건 자바스크립트로 하지? 근데 백앤드도 자바스크립트로 한다면? 익숙한 언어로 금방 하겠지? ​ ..

🌚 Back/🧩 Node.js 2021. 1. 20. 11:18

MongoDB 란? 대표적인 NOSQL 데이터베이스

mongoDB 이란? 대표적인 NoSQL 데이터베이스이다. mongo(humongous, extremely large)는 Humongous 에서 따온 말로, 엄청나게 큰 DB 라는 의미이다. 대용량 데이터를 처리하기 좋게 만들어졌다. vs SQL 데이터베이스 Relational Database 관계형 데이터베이스 자료들의 관계를 주요하게 다룸. SQL 질의어를 사용하기 위해 데이터를 구조화해야 함 Non SQL 또는 Not Only SQL 구조화된 질의어를 사용하지 않는 데이터베이스 자료 간의 관계에 초점을 두지 않음 데이터를 구조화하지 않고, 유연하게 저장함 SQL을 사용하기 위해서는 데이터를 구조화하는 것이 필수(DDL)라, 스키마에 정의된 데이터가 아니면 저장할 수 없는 제약이 따름 하지만 NoSQ..

🌚 Back/🍃 MongoDB 2021. 1. 19. 15:44