Looan's 개발 연습장

머리글 이번 시간에는 데이터베이스를 생성해 보자. DataBase 우선 기존에 작성했던 form을 조금 수정해서 비디오 스키마에 맞는 정보를 입력받을 수 있게 해 보자. ... block content form(method="POST") input(placeholder="Title", required, type="text", name="title") input(placeholder="Description", required, type="text", name="description") input(placeholder="Hashtags", required, type="text", name="hashtags") input(type="submit", value="Upload Video") 그리고 라우터를 수정해..

머리글 이번 시간에는 쿼리를 검색해 보자. Query 우선 비디오 컨트롤러에 비디오 모델을 import 해주자. import Video from "../models/Video"; 그리고 mongoose의 공식 문서에서 Query와 관련된 자료를 한 번 보자. https://mongoosejs.com/docs/queries.html Mongoose v7.0.3: Queries Mongoose models provide several static helper functions for CRUD operations. Each of these functions returns a mongoose Query object. A mongoose query can be executed in one of two ways. ..

머리글 이번 시간에는 CRUD에 대해 알아보고, Schema와 Model에 대해서 알아보자. CRUD 1. C(Create) 생성 2. R(Read) 읽기 3. U(Update) 수정 4. D(Delete) 삭제 이 4가지를 의미하는 단어를 CRUD라고 한다. 이는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능을 묶은 것이다. 우선 기능을 만들기 전에 Model을 하나 생성해 보자. Model, Schema 우리는 mongoose를 통해 DB와 소통하고 있다. 따라서 mongoose에게 우리의 애플리케이션에 있는 데이터의 형태를 알려줄 필요가 있다. 구체적인 값을 지정하는 것이 아닌 어떤 타입을 가지는지 알려주면 된다. 이때, model의 생김새를 Schema라고 한다. 그럼 비디오 모델..

머리글 이번 시간에는 MongoDB에 대해서 알아보고 연결까지 해보도록 하자. MongoDB? https://www.mongodb.com/ MongoDB: The Developer Data Platform Get your ideas to market faster with a developer data platform built on the leading modern database. MongoDB makes working with data easy. www.mongodb.com MongoDB는 다목적의 document 기반의 분산 데이터베이스다. 일반적으로 많은 데이터베이스는 sql 기반이다. 즉, 엑셀과 비슷한 형태의 행 기반 데이터베이스다. 하지만 MongoDB는 문서 기반의 데이터베이스다. Mong..

머리글 이번 시간에는 데이터베이스에 접근하는 방법을 알아보자. How? 우선은 앞서 만들었던 가짜 비디오 데이터베이스를 다시 사용하자. const videos = [ { title: "First Video", rating: 5, comments: 2, createdAt: "2 mins ago", views: 59, id: 1, }, { title: "Second Video", rating: 5, comments: 2, createdAt: "2 mins ago", views: 59, id: 1, }, { title: "Third Video", rating: 5, comments: 2, createdAt: "2 mins ago", views: 59, id: 1, }, ]; 그리고 홈페이지에 접속하면 비디오들..

머리글 이번 시간에는 간편하게 CSS 작업을 해주는 MVP.css와 조건문, 반복문, 그리고 Pug의 기능인 Mixin에 대해서 알아보자. MVP.css 아무래도 개발 중인 화면은 늘 못생겼다. 그래서 이를 보완하기 위해 css 작업을 간단하게 도와주는 스크립트를 하나 써보려고 한다. 바로 MVP.css다. https://andybrewer.github.io/mvp/ MVP.css - Minimalist stylesheet for HTML elements A decent MVP in no time More building and less designing with "set and forget" styling. "Uber for X" brainstorming session andybrewer.github...

머리글 이번 시간에는 반복 작성을 피하기 위한 Pug의 기능인 Partials와 Templates 사용 방법에 대해서 알아보자. 우선 모든 페이지에 들어갈 footer가 하나 있다고 하자. footer © #{new Date().getFullYear()} Mytube 모든 페이지 하단에는 올해의 연도와 저작권을 표시하는 마크를 삽입할 예정이다. 그렇다면 우리는 모든 페이지에 이 코드를 넣어줘야 할까? 당연히 아니다. Partials 우선 위의 코드를 footer.pug 파일에 넣어서 저장해 주자. 그리고 우리는 footer를 사용할 페이지에 다음과 같이 작성해 주면 된다. doctype html html(lang="ko") head title Mytube body h1 Watch Page include ..

머리글 오늘은 라우터를 통해 HTML 페이지를 렌더링 하는 방법을 알아보자. HTML 렌더링 라우터를 통해 Html을 리턴하는 방법에는 2가지가 있다. 1. res.send(HTML 내용) 을 통해 렌더링 하는 방법 const see = (req, res) => res.send("Hi!"); 이런 방식으로 렌더링이 가능하지만, Html의 소스 코드가 복잡해질수록 불편한 방법이 될 것이다. 2. Pug를 사용해서 렌더링 하는 방법 Pug는 템플릿 엔진이다. 템플릿을 통해 view를 만드는 작업을 도와준다. 우선 Pug를 설치하자. npm i pug 그리고 express가 html 헬퍼로 pug를 사용하게 설정해줘야 한다. 서버 파일로 가서 다음 세팅을 해주자. app.set("view engine", "p..

머리글 이번 시간에는 URL 파라미터에 대해서 알아보자. URL 파라미터? 우선 설명을 위해 라우터의 일부를 작성했다. videoRouter.get("/upload", upload); videoRouter.get("/:id", watch); videoRouter.get("/:id/edit", edit); videoRouter.get("/:id/delete", delete); 각 비디오를 볼 수 있는 페이지, 수정 페이지, 삭제 페이지다. 여기서 중요한 건 id 앞에 붙어있는 ':'이다. 이걸 우리는 파라미터라고 부른다. URL에 변수를 넣을 수 있게 해 준다. 만약 파라미터가 없다면 우리는 모든 동영상의 id에 대해 get을 통해 페이지를 생성해주어야 한다. 그런데, 여기서 주의해야 할 점이 있다. 만약..

머리글 이번 시간에는 라우터에 대해서 알아보자. Router 컨트롤러와 URL의 관리를 쉽게 해주는 것이 라우터다. 미니 어플리케이션을 만들어준다고 생각하면 된다. 우선 라우터를 하나 생성해 보자. const globalRouter = express.Router(); const userRouter = express.Router(); const videoRouter = express.Router(); app.use("/", globalRouter); app.use("/videos", videoRouter); app.use("/users", userRouter); express에선 기본적으로 라우터 기능을 제공하므로, 이런 식으로 쉽게 라우터를 만들 수 있다. 이렇게 만들면 각 주소로 접근이 가능하다. 그렇..