909 Devlog

이때까지 서버에게 어떤 동작을 하도록 시키려면, URL을 입력하거나 링크를 타고 페이지에 들어가 get 요청을 보내거나, form의 post를 통해 서버의 controller를 통해 백엔드를 동작시켜 응답을 받았습니다. 하지만 URL과 form을 사용하지 않고 서버의 controller를 동작시키고 싶을 때가 많습니다. 유튜브를 예로 들면 영상 조회수를 증가시키거나, 좋아요 / 싫어요, 재생목록 추가 기능들은 URL과 form을 사용하지 않고 동작합니다. 따라서, 이번 포스팅에서는 URL과 form을 사용하지 않고 서버의 controller를 작동시키는 법을 알아보겠습니다. 만들어 볼 기능은 페이지에 올라와있는 영상을 다 보면 조회수가 올라가도록 하는 기능입니다. 1. api 기본 세팅 api를 사용할 ..

0. Webpack을 배우는 이유 제 유튜브 클론코딩 첫 번째 포스팅을 보셨다면, 프로젝트의 백엔드에서 최신 자바스크립트 문법을 사용하기 위해, Babel이란 자바스크립트 컴파일러를 거쳐 Node.js가 작동하고 있다는 것을 알고 계실 겁니다. 프론트엔드에서 사용하는 자바스크립트는 브라우저(크롬, 파이어폭스 등)마다 다르게 작동할 수 있습니다. 따라서, 백엔드에서 했던 자바스크립트 컴파일 작업을 프론트엔드에 사용하는 자바스크립트에도 적용시키고, CSS 작업을 더 편리하게 할 수 있는 SCSS를 사용하고, 어느 브라우저든 이해할 수 있는 코드를 넘겨주려면, Webpack을 사용해야 합니다. 사실 많은 개발자들은 Webpack을 직접 사용하지 않습니다. 대부분 Webpack이 이미 포함되어 있는 툴들(rea..

지금 제가 만든 프로젝트에는 2가지 데이터 모델이 있습니다. 하나는 Video 모델이고, 하나는 User 모델입니다. 지금은 두 데이터베이스 모델들이 연결되어있지 않지만, 곧 구현할 기능을 위해서는 User에는 해당 'user'가 업로드한 'video'들의 정보가 필요하고, Video에는 해당 'video'를 업로드한 'user'의 정보가 필요하니 두 데이터베이스 모델끼리 연결해야 합니다. 따라서, User에는 해당 'user'가 업로드한 모든 'video'의 _id를 저장하고, Video에는 해당 'video'를 업로드한 'user'의 _id를 저장해 보겠습니다. 1. 데이터베이스 _id 공유 먼저 videoSchema에 'owner'를 추가해 보도록 하겠습니다. const videoSchema = n..

*Node.js, express, MongoDB 환경에서 구현하는 깃허브 로그인 방법입니다.* 프로젝트에 소셜 로그인을 구현해 봅시다. GitHub는 OAuth 방식을 사용하는데, 다른 소셜로그인(카카오, 구글 등) 또한 같은 방식을 사용하니 이번 포스팅을 보시면 다른 소셜로그인도 구현하실 수 있으실 겁니다. 깃허브 로그인 방식은 사용자를 깃허브로 보내고, 로그인하게 됨 (깃허브가 비밀번호, 보안, 이메일 인증 등 모든 것을 처리해 줌) 승인되면 사용자는 token과 함께 프로젝트 웹사이트로 돌아옴 유저의 토큰으로 깃허브 API에 access 해서 사용자의 정보를 가져옴 이므로, 순서대로 알아봅시다. 1. GitHub Applications 깃허브 세팅 페이지에 들어가서 왼쪽 nav 맨 밑에 Develo..

이번 포스팅에서는 express에서 session과 cookie를 사용하는 법에 대해 알아보겠습니다. 세션과 쿠키는 이전 포스팅 [WEB/HTTP] - 쿠키(Cookie)와 세션(Session)에서 다루었으니 이 포스팅에서는 express에서 사용하는 방법 위주로 작성하겠습니다. 1. express-session express에서 세션을 사용하기 위해서는 express-session을 설치하고 서버 파일에 불러와야 합니다. 터미널에 아래 코드를 입력하여 설치합니다. npm i express-session 서버 파일에 express-session을 불러오고, router 앞에 초기화합니다. import session from "express-session"; ... app.use( session({ sec..

1. Create Video 이전 포스팅에서 video schema를 만들었습니다. 그 스키마에서 사용자에게 입력받아야 하는 것은 title과 desciption 그리고 hashtags들입니다. 입력값을 얻기 위해 form을 만들러 가봅시다. upload.pug를 다음과 같이 수정합니다. extends base.pug block content form(method="POST") input(placeholder="Title", required, type="text", name="title") input(placeholder="Description", required, type="text", name="description") input(placeholder="Hashtags, separated by com..