반응형

클론 코딩 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] 유튜브 클론 정리 2장 (3) - babel, nodemon

머리글 이번 시간에는 babel은 무엇인지, 그리고 nodemon은 무엇인지 알아보도록 하겠다. Babel? https://babeljs.io/ Babel · Babel The compiler for next generation JavaScript babeljs.io 'Babel은 JavaScript의 컴파일러다.' nodeJS는 대부분의 JavaScript 코드를 이해한다. 하지만 호환이 되지 않는 최신의 코드도 있을 것이다. 그래서 우리는 Babel을 사용해서 우리의 코드를 컴파일하는 방법을 사용한다. 우선 터미널에 명령어를 입력해 주자. npm i --save-dev @babel/core 다른 명령어는 이해가 가는데 --save-dev의 경우는 처음 보는 명령어다. 이는 package.json 파일..

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

머리글 이번 시간에는 package.json에 있는 dependencies와 devDependencies에 대해서 알아보겠다. dependencies? 우선 이전에 설치되었던 node_modules 파일과 package-lock.json 파일을 삭제해 보자. 그리고 터미널에 명령어를 입력한다. npm i 이전과는 다르게 그냥 install만 입력했다. 이렇게 입력을 하면 삭제했던 두 파일이 다시 생겨난다. 그 이유는 바로 package.json 파일에 dependencies 항목에 있다. package.json 파일은 license나 author 등의 정보도 담고 있지만, 프로젝트를 동작하기 위한 필요 모듈도 담고 있다. 그게 바로 dependencies 항목이다. 프로젝트를 혼자 개발하는 경우 크게 상..

[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 바로 노마드 코더! 니콜라스라는 프로그래머가 운영하고 있는 유튜브이다. 단순 유튜브만 ..

반응형