Node.js

NPM

Node Package Manager

노드 플젝을 관리하는 필수 도구

구성 요소

1. 온라인 저장소
   1. 오픈소스 라이브러리와 도구들이 업로드 되는 저장소
   2. 거대한 생태계 보유
2. 커맨드라인 도구
   1. 프로젝트 관리를 위한 다양한 명령어 제공
   2. 라이브러리, 도구 설치
   3. 플젝 설정 관리
   4. 의존성 관리

사용하기

1. npm init

   프로젝트 디렉터리 생성 후 사용하면 package.json 파일 생성하고, Node.js 프로젝트로 만들어준다.

2. npm install

   node_modules 는 용량이 커서 코드 관리나 배포 시에 업로드하지 않는다.

   해당 명령어를 사용하면 package.json 의 dependecies 를 보고 다운 받는다.

   • --production 을 붙이면 devDependencies 를 제외하고 내려받는다.
   • --global 을 붙이면 전역 패키지 디렉터리에 내려받아 전역 패키지로 추가해서 사용 가능 → 명시되지 않는 것. 명시되는 것이 더 좋다.

3. npm remove

   의존성 패키지를 삭제할 수 있다. 정보와 modules에서도 사라진다.

4. 스크립트 실행하기

   간단한 동작을 수행하는 코드로, package.json 의 scipts에 선언된 스크립트를 npm run [script-name] 명령어로 실행할 수 있음

   • 사용 이유 : 의존성 패키지를 바로 사용할 수 있음
   • test, start, stop 도 사용할 수 있는 스크립트. npm이 내부에 코드를 제공하는 것은 아니다.

5. package.json

   key와 value로 이루저여, 프로젝트에 대한 정보가 저장돼있다.

6. package-lock.json

   프로젝트에 의존성을 추가시 해당 파일 생성됨

   자동으로 최신버전을 추가하는데, 의존성 버전이 갑자기 변경되지 않도록 설치된 버전을 고정함

7. 의존성 관리 dependencies

   프로젝트 내 라이브러리를 관리 하는 법. 여기에 의존하기에 의존성이라고 한다.

   • npm install 프로젝트 의존상 관리. 사용법에 따라 여러 용도로 사용할 수 있다. package.json 의 dependencies 안에 추가 되고, node_modules 디렉터리에 저장된다. 개발 의존성을 분리 할 수 있다. 배포 전까지만 사용하는 의존성. devDependencies 에 추가됨
     
   • npm install [pkg-name]@[version]
     • ~1.13.0 : 1.13.x
     • ^1.13.0 : 1.x.x

8. 라이브러리

   특정 기능을 수행하는 코드의 묶음. 다른 사람이 구현한 것을 사용하는 방법

NPX

npm 패키지를 설치하지 않고 사용할 수 있는 도구. 한번씩 사용하고 마는 것에 사용 함

Node.js의 특정 버전을 사용하여 실행할 수 있음. 버전 별 실행환경을 확인시 유용

간단한 코드 조각인 gist를 다운 받지 않고 실행할 수 있다.

모듈?

복잡해질 수록 기능에 맞게 코드를 분리하는 것이 중요하다.

모듈은 코드를 분리하기 위한 방법이다. → 반복되는 코드는 모듈을 분리하기

기본 제공 모듈

1. console

   디버깅 도구, 로그 레벨 표시와 시간 추적 가능

2. process

   현재 실행 프로스세스 관련 기능 제공

   arch, argv, env 등 실행 환경 및 변수, abort, kill, exit 등 프로세스 동작 관련 함수 제공

3. fs

   파일 입출력을 하기 위해 사용.

   readFile, writeFile 함수로 파일 읽기, 쓰기, -Sync 함수 제공 등 동기 동작

   watch로 파일/디렉터리 변경 이벤트 감지 → 콜백을 제공한다.

4. http

   http 서버, 클라이언트를 위해 사용

   createServer → 서버 생성 / Request 함수로 http 요청 생성

이외 다양하게 있다.

작성 방법

1. 기본

   module.exports = {
   	name,
   	age,
   	nationality
   };

   모듈이 load될 때 사용될 값을 module.exports 로 내보낸다.

