https://github.com/Daniel-Jeon/project1/commit/7b288ce88bae658e4143189d06b821b1b43494a7export const startKakaoLogin = (req, res) => { const baseUrl = "https://kauth.kakao.com/oauth/authorize"; const config = { client_id: process.env.KAKAO_API_KEY, redirect_uri: process.env.KAKAO_REDIRECT_URI, response_type: "code", }; const parameters = new URLSearchParams(config).toString(); retur..

다시 이 망할 흐름을 살펴볼때가 됐다.API에 나와있듯 사용자의 GET https://github.com/login/oauth/authorize 요청이 필요하므로 버튼을 해당 링크로 이동하게 한다.근데 이대로만 보내면 404가 에러가 뜨는데 url 뒤에 파라미터를 붙여서 보내야 한다.client_id는 필수고 그외 본인이 필요한 파라미터들을 추가하여 보낸다.이 부분을 효율적으로 관리하기위해 라우터와 컨트롤러에 따로 startGithubLogin을 만들어 관리한다.이번 프로젝트에선 메일 주소만 필요하다 생각하여 scope에는 user:email만 추가하였다.URLSearchParams를 사용하여 파라미터를 관리하여 gthub로 유저를 효율적으로 보낸다.유저가 수락하게 되면 Authorization call..

세션은 웹에서 유지되는 정보인데 이걸 통해 유저들의 로그인 관리를 위해 주로 사용된다express-session 모듈을 사용하여 세션 미들웨어를 만들게 되면 이제 페이지를 이동할 때마다 쿠키에 세션이 담겨져 있는걸 관리자 도구에서 확인할 수 있다.간단하게 미들웨어를 만들어 req 내부를 볼수 있는데 중간에 세션이나 세션id도 보이고 하단에 cookie도 볼수있다.초기에는 resave와 saveUninitialized를 true로 주고 모든 사용자의 세션을 생성했지만 그렇게 되면 부하가 발생할 수 있으므로 로그인한 유저만 세션이 생성될 수 있도록 false로 바꾸고 postLogin에서 아이디와 비번체크가 되고나면 세션 객체에 프로퍼티를 추가하여 객체가 변경되면 세션이 생성되록 했다.하지만 이렇게하면 세션..

조인 > 로그인을 진행하면서 했던 것들기본적으로 조인에 필요한 정보가 무엇인지 고려해야함계정명을 이메일로 하고 비밀번호 확인하고 닉네임까지이메일과 닉네임은 중복되지 않아야 하고비밀번호와 닉네임은 submit 되기 전에 이벤트로 구현을 해야하지만 현재는 백엔드에서 확인하고 있음유저 보안을 위해 비밀번호를 해싱화했고 bcrypt라는 라이브러리 사용또한 계정이 생성되기전에 해싱되야 하므로 mongoose의 미들웨어를 사용했음그 미들웨어에 save 훅을 사용했으며 document 미들웨어라서 this를 통해 userSchema의 비밀번호를 대상으로 삼을 수 있음이전에 공부했듯 비밀번호가 업데이트 될때 해싱으로 인한 문제가 발생할 수 있다는걸 기억해야 함로그인을 할때 compare를 사용하지 않고 입력받은 비밀번..

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. 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에는 해당 영상을 ..