그럼에도 불구하고

외부에서 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('첫 번째 세그먼트', '두 번째 세그먼트', '세 번째 세그먼트'... ..

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

fs.writeFile과 fs.writeFileSync에 대해 알아보자 https://despiteallthat.tistory.com/131 [Node.js] 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석에 대해 알아보자 [ 응답 헤더 ] const http = require('http'); // require 파일을 불러오는 방법 const server = http.createServer((req,res) => { res.setHeader('Content-Ty despiteallthat.tistory.com // 요청 본문 분석 // http 모듈 사용 const http = require('http'); // require 파일을..

Node Life Cycle & Event Loop에 대해 알아보자 ※ node app.js 실행 node app.js를 파일을 실행하면 스크립트가 시작되어 Node.js가 파일 전체를 살펴보고 코드를 분석한 후 변수와 함수를 등록한다. => 전체 코드를 읽고 실행 ※ 계속 작동하는 이벤트 리스너 전체 코드를 읽고 실행하는데 목적을 달성해도 프로그램을 끄지 않는다. 이는 Node.js에서 중요한 개념인 이벤트 루프 때문이다. Node.js가 관리하는 이벤트 루프는 작업이 남아 있는 한 계속해서 작동하는 루프 프로세스로, 이벤트 리스너가 있는 한 계속 작동한다. 등록 후 제거하지 않았던 이벤트 리스너로 createServer가 만든 요청 리스너가 있다. createServer에 계속되는 이벤트 리스너라는 ..

Node.js에서 코드를 실행하는 방법에는 크게 2가지가 있다. [ REPL ] Read : Read User Input Eval : Evaluate User Input Print: Print Output (Result) Loop: Wait for new Input 터미널에 node를 입력 시 REPL에 진입할 수 있다. 이는 파일 시스템 패키지에서 한 줄씩 임포트가 가능하지만, 저장은 불가능하다. 즉, 일부 기능을 실행할 때 간단하게 사용할 수 있다. 터미널에 node라고 입력하고 내가 확인하고 싶은 간단한 내용을 타이핑하면 된다. ( Node.js 가 깔려있어야 함 ) [ 파일 실행 ( Execute Files) ] js 파일을 만들어서 그 안에 소스 코드를 입력하고 터미널에서 실행시키는 방법이다. ..

Node.js란 무엇인가? Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다. 간단하게 말하면, Node.js의 사용 목적은 사용자에게 데이터를 회신하는 코드를 서버에 작성해서 클라이언트가 사용하게 하는 것을 말한다. ※ Node.js의 역할 Node.js로 서버 사이드 코드를 작성하고 서버에서 실행하게 한다. 브라우저를 사용하..

Sass에 대해 알아보자 [ Sass ] Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만, 프로젝트 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance CSS와 비교하여 Sass는 아래와 ..