일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- github
- frontend
- react-router-dom
- git
- webpack
- CSS
- JavaScript
- 프론트엔드
- 변수
- java
- 그럼에도 불구하고
- node
- redux
- TypeScript
- coding
- node.js
- HTML
- react
- max-width
- 자바문제풀이
- 자바
- JS
- 코딩테스트
- 그럼에도불구하고
- @media
- media query
- 코드업
- 반응형 페이지
- cleancode
- Servlet
- Today
- Total
목록Node.js/Node.js basics (17)
그럼에도 불구하고
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..
외부에서 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를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래..
Nodemon을 설치해 보자 [ Nodemon ] Nodemon이란 Node 서버를 이용하면서 코드를 변경하게 될 경우, 변경한 코드를 웹 상에서 확인하려면 서버를 내렸다가 다시 올려야 변화된 것을 확인할 수 있는데, Nodemon은 서버를 내리고 올리지 않아도 소스를 변경할 때 즉시 감지하여 자동으로 서버를 재시작해주는 도구이다. 즉, Nodemon은 자동 재시작 메커니즘을 위해 사용하는 도구이다. 자세한 사항은 아래의 링크에서 확인할 수 있다. https://www.npmjs.com/package/nodemon nodemon Simple monitor script for use during development of a Node.js app.. Latest version: 2.0.20, last pu..
npm script에 대해 알아보자 [ npm script ] NPM은 노드 패키지 매니저를 뜻하며 node.js 내부에 함께 설치되어 있다. NPM을 이용하여 노드 코어 (나의 패키지)에 포함되지 않은 패키지 즉 노드 코어 모듈의 일부가 아닌 패키지를 설치할 수 있다. npn init을 터미널에 입력하고 설치하면 되며 나오는 질문들에 답변을 하면 기본 값이 설정된다. 설정된 기본 값은 package.json에서 확인할 수 있으며 여기서 편집도 가능하다. 기본적으로 JavaScript 객체와 매우 유사해 보이는 특수한 종류의 데이터 형식인 JSON 형식을 사용하며, 이를 기반으로 한다. 위의 사진을 보면 scripts 구획이 있는데 여기에 다른 스크립트들을 추가할 수 있다. 현재는 "start" : "n..
모듈 시스템을 사용하는 법에 대해 알아보자 기존 소스 코드 HTML 삽입 미리보기할 수 없는 소스 저번에 작성한 코드를 보면 하나의 파일만 해도 많은 코드가 존재한다. 보통 이렇게 여러 파일을 작업하게 되는데 url 확인 등의 작업을 하는 라우팅 로직을 포함한 새 파일을 나누어 코드를 분산시킬 수 있다. [ routes.js ] routes.js라는 파일을 만들어 uf문과 기본 응답 코드를 분리해서 넣어주자 HTML 삽입 미리보기할 수 없는 소스 const fs = require('fs');을 먼저 추가해주고 기존 소스파일에서는 지워준다. 기존 소스파일과 routes.js를 연결하기 위해 requestHandler 함수를 생성해 req와 res를 인수로 갖게 만들어주고 아래에 있는 기존 소스파일의 htt..
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 파일을..