2. 변수명으로 export

   exports.name = name;
   exports.age = age;

   모듈을 object로 만들고, 각 key-value를 지정하여 내보낸다.

3. 함수를 export

   module.exports = (name,age,nationality) =>{
   	return {
   			name,
   			age,
   			nationality
   	};
   }

   모듈 사용시에 값을 정하여 내보낸다.

사용법

require 함수를 통해 모듈을 로드함

의존성 패키지, 직접 작성한 모듈 모두 사용 가능

⭐️ require 동작의 이해

require시 모듈 코드가 실행된다.

첫 require시 cache되어 이후에 다른 파일에서 require해도 캐시된 걸 이용한다.

모듈 코드를 여러 번 실행하기 위해선 함수 모듈로 작성해야 한다.

1. npm 패키지 → package-name으로 요청하고 node_modules 에 내려받아져 있어야 한다.
2. 직접 작성한 것 → 현재 파일과의 상대 디렉터리로 load 한다.
3. 함수형 모듈 → 모듈이 바로 실행되지 않고, 로드된 함수를 실행하여야 모듈 사용이 가능하다.
4. json 파일 → 파일 명으로 부른다. object로 자동 파싱된다.

웹

인터넷 상에서 동작하는 모든 서비스. 웹브라우저로 접속해서 이용하는 서비스. 웹사이트를 주로 말함

동작 방식

웹 서비스는 HTTP 요청과 응답의 반복으로 이루어진다.

• 요청 : 어떤 데이터가 필요한지 서버에 알림 → 어떤 사용자가 어떤 데이터를 필요로 하는지 담고 있음
• 응답 : 요청에 해당하는 적절한 데이터를 전달함 → 요청한 데이터와, 데이터 정보가 담겨있음

1. 브라우저 - 인터넷 → 서버 : HTTP 요청 전달
2. 서버 - 인터넷 → 브라우저 : HTTP 응답 전송
3. 브라우저 → 사용자 : 받은 응답을 적절한 화면으로 표시

⭐️ 백엔드와 프론트엔드

• 백엔드 : 사용자에게 보이지 않는 데이터 가공 등의 기능을 담당 : 서버
• 프론트엔드 : 사용자가 직접 사용하게 되는 웹페이지를 담당 : 클라이언트

정적 vs 동적 웹

• 정적 웹 단순하게 일방적으로 웹페이지를 보여줌 Web 1.0으로 단방향 통신한다. 사용자와 상호작용하지 않는다. Link만으로 이동만 한다. 변하지 않는 HTML 파일로 제공
  
