Looan's 개발 연습장

머리글 이번 시간에는 반복 작성을 피하기 위한 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..

머리글 이번 시간에는 URL 파라미터에 대해서 알아보자. URL 파라미터? 우선 설명을 위해 라우터의 일부를 작성했다. videoRouter.get("/upload", upload); videoRouter.get("/:id", watch); videoRouter.get("/:id/edit", edit); videoRouter.get("/:id/delete", delete); 각 비디오를 볼 수 있는 페이지, 수정 페이지, 삭제 페이지다. 여기서 중요한 건 id 앞에 붙어있는 ':'이다. 이걸 우리는 파라미터라고 부른다. URL에 변수를 넣을 수 있게 해 준다. 만약 파라미터가 없다면 우리는 모든 동영상의 id에 대해 get을 통해 페이지를 생성해주어야 한다. 그런데, 여기서 주의해야 할 점이 있다. 만약..

머리글 이번 시간에는 라우터에 대해서 알아보자. Router 컨트롤러와 URL의 관리를 쉽게 해주는 것이 라우터다. 미니 어플리케이션을 만들어준다고 생각하면 된다. 우선 라우터를 하나 생성해 보자. const globalRouter = express.Router(); const userRouter = express.Router(); const videoRouter = express.Router(); app.use("/", globalRouter); app.use("/videos", videoRouter); app.use("/users", userRouter); express에선 기본적으로 라우터 기능을 제공하므로, 이런 식으로 쉽게 라우터를 만들 수 있다. 이렇게 만들면 각 주소로 접근이 가능하다. 그렇..

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

머리글 이번 시간에는 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 파일..

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

머리글 꾸준히 강의를 듣던 중 가장 호기심이 생겼던 강의였다. 유튜브 클론 강의인데, 클론 대상보다는 프론트엔드와 백엔드를 동시에 학습이 가능한 풀스택 개발이라는 점이 많은 관심을 끌었다. 근데 강의 가격이 싼 편은 아니었다. 기존 카카오톡 클론 챌린지 수강 보상으로 받은 30% 쿠폰을 사용해서 252,000원이라는 가격에 구매를 했다. 지금 와서 보면 그렇게 비싼 강의는 아닌 것 같다.(아닌가?) 학습할 수 있는 내용이 상당히 많고, 풀스택으로 개발을 해볼 수 있다는 것이 가장 큰 메리트였다. 방학 중에 쉬엄쉬엄 들어서 꽤 오랜 시간 들었던 것 같다. 이번에 유튜브 챌린지도 마무리하고 복습 겸 해서 글을 남겨보려고 한다. 가장 처음엔 강의를 위해 필요한 준비물과 오류가 생겼을 때, 도움을 요청하는 방법..