개발로그필름

세 가지 버튼 중 MY INPUT 버튼만 오른쪽으로 이동시키려고 했는데 float를 써도 align-items를 써도 다 안돼서 몇 시간 동안 씨름하다가 알게 된 방법 부모 요소에 display: flex;를 하고 움직이고 싶은 요소 css에 margin-left: auto; 를 하면 되는 것 margin을 왼쪽에 둬서 오른쪽으로 붙이는 방식으로 구현했다고 생각하면 된다. 짜잔 완성본

status-bar 작업을 하는데 status-bar 안의 요소를 세로 가운데 정렬을 하고 싶었다. 여러 css 요소들을 적용해본 결과 .status-bar { height: 100px; display: flex; align-items: center; padding-left: 100px; } display: flex; align-items: center; 두 속성을 적용시키면 세로 가운데 정렬이 된다는 것을 알게 되었다!

라우터 안 경로 표시할 때 parameter(변수)를 사용하면 url 안에 변수를 포함시킬 수 있게 해 준다 parameter를 고정된 변수로 만드는 것은 불가능한데 그렇게 되면 개발자는 모든 경로마다 라우터를 새로 만들어줘야 한다 여기서 parameter를 id라고 칭하겠다 예를 들어, 내가 다른 일을 하는 동안 사용자가 내 개발 사이트에서 영상을 업로드하는데 그 주소에 대한 라우터를 내가 일일이 만들 수는 없다고 생각하면 이해하기가 쉽다 작동 방식은 사용자가 url 경로를 설정하면 express가 맞는 위치를 해당 변수 위치에 넣어준다 이때! express에게 '나 변수야'하고 알려주기 위해 변수 앞에 :를 표시한다 :id 변수를 만든 뒤 해당 라우터의 위치가 중요한데 변수가 포함된 라우터를 가장 밑..

morgan은 node.js용 request logger middleware이다. 터미널에서 npm i morgan으로 morgan 설치하고 import morgan from "morgan"; 로 morgan을 import 해준다 const logger = morgan("dev"); 아래와 같이 morgan 함수에 들어갈 5가지 옵션이 있다 각 옵션은 터미널에 좀 더 정교한 정보를 알려준다 각 옵션을 morgan()에 넣어보면서 터미널에서 다르게 나오는 걸 확인해 보면 된다 app.use(logger); 와 같이 사용하면 된다

MVP.css 미들웨어는 HTML의 요소들을 이쁘게 만들어준다 HTML 태그에 몇 가지 기본 스타일들을 입혀준다 mvp.css 사용 방법 head title #{pageTitle} | Wetube link(rel="stylesheet" href="https://unpkg.com/mvp.css") mvp.css link를 추가한다 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 andybr..

HTML을 리턴하는 방법은 두 가지 옵션이 있다 res.send("Hello!")으로 HTML 문자열을 그대로 보내는 방법 하지만 보내려는 HTML 코드 양이 많아지면 가독성도 떨어지고 보기에도 안 좋다 그 해결방안으로 나온 것이 Pug! pug는 템플릿을 이용해서 view 만드는 것을 돕는 템플릿 엔진이다 실행하고 있는 프로젝트 터미널에 npm i pug 설치 app.set("view engine", "pug"); express에게 이제부터 사용할 view engine은 pug라고 말해주기 express는 view 폴더 안에 있는 파일을 찾기 때문에 초기 세팅도 고쳐주어야 한다 express 튜토리얼 홈페이지에 나와있는 설명을 보면 기본적으로 process.cwd() + 'views' express가 ..

Router Router는 컨트롤러와 URL를 쉽게 관리해 마치 미니 애플리케이션을 만드는 느낌이다 프로젝트에서 필요한 Router를 만들기 전 README.md 파일을 만들어 전체적인 라우터 플랜을 만들어보는 것이 개발하기에 용이하다 어떤 종류의 데이터를 이용할 것인가에 따라 URL을 디자인 해보자 Router 생성 방법 const globalRouter = express.Router(); const userRouter = express.Router(); const videoRouter = express.Router(); 라우터 이름을 명시한 뒤 express.Router()로 라우터를 생성한다 Router 사용 방법 app.use("/", globalRouter); app.use("/videos", ..

middleware는 middle + software의 합성어로 중간에 있는 소프트웨어이다 앞서 request, response 두 개의 argument를 살펴보았는데 next argumnet가 하나 더 있다 next argument는 다음 함수를 호출해준다 만약 함수가 next 함수를 호출한다면 이 함수는 middleware라는 것을 알 수 있다 middleware는 사람들이 웹사이트의 어디를 갈지 알려준다 app.use()는 global middleware를 만들 수 있게 해준다 순서가 중요한데 middleware의 use가 먼저 온 뒤 URL의 get이 와야 한다 const logger = (req, res, next) => { console.log(`${req.method} ${req.url}`)..