문제) /, /about, /contact, /login 4개의 주소에 대응하는 페이지 라우팅을 express를 이용해 구현하라. express에 대해서 복습하는 챌린지였는데, 너무 오래전에 했던 거라 기억이 잘 나지 않았다. [Youtube 클론코딩] Express 라우팅 (tistory.com) [Youtube 클론코딩] Express 라우팅 서버와 리퀘스트 서버는 24시간동안 연속해서 켜져있으며 웹페이지의 정보를 담고있는 일종의 컴퓨터이다. 웹페이지에 접근하기 위해서는 브라우저 주소창에 해당 웹페이지의 도메인 주소나 IP riam.tistory.com 이전에 올렸던 포스팅들을 보면서 다시 복습했고, 이제야 Express 라우팅에 대해서 이해하게 된 것 같다. 1. 서버 구동하기 express는 ex..

이제 Front-end를 만들 차례다. 그러기 위해서는 Webpack이라는 것을 먼저 알아보자. webpack webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org 우리는 백엔드를 개발하기 위해 Node JS를 선택했다. 거기서 JS의 최신 문법들을 어느 브라우저에서도 호환이 될 수 있는 보편적인 문법으로 바꿔주기 위해 Babel을 사용했다. 프론트엔드도 마찬가지로 최신..

업로드 기능 자체는 이전에 작성했던 프로필 사진 업로드와 같은 기능을 사용해 비디오도 업로드 가능하다. 유저 및 비디오 스키마 변경 다만, 비디오를 업로드 한 사람만 수정 및 삭제할 수 있는 권리를 부여하기 위해서는 두 스키마의 연결이 불가피하다. DB를 배워보면 각 DB를 join 하기 위해서는 unique key를 이용해야 하는데 mongoDB는 자체적으로 _id 라는 unique key를 발행해서 관리한다. 따라서, 비디오의 스키마에서는 업로드 한 사람의 _id를 저장하고 유저의 스키마에서는 해당 유저가 업로드 한 비디오의 _id 들을 배열 형태로 저장하면 된다. 여기서 특이한 점은, 데이터의 type을 지정할 때, mongoose.Schema.Types.ObjectId 라고 지정했는데 그 이유는 ..

파일 업로드를 위해서는 input 태그의 속성을 이용해야 한다. 또, 어디를 눌러도 파일 선택 창이 열릴 수 있도록 label 태그로 감싸주면 좋다. - HTML: Hypertext Markup Language | MDN (mozilla.org) - HTML: Hypertext Markup Language | MDN HTML 요소는 사용자 인터페이스 항목의 설명을 나타냅니다. developer.mozilla.org label을 input요소와 연결하려면, input 요소에 id 값을 넣고 label에는 for요소를 넣은 뒤 두 요소를 같게 만들어 주면 된다. 또는 label 안에 input요소를 집어넣어주면 연결된다. 이를 이용해 유저의 프로필을 변경해보자. edit-profile.pug 수정하기 nam..

비밀번호 변경은 다음과 같은 로직을 따른다. 1. 기존 비밀번호, 새로운 비밀번호, 확인용 비밀번호를 입력받는다. 2. 기존 비밀번호가 데이터베이스에 존재하는 비밀번호와 일치하는지를 확인한다. 3. 새로운 비밀번호와 확인용 비밀번호가 서로 같은지 판단한다. 4. 2, 3번을 통과한 경우 새로운 비밀번호를 해시하여 DB에 저장한다. 1. 비밀번호 변경 페이지 제작 라우터 설정 이미 로그인 한 사람만 들어올 수 있도록 접근제어 미들웨어를 넣어서 설정해준다. 페이지 제작 패스워드 변경 페이지를 제작한다. 현재 views 를 보면 user용 페이지와 video 용 페이지들이 나뉘어 있는 것을 볼 수 있는데, 이것들을 정리하고 싶으면 따로 users 폴더와 videos 폴더로 옮겨준 뒤 경로 수정들을 해주면 된다..

프로필 수정 기능을 추가하기위해 페이지를 추가해보자. 순서 1. 라우터에서 프로필 수정에 사용할 url과 컨트롤러 설정 2. 컨트롤러에서 프로필 수정에 사용할 페이지 render 3. 프로필 수정에 사용할 페이지 파일 제작 4. 프로필 수정 기능을 컨트롤러에 추가 5. URL 보호 처리 1. 라우터에서 프로필 수정에 사용할 url과 컨트롤러 설정 2. 컨트롤러에서 프로필 수정에 사용할 페이지 render 3. 프로필 수정에 사용할 페이지 파일 제작 로그인 된 유저 정보를 화면에 표시해주어야 하는데, 우리는 이미 현재 로그인 한 유저의 정보를 세션으로 가지고있다. 또한 middleware를 이용해서 세션의 정보들을 다음과 같이 res.locals에 저장해두었는데, pug는 res.locals에 저장된 변수..