Looan's 개발 연습장

머리글 이번 시간에는 유저의 프로필 페이지를 제작해 보자. 기존에 했던 작업과 큰 차이가 없다. 유저 프로필 페이지 헤더에 프로필 주소로 갈 공간을 만들자. ... li a(href=`/users/${loggedInUser._id}`) My Profile ... 로그인 한 유저의 아이디를 통해서 접근을 하기로 했다. 그리고 유저 프로필 페이지 접근을 위한 컨트롤러를 제작해 보자. export const see = async (req, res) => { const { id } = req.params; const user = await User.findById(id); if (!user) { return res.status(404).render("404", { pageTitle: "User not found..

머리글 이번 시간에는 간편하게 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..