반응형

HTML 4

[JavaScript, Node.js] 유튜브 클론 정리 5장 (1) - HTML, Pug

머리글 오늘은 라우터를 통해 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..

[JavaScript, Node.js] 유튜브 클론 정리 3장 (2) - Middlewares, Morgan

머리글 이번 시간에는 Middelware은 무엇인지 알아보자 Middleware? Middleware란 request와 response 사이에 있는 소프트웨어다. 즉 브라우저가 request를 하고 서버가 response를 하기 전에 이루어지는 무언가를 뜻한다. 우선 Middleware를 하나 생성해 보자. const testMiddleware = (req, res, next) => { console.log("middleware"); next(); }; 이전에 만들었던 handleHome 함수와 크게 차이가 없어 보인다. 하지만 차이점은 next라는 인수를 받고 있다는 것인데, 이는 다음 함수를 호출하기 위해 사용한다. 예시를 보자. app.get("/", testMiddleware, hanldeHome..

[HTML, CSS] 노마드코더 '카카오톡 클론' 후기

후기다 후기 좀 많이 늦은 감이 있지만 뒤늦은 후기를 써보려고 한다! 기존에는 과정을 쭉 나열하면서 쓰려고 했지만, 지금 쭉 훑어보니까 굳이 그렇게까지 해야 하나 싶어서 그냥 쭉 작성해 보기로 했다. 진짜 완전 기초를 배울 수 있는 강의라고 생각하면 된다. HTML의 작성법, 태그, CSS, VS code, Git을 통한 버전 관리, Github 사용법, 그리고 Github를 통한 배포까지! 웹을 개발하기 위한 기초 중의 기초를 배우고, 우리에게 친숙한 카카오톡을 클론 코딩하며 재미도 빼놓지 않고 챙겨준다. 무얼 배우나요? 앞서 말했듯 다양한 과정을 챕터에 따라 배운다. 우선 1장에선 준비물과 HTML, CSS, 그리고 여기선 배우지 않지만 이들의 단짝인 JavaScript가 무엇인지를 이론적으로 훑고 ..

[HTML, CSS] 노마드 코더 코코아 클론 일기

글을 시작하며 우선 노마드 코더와 관련하여 내돈내산으로 진행하는 후기임을 알린다!! 한창 무언가를 해야겠다고 마음은 먹고 무엇을 해야 하는지 감도 안 잡히던 때, 유튜브에서 한 채널을 만나게 된다. https://www.youtube.com/c/%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94NomadCoders 노마드 코더 Nomad Coders 한국인 린과 콜롬비아인 니꼴라스의 프로젝트 "노마드 코더" 입니다. 2015년 떠나, 현재까지 원하는 곳에서 일하며, 살고 있습니다. 📌 니콜라스와 무료로 코딩 공부하기 : https://nomadcoders.co www.youtube.com 바로 노마드 코더! 니콜라스라는 프로그래머가 운영하고 있는 유튜브이다. 단순 유튜브만 ..

반응형