[강좌 리뷰] 노마드코더 풀스택 유튜브 클론 코딩

November 15, 2021

[노마드 코더] 풀스택 유튜브 클론 코딩 리뷰

해당 강좌를 리뷰하는 글이다.
현재 프론트엔드쪽에 치우쳐서 개발하고 있다보니 실제 백엔드에 대한 개발도 맛을 보고 싶어서 수강하게 되었다.

해당 강좌에서 사용한 것들에 대해 간략하게 리뷰해보려 한다.

1. express

NodeJS 웹프레임 워크, MDN

HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.
템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다.
=> 여기서 PUG 사용
접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다.
핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.
=> 여러가지 미들웨어를 사용하여 처리 가능

1 - 1. morgan

express에서 사용하는 http 요청에 대한 로거 미들웨어, morgan

1 - 2. pug

NodeJs 템플릿 엔진, pug 홈페이지
쉽게 말해서 pug 소스를 작성하면 js를 통해서 HTML문서로 바꿔주는 것으로 보면 된다.

결국 여기서는 express에서 동적으로 HTML을 생성해주는 역할을 한다.

1 - 3. body-parser

요청에 바디를 내가 원하는 형태로 데이터를 parsing해준다.
Express v4.16.0 기준으로 body-parser가 빌트인 되어있음.

// Express v4.16.0 이후 기준
const express = require('express');
const app = express();

app.use(express().json()); //json 형태로 parsing
app.use(express.urlencoded( { extended : true } )); 

1 - 4. express-session

express에서 session을 사용할 수 있도록 해주는 패키지 express-session 페이지

1 - 5. connect-mongo

session 정보를 mongodb에 저장해주는 패키지 connect-mongo 페이지

1 - 6. dotenv

.env 파일로 부터 환경 변수를 읽어오는 패키지 (보통 감추어야할 정보를 환경변수에 넣음) dotenv 페이지

1 - 7. multer

multipart/form-data 를 다루기 위한 node.js 의 미들웨어 (이미지, 비디오등 파일을 다룸). multipart/form-data가 아닌 폼에서는 동작하지 않음. multer 페이지

1 - 8. express-flash

휘발성 메시지를 관리할 수 있는 미들웨어. 이것을 이용하여 알람 메시지를 구현함.

2. MongoDB

NoSQL로 Document oriented DB 이다.
써보니까 RDBMS보다 좀더 유연하다. 잘 정리된 글을 링크걸어둔다.

2 - 1. Mongoose

Mongoose는 Node.js와 MongoDB를 위한 ODM(Object Data Mapping) library라고 한다.

쉽게 말해서 Nodejs에서 mongoDB를 사용하기 쉽게 만들어주는 라이브러리라고 보면 된다.

나중에 필요할때 ODM/ORM라고 검색하면 된다.

MDN, mongoose 홈페이지

3. bcrypt

암호화 해시 함수, 비밀번호 암호화에 사용 npm

4. webpack

모듈 번들러. js, css, image등을 번들해줌

4 - 1. 각종 로더와 플러그인

babel-loader: js에 바벨을 적용시켜줌
css-loader: 기본적으로 HTML 문서의 <head> 영역에 인터널(internal) 스타일 방식으로 스타일 코드를 추가
mini-css-extract-plugin: css 파일을 별도로 추출함. “style-loader”와 MiniCssExtractPlugin.loader를 함께 사용하면 안됨.

5. FFmpeg.wasm

웹어셈으로 비디오나 오디오를 변환 혹은 stream해주는 도구. 내부적으로 SharedArrayBuffer를 사용하므로 서버 헤더에 Cross-Origin-Embedder-Policy과 Cross-Origin-Opener-Policy를 추가해줘야함.

6. 배포

6 - 1. heroku

PaaS로 클라우드 컴퓨팅 플랫폼이다. 이걸 통해서 배포하였다.

6 - 2. aws-s3

스토리지 웹 서비스. heroku에 호스팅한 앱이 다시 실행되는 경우 업로드한 파일이 없어지므로 사용함. 업로드한 이미지, 비디오 파일이 여기에 저장됨. 이걸 사용하기 위해서 aws-sdk와 multer-s3을 설치하였음.

6 - 3. mongo atlas

클라우드 mongodb 서비스. aws-s3를 사용한 것처럼 mongodb를 클라우드로 사용하기 위해서 사용.

결과물

mintube 주소

https://mintube.herokuapp.com/

git 주소

https://github.com/etch-cure/mintube

Twitter Facebook LinkedIn