전체 글
-
[Wetube] Video Data 작성하기 / MVC모델TodayILearned/Wetube 2020. 9. 3. 02:32
결과물 기존에 임의로 작성한 데이터를 지우고, 몽고 DB와 연결한다. 목표 MVC 모델에 대해 이해한다. mongoDB와 Wetube애플리케이션을 연결한다. 동영상에 대한 모델(데이터)인 Video.js파일 작성 코드 db.js import dotenv from "dotenv"; import mongoose from "mongoose"; dotenv.config(); mongoose.connect(process.env.MONGO_URL, { useNewUrlParser: true, useFindAndMdify: false, }); const db = mongoose.connection; const handleOpen = () => console.log("✅Connected to DB"); const ha..
-
[Wetube] SQL/NOSQL/몽고DB 의 특징TodayILearned/Wetube 2020. 9. 1. 23:42
목표 데이터베이스의 종류에 대해 이해한다. SQL / NOSQL(Not Only SQL) 데이터베이스의 차이에 대해 안다. 몽고DB의 특징에 대해 안다. 코드 - 배운점 데이터베이스의 종류 Sql (Structure Query Language) 관계형 데이터베이스 관리시스템(RDBMS)의 데이터를 관리하기 위한 프로그래밍 언어. RDBMS(Relational Database Management System) : 현대 데이터베이스 시스템의 기초가 되는 시스템, 해당 시스템 내의 데이터는 연관있는 데이터의 모음인 테이블 오브젝트에 저장됨. 정해진 기준에 의해 구조화되어 저장됨. MYSQL, PostgreSQL, MariaDB, Oracle ANSI 와 ISO 의 표준이다. 표준언어이지만 여러 버전의 SQL언..
-
[Wetube] 임시데이터를 이용해 동영상 업로드 시 URL에 ID값 반환하기/post,get methodTodayILearned/Wetube 2020. 8. 29. 01:12
1. 결과물 사용자가 비디오를 업로드 할 경우, 새로운 ID(fake)를 반환 후, 사용자가 업로드 한 ID를 가진 video detail페이지로 리다이렉트한다. 2. 목표 GET,POST 메소드에 대해 안다. Upload 페이지 view 구현 파일업로드 기능/제목/설명/제출 form 구현 3. 코드 controller/videoController.js import routes from "../routes"; import video from "../models/video"; ... export const getUpload = (req, res) => { res.render("Upload", { pageTitle: "Upload" }); }; export const postUpload = (req, res..
-
[Wetube] 임시데이터를 이용해 Login 이후 구성하기 / middle ware 에 대해TodayILearned/Wetube 2020. 8. 26. 00:40
1. 결과물 - 2. 목표 로그인에 사용 될 fake data(ID) 를 생성해본다. fake data로 로그인 시, USER DETAIL페이지가 users/id 로 나타나도록 한다. header.pug를 수정하여 Profile 클릭 시, USER DETAIL로 이동하도록 한다. 3. 코드 middlewares.js import routes from "./routes"; export const localsMiddleware = (req, res, next) => { res.locals.siteName = "Wetube"; res.locals.routes = routes; res.locals.user = { isAuthenticated: true, id: 1, }; next(); }; middle ware..
-
[Wetube] DB.js를 이용하여 HOME화면에 동영상 리스트 보여주기TodayILearned/Wetube 2020. 8. 23. 17:44
1. 결과물 2. 목표 테스트 DB.js파일을 작성한다. mixin파일에 대해 이해한다. mixin파일을 이용해 HOME.PUG 파일로 송출한다. PUG란? Express내에서 사용 할 수 있는 View engine 해당 언어에서 사용되는 값을 해당되는 HTML언어로 변화시켜준다. HTML을 보다 쉽게 사용할 수 있게한다. mixin 이란? reuserble한 코드블럭을 생성하는 방법 중 하나이다. 계속해서 등장하는 캡슐화, 쪼개서 프로그래밍하는 방법 중 하나, 이는 유지보수를 편리하게 한다. 특정한 기능을 하는 코드를 캡슐화 했기 때문에 반복되는 코드를 줄일 수 있다. 참고링크 https://velog.io/@bluestragglr/Vue.js-Mixin-기능-반복-제거하기 3. 코드 DB.js exp..
-
[운영체제] 운영체제의 역사 (1950~1980)TodayILearned/운영체제 2020. 8. 22. 21:45
년도 특징 내용 1950년대 최초의 컴퓨터 발명 (ENIAC) 운영체제 없음 한개의 응용프로그램을 실행하기도 어려움 응용프로그램이 직접 시스템을 제어 함 1960년대 프로그램과 사용자가 증가 1. 배치처리 시스템 출현 -여러개의 프로그램을 돌릴 수 있도록 만든 시스템이었으나, 프로그램의 용량에 따라 비효율을 초래함. (A 프로그램 실행시간 30분 B 프로그램 실행시간 5분) 의 경우 B를 실행시키기 위해 A가 모두 실행 될 때 까지 기다려야 함 2. 1960년대 후반에 멀티태스킹/시분할 시스템이 이론적으로 발명됨 1970년대 멀티태스킹/시분할 시스템의 등장 1. 다중사용자를 지원하기위해 시분할/멀티태스킹 시스템 등장 1. 배치처리 시스템의 단점을 극복하기 위해 나온 시스템 1. CPU사용시간을 잘개 쪼개..
-
[Wetube] VIEW_JOIN/LOGIN 화면 구성 / partialTodayILearned/Wetube 2020. 8. 19. 01:39
결과물 partial 파일을 만들어, Social login 버튼을 JOIN/LOGIN화면에 추가하였다. partial 파일 더보기 다른 view파일 내부에서 보여지는 view이다. 뷰 속의 뷰? 기존의 View파일을 작게 쪼개서 관리할 수 있다는점,(캡슐화) 일부를 수정하기위해 전체를 수정 할 필요 없다. 쪼개서 관리! 이 partial 의 장점이다. 예시 main화면 내의 header/footer로 쪼개기 소셜 로그인 버튼 캡슐화 하기(깃허브,카카오톡,네이버,페이스북) 코드 SocialLogin.pug .social_login button span.social-login--github i.fab.fa-github |continue with github button.social-login--facebo..
-
[CSS] BEMTodayILearned 2020. 8. 18. 00:00
BLOCK ELEMENT MODIFY Block__Element--Modify Block = 전체를 감싸는 블럭 요소 (header/body/footer/container/ etc...) Element = 블럭 내의 작은 요소 (link/image/ etc...) Modify = 추가적인 기능 BEM이란, CSS 클래스네임을 구성하는 방법 중 하나이다. extends layouts/main.pug block content form-container form(action="routes.editProfile", method="post") label(for="avatar") Avatar input(type="file", id="avatar", name="avatar") input(type="text", pla..