• 동적 웹 Web 2.0으로 사용자와 상호작용을 하는 양방향 통신을 한다. 사용자가 다양한 기능을 수행할 수 있다. (채팅, 맵 등) 프론트와 백엔드가 유기적으로 통신하며 동작한다. ⚡️ 구현 방법

  1. CSR Client-Side Rendering

     프론트엔드에서 사용자가 보는 동적인 부분을 대부분 처리

     프론트가 대부분의 리소스를 가지고 페이지를 표현하고,

     백엔드는 API 통신으로 데이터만 주고 받는다.

     • 변하는 부분을 프론트에서 처리.
     • 페이지 리소스들이 미리 정의되어있음
     • 빠른 반으으로 내용은 API호출이 완료된 후에 보여진다.
     • 프로젝트가 복잡해지고 사이즈가 커진다.

  2. SSR Server-Side Rendering

     백엔드에서 페이지 대부분의 영역을 처리해 프론트로 전달하는 방식
     
     백엔드가 필요한 데이터가 포함된 페이지를 만들어 응답에 전달한다.
     
     프론트는 응답을 받아 화면에 표시한다.
     
     - 변하는 부분을 백엔드에서 처리
     - 백엔드에서 HTML 파일을 작성하여 프론트엔드로 전달한다
     - 쉬운 구성과 개발 사이즈가 작다
     - 로딩이 완료되면 페이지와 데이터가 한번에 표시되지만, 로딩이 느리다.
     - 페이지 이동마다 다시 로딩하여 페이지가 깜빡 거린다.

     Express.js

     Node.js의 웹 프레임워크

     웹 프레임워크란

     웹 서비스에 필요한 기능을 제공하는 다양한 도구들의 모음

     웹을 만들기 위해 많은 기능이 필요하지만, 많은 부분이 정형화 돼있음

     프레임워크를 이용하면 정형화된 부분을 간단하게 구현할 수 있어, 필요한 부분만 집중하여 개발할 수 있음

  3. HTTP 요청 처리 : 필요로 하는 데이터와 사용자의 정보가 있음

  4. HTTP 응답 처리 : 어떤 형식의 데이터인지와 응답 상태 정보가 있음.

  5. 라우팅 : HTTP 요청을 분기하는 방법 제공, 알맞은 응답의 경로를 미리 설정하여 응답이 적절하게 이루어지도록 함

  6. HTML Templating

     SSR을 구현하기 위한 방법
     
     미리 페이지의 뼈대를 작성할 수 있음

     사용하는 이유

     가장 유명한 웹 프레임워크로 커뮤니티의 도움을 받기 좋다.

     필요에 따라 유연하게 구조 설정이 가능하다. 미들웨어로 필요한 기능을 간단히 추가할 수 있다.

     모든 동작이 명시적으로 구성되어 동작 방식을 이해하기 좋다.

     사용 법

  7. npm init : 처음부터 작성

  8. express-generator 이용 → npx 이용하기
     - 프로젝트 생성기로 기본 구조를 자동으로 생성
     - 빠르게 프로젝트를 시작하기 좋다

     구조

  • app.js : 가장 기본이 되는 파일로, 웹 어플리케이션의 기능을 정의

  • bin/www : 실행을 담당. 포트와 실행 오류 등을 정의

  • package.json : 프로젝트 의존성 및 스크립트 정의

  • public : 코드 없이 직접 제공되는 파일 디렉터리

  • routes : 라우팅 파일 디렉터리

  • views : HTML Template 디렉터리

    동작 방식

  1. app 객체 생성

     var express = require('express')
     var app = express()

     Express.js의 기능을 모두 담은 객체로 모든 동작이 정의돼있다.

     app 객체에서 시작해서 모든 요청을 처리한다.

     app.use()	미들웨어를 사용하기 위한 함수
     app.listen()	http 서버를 생성하는 함수.
     app.locals	app에서 사용할 공통 상수로, global을 선언하지 않고 이 값을 사용할 수 있다.

  2. 라우팅

     1. app 라우팅

        app 객체가 HTTP 메소드를 이용해 라우팅 할 수 있다.

        all 함수를 이용하면 메소드에 상관없이 라우팅이 가능하다. → 어떤 요청이든 처리하는 것

        → 라우팅의 핵심인 그룹화를 지원하지 않음. 그래서 Express.Router을 통해 라우팅을 모듈화할 수 있다.

     2. Express.Router

        const express = require('express')
        const router = express.Router()

        router 객체를 생성하여 http 메서드를 사용한다.

        모듈로 만들어서 사용하게 된다.

        ...
        const userRouter = require('./routes/users')
        app.use('/users',useRouter)

        app.use() 를 이용하여 연결한다. router도 하위 라우터를 설정할 수 있다.

        ⚡️ path parameter을 제공한다.

        주소의 일부를 변수처럼 사용하는 것

        /users/:id 로 url을 이동하면 id에 값이 들어간다.

        ⚡️ Request Handler

        라우팅에 적용되는 함수를 부르는 말

        http method 함수의 가장 마지막 인자로 함수가 전달 된다.

        • Request 객체 HTTP 요청 정보를 가진 객체

          req.params	/path/:id 에서 :id를 req.params.id로 추출 가능하다
          req.queries	/path?page=2에서 page를 req.queries.page로 추출 가능하다
          req.body	post 요청의 요청 데이터를 담고 있다.
          req.get('')	request의 헤더 값을 가져온다. 헤더의 이름을 넣어주면 됨

        • Response 객체 HTTP 응답을 처리하는 객체로, 데이터를 전송하거나 응답 상태 및 헤더를 설정할 수 있다.

          res.send()	text 형식으로 http 응답을 전송함
          res.json()	json 형식으로 http 응답을 전송함
          res.render()	HTML Template을 사용하여 화면 전송
          res.set()	응답의 헤더를 설정
          res.status()	응답의 상태 값을 설정