1. Realtime Comment - fetch는 백엔드로 가고 백엔드는 db랑 뭔가를 하고 나서 상태코드를 리턴하고 이후 우리에게 돌아오는데 이때 시간이 소요됨   - 그렇기에 fetch에 await을 사용 - 이게 없어도 작동은 하지만 페이지가 새로고침 됐는데 fetch가 끝나지 않으면 시간이 그만큼 충분하지 않았다는 거임 - 조회수는 간단하기에 필요없지만 지금은 필요함 - fetch는 Promise를 리턴하는데 이게 시간이 좀 걸림   - 그래서 fetch 이후의 코드는 fetch 동작이 끝났을 때만 실행되도록 함 - 끝났다라는 표현은 동작이 성공했다는 것과는 다른 개념임 - 우리가 만든 videoController를 보면 때로는 404 상태코드를 리턴하기도 했음   - 404 상태코드를 받아도 ..

1. Error solution - 이전 상황에서 req.body를 했는데 아무것도 나오지 않았음   - 우리는 서버가 이해할만한 것들을 보내고 있지 않기 때문   - upload에서 form안의 input에 req.body를 사용해서 접근했음   - server.js의 express.urlencoded({extended:true}) 미들웨어를 사용했기에 서버가 form으로부터 오는 데이터를 이해할 수 있었음 - 이것과 비슷하게 서버가 fetch로부터 오는 데이터를 이해할수 있도록 가르쳐줘야 함   - 우리가 fetch를 통해 보내는 데이터는 json 타입임 - 그래서 우리는 fetch의 body를 받아서 stringify 해줘야 함   - 알아둬야 할 것은 js는 객체를 보낼 수 없음   - 브라우저나..

0. Before start - 댓글을 구현할 건데 우리가 했던 모든 것들을 복습할거임 - 새로운 모델, 컨트롤러, 라우터, 바닐라JS, 상태코드, populate, mongoose relationship 등등 - 동적인 댓글을 구현하고 이게 끝나면 배포할 거임 - 실제 db를 사용하고 assets은 서버에 저장하면 안되니 그런 것들을 전부 수정 - 모든 시작은 데이터부터 이므로 모델 먼저 만들거임1. Comment Modelimport mongoose from "mongoose";const commentSchema = new Mongoose.Schema({ text: { type: String, required: true }, owner: { type: mongoose.Schema.Types.Obj..

1. Flash Message - 우리가 기존에 만든 미들웨어를 보면 아직까진 아무런 메시지도 랜더링 하고 있지 않음 - 지금은 단순히 리다이렉트 되고 있지만 유저에게 메시지를 보여주는게 좋을거 같음 - 이걸 만들기 위해서는 express-flash가 필요함 - https://www.npmjs.com/package/express-flash express-flashFlash Messages for your Express Application. Latest version: 0.0.2, last published: 11 years ago. Start using express-flash in your project by running `npm i express-flash`. There are 190 other ..

1. Views - 이번에 해볼건 조회수 관리임 - 이번에는 랜더링하지 않는 views를 만들어 볼건데 이런걸 api views라고 함 - 대부분 브라우저에서 이렇게 작동하고 있는데, 요즘 시대에는 백엔드에서 템플릿을 랜더링하지 않음   - 대부분의 웹 앱은 프론트와 백을 정확히 나누고 있기 때문   - 백엔드에서 db와 인증을 처리하고 프론트에서는 리액트 같은 걸로 만듦 - 우리가 사용하고 있는 방식은 SSR(Server Side Rendering)   - 즉 서버가 템플릿을 랜더링 하는 것까지 처리   - 요즘은 리액트로 프론트를 만들고 nodejs로 백엔드를 처리   - 사실 nodejs로 템플릿을 랜더링하지 않음 - 지금 하게 될 새로운 방식의 views를 만들고 나면 차이를 알 수 있게 됨 - ..

1. Populate - see 컨트롤러에서 하고 있는건 owner가 user._id인 모든 영상을 url에 있는 user id를 가지고 찾는 것 - 기존의 코드가 나쁜건 절대 아니지만 더 나은 방식이 있음 - models 폴더를 보면 Video는 1개의 owner를 가지고 있고, owner는 여러개의 영상을 업로드 할 수 있음 - 위 논리를 바탕으로 User 모델 안에 배열을 생성   - 배열에는 객체를 채우면 되는데 우린 ObjectId를 사용videos: [{ type: mongoose.Schema.Types.ObjectId, ref: "Video" }], - 이제 video 컨트롤러를 수정해야 하는데, 이유는 우리가 영상을 업로드할 때 추가적으로 할 것들이 있기 때문 - 우린 Video owner..

1. User Profile - 유저의 프로필 페이지를 만들어야 함 - 유저의 프로필 창에서 해당 유저가 올린 영상들을 확인할 수 있어야함 - 우린 로그인한 유저의 id로 가는 네비게이션을 만든거임   - 나중에는 모든 유저가 접근할 수 있게 만들거임 - 유저 프로필에서는 id를 user session에서 가져오지 않을거임   - 다른 유저들도 볼 수 있어야 하기 때문에 url에 있는 id를 가져올거임 - 이제 Video와 User를 어떻게 연결할지 알아야함   - 그전에 videos와 users를 모두 비워야함2. Video Owner - Video와 User를 연결해야 함 - id는 고유하므로 이걸 사용하여 연결 - users에는 유저가 업로드한 모든 영상의 id를 저장 videos에는 해당 영상을 ..

1. Video Model - https://github.com/expressjs/multer/blob/master/doc/README-ko.md#limits multer/doc/README-ko.md at master · expressjs/multerNode.js middleware for handling `multipart/form-data`. - expressjs/multergithub.com - 이미지 업로드 때 처럼 시작 - API를 보면 추가적으로 보낼 수 있는 옵션들이 존재함 - fileSize라는 옵션을 가지고 2개의 미들웨어에서 avatar 파일과  video 파일의 용량을 제한 - 영상이 잘 업로드되고 db에도 잘 등록   - 하지만 이전 파일들이 지워지지 않는 문제가 존재2. Watc..

1. Multer - 파일 업로드를 위한 middleware를 사용 - https://www.npmjs.com/package/multer multerMiddleware for handling `multipart/form-data`.. Latest version: 1.4.5-lts.1, last published: 2 years ago. Start using multer in your project by running `npm i multer`. There are 4721 other projects in the npm registry using multer.www.npmjs.com - 우리 form이 다르게 encode 될 거라는 의미임   - 이 것이 파일을 upload 하기 위한 유일한 조건 - API..

1. Edit Password Template - 비밀번호 변경은 계정정보를 설정하는 곳에서 따로 진행 - 비밀번호를 변경할 template을 만들고 userRouter에 route 만들고 controller에서 get post함수를 만들어서 import 시켜야 함   - 로그인 된 상태인 유저만 접근해야하니 protectorMiddleware를 사용 - 이제 슬슬 views 폴더에 파일이 많아지므로 다른 폴더들처럼 정리를 하는게 좋고 그에 맞게 각 파일마다 경로를 수정해야함  - 암호를 수정하는 것은 홈페이지에서 회원가입만 user만 해당되며, 소셜로그인이 된 user라면 change password 버튼이 보이지 않아야함   - 소셜로그인 user는 비밀번호 없이 가입했기 때문 - 첫번째 방법과는 다..