유튜브 클론 만들기 강의 복습 (nodejs, express, vanilla js, mongodb)

정리하는 시간도 공부하는 시간에 포함하자

프론트단과 백엔드단(DB)을 전반적으로 한 번 훑어보고 싶어 시작하게 되었다

MVC 개발을 할 때 3가지 형태로 역할을 나누어 개발하는 방법론. M : MODEL 데이터를 처리하는 역할 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 함 (EX. DB, 상수, 변수, 초기화 값 등...) 데이터 변경이 일어났을 때 모델에서 화면 UI를 직접 조정해서 수정할 수 있도록하면 안 됨 V : VIEW 사용자에게 ...

MONGODB SQL과 NoSQL 두 종류의 데이터베이스가 있는데 몽고디비는 NoSQL에 해당한다. 몽고디비 사이트에서 다운을 받고 CMD 창에서 이때 아무 반응이 없다면 시스템 변수 편집창에서 내가 설치한 경로 중 몽고디비 bin 경로를 추가해주면 해결이 된다. image.png MONGODB는 C++ 언어로 자바스크립트가 읽지 못하기 때문에 이를...

MODEL 몽고디비에 우리의 파일들이 어떤 식으로 생겨야할지 알려줘야 하고 그 역할을 MVC 패턴에서 M(MODEL)이 한다. 모델은 데이터이고, 스키마는 데이터를 담고 있는 형태로 쓰인다. (EX. fileUrl의 타입은 string이고 필수 입력값이고... 등등을 정의해줌) models/Video.js 작성한 모델 파일을 init.js 에 연결 ...

multer 사용하기 file 업로드 후 url을 반환하는 미들웨어 1. 업로드 하는 폼 태그는 multipart/form-data 형식 폼 태그에 enctype="multipart/form-data" 추가한다. (* method는 전송 방식, action은 전송 목적지, enctype은 전송되는 데이터 형식을 설정) (* enctype 중 multip...

비디오 수정 페이지 videoRouter.js 비디오 라우터에서 get메서드, post메서드 분리 videoController.js videoController에서 해당 비디오 값을 받아 /videos/${id}/edit 링크로 editVideo.pug 에 렌더링 routes.js editVideo.pug 이 폼은 post 형식으로 타이틀과 설...

install .eslintrc.js 생성 vscode 내부에 eslint 설치 https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 안 쓰는 변수나 잘못된 문법을 알려주는 용도로 쓴다고 한다. 잘 애용하면 좋을 듯.

WEBPACK 모듈 번들러로 쉽게 말해 최신화 되어 있는 코드를 호환이 되는 버전으로 변환시켜주는 역할을 한다. 1. WEBPACK 설치 웹팩을 설치하고 콘솔창에서 웹팩 실행할 수 있게 설치 assets 폴더 > js 폴더 > main.js assets 폴더 > scss 폴더 > styles.scss 2. 서버와 프론트 나눠서 실행시키기 위한 작업 ...

PASSPORT 브라우저에 쿠키를 설정해주면 그 쿠키를 통해 사용자 ID(정보)등을 알 수 있다. 여기서 PASSPORT가 브라우저에서 쿠키를 가져와 인증이 완료된 유저 정보를 CONTROLLER에 넘겨주는 역할을 한다. passport 미들웨어를 통해 페북, 깃헙, 구글, 스팀, 인스타그램, 위챗 등... 대부분의 서비스로부터 인증을 받을 수 있다 ...

전반적인 흐름 image.png image.png 0. 깃허브 인증앱 만들기 1. passport-github 설치 & User 모델 파일 작성 passport.js passport-github 인스톨을 passport.js 파일에 설치 GithubStrategy strategy 생성 (env 파일을 이용해 개인정보보완) User.js 깃헙으...

userController.js file ? file.path : req.user.avatarUrl 파일이 있으면 업로드한 파일 경로를, 그게 아니라면 유저가 갖고 있는 기존의 아바타url 사용 middlewares.js 미들웨어에서 uploadAvator 물터 경로 설정 userRouter.js 유저 프로필 수정 라우터 중간에 uploadAv...

API 등록하기 비디오 플레이 버튼을 누를 때마다 VIEW (조회수) 상승시키기 1. 경로 설정 routes.js 2. 라우터 등록 apiRouter.js routes.registerView 경로로 페이지가 이동시 postRegisterView 함수 실행 3. 컨트롤러 연결 videoController.js 4. 프론트단 fetch 설정하여 a...

댓글 API 등록하기 댓글 달기 1. 경로 설정 2. 라우터 등록 apiRouter.js 3. 컨트롤러 연결 videoController.js 4. 프론트단 addComment.js 작성 view/videoDetail.pug

AWS 1. AWS S3 > 버킷 생성 2. 해당 버킷 퍼블릭 설정 3. AWS IAM > 사용자 추가 > 기존정책연결 > S3 (AmazonS3FullAccess) 4. 생성된 USER의 액세스키ID, 비밀액세스키 복사 (.env 파일 저장) aws, multers3 설치 aws s3 storage를 multer s3로 설정 middlewares.j...