그럼에도 불구하고

npm 패키지 매니저와 설치모드에 대해 알아보겠습니다. npm install, yarn add 명령어는 Node.js 패키지(라이브러리)를 설치할 수 있는 명령어입니다. 설치 모드는 크게 네 가지입니다. 📌 npm install [패키지명1] [패키지명 2] npm install [패키지명1] [패키지명2] 이 명령어는 '로컬 모드'로 설치합니다. 로컬 모드는 현재 디렉터리의 node_module 디렉터리에 패키지를 설치하는 것입니다. 📌 npm install -g [패키지명 1] [패키지명 2] npm install -g [패키지명1] [패키지명2] -g 옵션은 패키지를 전역(global)에 설치합니다. 전역으로 설치한 패키지는 현재 컴퓨터 내의 모든 프로젝트에서 이용할 수 있습니다. 📌 npm in..

EJS에 대해 알아보자 [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. ( 자바스크립트를 사용하면 가능하다.) 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있게 해 준다. 따라서 기존 HTML과 문법이 다른 부분이 있고, 자바스크립트 문법이 들어가기도 한다. ( 놀랍다. ) 템플릿 엔진에는 대표적으로 퍼그 (Pug), EJS, Handlebars 등이 있다. https://despiteallthat.tistory.com/152 [Png] Pug에 대해 알아보자 오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 ..

Pug를 이용하여 공통된 layout을 만들어보자 shop.html HTML 삽입 미리보기할 수 없는 소스 add-product.html HTML 삽입 미리보기할 수 없는 소스 404.html HTML 삽입 미리보기할 수 없는 소스 위 3개의 html에는 공통된 부분을 main-layout.pug로 변환해 보자 HTML 삽입 미리보기할 수 없는 소스 위와 같이 공통된 부분을 하나의 파일로 저장해두면 다른 png 파일에서 이를 extends 하여 사용할 수 있다. title의 경우 #{pageTitle}과 같이 동적 렌더링을 위해 각각의 js 파일에 랜더링을 위한 pageTitle 키와 값을 설정해줘야 한다. app.js admin.js shop.js block styles 과 block content의 ..

Pug를 이용하여 동적 콘텐츠를 출력해 보자 참고: https://despiteallthat.tistory.com/152 [Node.js] pug에 대해 알아보자 오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 / Pug ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기 despiteallthat.tistory.com shop.png HTML 삽입 미리보기할 수 없는 소스 app.js HTML 삽입 미리보기할 수 없는 소스 admin.js HTML 삽입 미리보기할 수 없는 소스 shop.js HTML 삽입 미리보기할 수 없는 소스 const products = adminData.products; res...

오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. ( 자바스크립트를 사용하면 가능하다.) 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있게 해 준다. 따라서 기존 HTML과 문법이 다른 부분이 있고, 자바스크립트 문법이 들어가기도 한다. ( 놀랍다. ) 템플릿 엔진에는 대표적으로 퍼그 (Pug), EJS, Handlebars 등이 있다. 즉 Pug는, HTML을 Pug 문법으로 작성하여 HTML로 바꿔주는 기능을 한다. [ Pug 설치 & 사용법 ] Pug는 Express의 패키지 view engine이다. $ npm..

외부에서 css를 적용하는, 정적으로 파일 서비스하는 방법에 대해 알아보자 내가 관리하고 있는 node.js 폴더가 이런 구성을 갖고 있다고 해보자. 일반적으로 css를 html 파일에 외부에서 연결시킬 때는 경로를 따라가서 적용시킨다. 하지만 node.js에서 이 방식을 사용하면 다음과 같이 적용이 되지 않는다. 모든 스타일링이 적용이 되지 않는데 개발자 도구에서 볼 수 있듯이 파일 시스템에 엑세스 하지 못해 main.css 파일을 찾지 못한다. 이를 구현하려면 Express.js가 제공하는 기능이 필요하다. 바로, 파일을 정적으로 서비스하는 기능이다. 정적이란 의미는 express.Router이나 다른 미들웨어 소프트에서 처리되지 않고 파일 시스템으로 직접 포워딩된다는 것을 뜻한다. 이를 위해 app..

HTML 페이지 서비스에 대해 알아보자 예를 들어 위와 같은 경로로 파일이 저장되어 있다고 가정해 보자. node.js를 이용해 HTML 페이지를 서비스하기 위해서는 어떻게 해야 할까? admin.js라는 파일에서 add-product.html을 서비스 해보자 res.sendFile을 사용하면 사용자에게 파일을 회신할 수 있다. 우선, join 메서드를 호출하기 위헤 path라는 코어 모듈을 임포트 해준다. const path = require('path'); path의 경우 Node.js가 기본적으로 제공하는 기능이므로 따로 설치할 필요는 없다. join메서드를 호출함으로서 생성한 경로로 파일을 보낼 수 있다. path.join('첫 번째 세그먼트', '두 번째 세그먼트', '세 번째 세그먼트'... ..

페이지 오류가 났을 때를 대비하여 오류 페이지를 추가하는 방법에 대해 알아보자 URL에 정해놓은 문자열이 아닌 무작위 문자열을 입력하면 오류가 발생한다. 일반적으로는 이런 경우 404 error 페이지가 나타나는데 express가 미들웨어를 사용해 요청을 처리하는 방법을 활용하면 해결할 수 있다. HTML 삽입 미리보기할 수 없는 소스 app.use((req, res, next) => { res.status(404).send("Page not found"); }); 다음과 같이 미들웨어 안에 res.status()를 사용하면 해결할 수 있다. status(??)처럼?? 에는 특정 오류코드가 발생했을 때 내가 처리하고 싶은 오류 코드를 넣으면 된다.

Router를 사용해 보자 기존 소스 코드 HTML 삽입 미리보기할 수 없는 소스 위의 소스 코드의 경우 간단하지만 이렇게 모든 코드를 하나의 app.js 파일에 기록하면 파일의 크기가 계속 커지게 된다. 물론 이 정도 규모의 앱에 대해서는 문제가 되지 않는다. 그러나 일반적으로는 라우팅 코드를 여러 파일로 나누는 것이 좋다. 현재 로직을 여러 파일로 내보내서 이 파일로 임포트 해보자. 내보낼 파일을 직접 만들 수도 있지만 Express.js는 라우팅을 다른 파일에 위탁하는 편리한 방법을 제공한다. routes라는 이름의 새로운 폴더를 만들어 보자 ( 다른 이름으로 만들어도 되지만 보통의 관행이라 한다, :) ) admin.js라는 파일과 shop.js라는 라우팅 파일을 생성했다. admin.js 에서는..

[ 애플리케이션 레벨 미들웨어 ] app.use() 및 app.METHOD() 함수(*method: get, post 등등)를 이용해 app 오브젝트의 인스턴스에 바인드 시킨다. 미들웨어를 어플리케이션 영역에서 지정한 path대로 처리 가능하게 하도록 한다. HTML 삽입 미리보기할 수 없는 소스 첫 번째 미들웨어에서 'In the middleware!'를 출력하고 next()를 통해 다음 미들웨어로 넘어간다. 두 번째 미들웨어에서 'In another middleware!'를 출력하고 h1 태그와 그 안에 Hello from Express!를 출력한다. 서버를 생성하기 위해 기존에는 아래와 같이 작성하였다. const http = require('http'); const server = http.cre..

미들웨어 (middleware)에 대해 알아보자 [ 미들웨어 (middleware) ] 미들웨어는 req(요청) 객체, res(응답) 객체, 그리고 애플리케이션 요청-응답 사이클 도중 그다음의 미들웨어 함수에 대한 액세스 권한을 next 인자로 갖는 함수를 말한다. 또한 next 호출을 통해 다음에 있는 미들웨어를 실행하도록 결정할 수도 있다. 즉 미들웨어란 클라이언트에게 요청이 오고, 그 요청을 보내기 위해 응답하려는 중간(미들)에 목적에 맞게 처리하는, 거쳐가는 함수라고 할 수 있다. 다음 미들웨어 함수에 대한 엑세스는 next 함수를 이용해서 다음 미들웨어로 현재 요청을 넘길 수 있다. next라는 말에서 알 수 있듯이 next를 통해 미들웨어는 순차적으로 처리된다. (따라서 작성 순서가 매우 중요..

Express란 무엇인가? [ Express ] Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크이다. Node.js는 표준 웹서버 프레임워크로 불려질 만큼 많은 곳에서 사용하고 있다. Node.js와 Express는 무슨 관계일까? Node.js는 Chrome의 V8엔진을 이용하여 JavaScript로 브라우저가 아니라 서버를 구축하고, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)이다. Express는 이런 Node.js의 원칙과 방법을 이용하여 웹 애플리케이션을 만들기 위한 프레임 워크이다. 간단하게 말하자면, Express란 Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래..