본문 바로가기

4. Node.js | React.js

4/19(수) IT K-DT(35일차) / 15.npm~16.http

15. npm

    15-1. npm의 개요

    15-2. npm의 사용 방법

 

16. http

 

예제

 

15. npm

 

15-1. npm의 개요

Node Package Manager의 약자로, Node.js를 위한 패키지 관리자.
Node.js로 작성된 애플리케이션을 쉽게 설치, 관리, 배포할 수 있도록 도와줌.

'node_modules' 디렉토리를 생성하여 프로젝트의 종속성(dependency)을 관리. 
이 디렉토리에는 프로젝트에서 사용하는 패키지의 소스 코드가 저장되며, 

npm을 사용하여 필요한 패키지를 설치하면 이 디렉토리에 자동으로 추가됨. 
이를 통해 프로젝트를 쉽게 관리할 수 있음.

또한, CLI를 제공하여 패키지의 설치, 삭제, 검색, 업데이트, 배포, 공유 등의 작업을 수행할 수 있음.

Node.js에서 npm은 기본적으로 함께 제공되기 때문에, Node.js를 설치하면 npm도 함께 설치됨.

커맨드라인 인터페이스(CLI; Command Line Interface)
프로그램과 상호작용하기 위해 사용되는 텍스트 기반 인터페이스.
사용자가 명령어를 입력하여 프로그램을 제어하는 방식으로 작동.

일반인들에게는 생소한 인터페이스일 수 있음.
주로 프로그래머나 시스템 관리자 등 전문가를 대상으로 하여 GUI(그래픽 사용자 인터페이스)와 달리 그래픽 요소가 없기 때문.

운영 체제, 데이터베이스, 웹 서버 등 많은 유형의 SW에서 사용.
이를 통해 프로그램을 효율적으로 제어하고 자동화할 수 있음.
CLI를 사용하면 키보드로 빠르게 명령을 입력하여 작업을 수행할 수 있음.

 

npm 공식 사이트: https://www.npmjs.com/
node.js의 라이브러리의 검색 및 설명의 확인이 가능

 

npm

Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java

www.npmjs.com

 

15-2. npm의 사용 방법

1. 'package.json' 파일 생성.
'npm init -y'를 명령 프롬프트에 입력하면, 기본 설정의 package.json이 생성.

 

 

2. 'package-lock.json' 파일 생성.
'npm i'를 명령 프롬프트에 입력.
현재 프로젝트에서 사용 중인 각 패키지의 정확한 의존성 버전을 기록하는 파일.


 package.json의 요소
 name: 이름
 description: 설명
 entry point: 가장 먼저 실행되어야 할 파일. 교육 간 사용하게 될 실습용 .js파일을 기재. 여기서는 '1-npm.js'.
 git repository: 패키지 소스 코드가 저장된 Git 저장소의 URL.
 start: 이미 npm에 등록되어있는 keyword
 dependencies: 설치한 패키지의 목록

 author: 지은이.
 license: github에 배포를 할 때, 법적효력의 가이드라인 설정.

 scripts: 명령어를 설정.

 

3. 명령어 설정

'package.json' 파일의 'scripts' 중괄호 안에 아래와 같이 'start': 'node 1-npm'라는 코드를 추가.

 

명령 프롬프트에 'npm start' 라고 입력 시,

실습파일 '1-npm.js'에 입력된 'console.log('npm 배우기');' 라는 코드가 실행되어

아래와 같이 명령 프롬프트에 출력됨.

 


만약, 동일한 내용의 출력을 다른 명령어를 이용해서 하고 싶은 경우,

명령어를 다르게 하여 'scripts' 중괄호 안에 아래와 같이 'start': 'node 1-npm'라는 코드를 동일하게 추가.

(여기서는 'yjcho'라는 다른 명령어를 사용.)

 

 

추가 후, 'npm run yjcho' 라고 run을 중간에 추가해서 입력할 시 동일한 내용이 명령 프롬프트에 출력됨.

 

 


4. npm 라이브러리 설치.


'npm install 패키지명'이나 'npm i 패키지명'을 명령 프롬프트에 입력.

여기서는 'express'라는 패키지를 설치해 볼 예정임.

 


 Express
 Node.js 웹 어플리케이션 프레임워크로,
 Node.js에서 웹 애플리케이션 및 API를 구축하기 위한 기본 구조 및 기능을 제공.
 
 Express는 라우팅, 미들웨어(Middleware), 요청 및 응답 처리, 에러 처리 등을 위한 다양한 기능을 제공.
 이를 통해 개발자는 Node.js를 사용하여 웹 어플리케이션을 빠르고 쉽게 개발할 수 있음.

Express는 다른 Node.js 패키지와 함께 사용될 수 있으며,
데이터베이스 연결, 세션 관리, 사용자 인증 및 보안 기능을 제공하는 미들웨어 패키지들과 함께 사용할 수 있음.

 

 

'npm i express'를 명령 프롬프트에 입력.

 

 

package.json 파일에서 dependencies라는 묶음이 새로 생성되어,

express가 설치되었다는 내용 및 버전을 나타내줌.

 

 

5. package.json을 이동하는 방법.
 용량이 너무 크기 때문에  'node_modules 폴더는 삭제'하여 이동.
 이동 후, npm install 패키지로 재설치.

 

6. nodemon 설치.


 nodemon
 Node.js 애플리케이션을 개발하는 동안 코드 변경 사항을 감지하고, '실시간'으로 서버를 다시 시작해주는 도구(개발툴).

 Node.js 애플리케이션을 개발할 때, 코드를 변경한 후에 매번 서버를 재시작해야 하는 번거로움이 있음.
 nodemon은 이러한 문제를 해결하기 위해 개발. nodemon을 사용하면 코드 변경 시 자동으로 서버를 다시 시작해주기 때문에, 개발자는 코드 변경 사항을 즉시 확인할 수 있음.

 

'npm i nodemon --save-dev'를 명령 프롬프트에 입력하여 설치.

nodemon은 module이 아니라 tool이므로 뒤에 --save-dev라는 문구를 붙여주어야 함.
동작 멈춤: 'Ctrl + C'

 

16. http

 node.js에서 웹 서버를 만들기 위한 기능을 제공하는 내장 모듈.
 웹 서버를 만들고, 클라이언트 요청을 처리하는 기능을 제공.

 http 모듈을 사용하면, Node.js 애플리케이션에서 웹 서버를 구현할 수 있음.

 

http.createServer ( request, response )

HTTP 요청을 처리하고, 응답을 생성하는 HTTP 서버를 생성.

               request: 클라이언트의 요청내용을 확인.

               response: 클라이언트에게 응답을 보냄.

 

(server).listen ( 포트번호 , [메시지] )

해당 포트번호로 HTTP서버를 바인딩하여 시작하고, 클라이언트 요청을 수신할 준비.

http.createServer()가 선행되어야 사용할 수 있음.

 

req .headers ( 요청내용, 본문경로 )

HTTP 요청(request) 객체에서 사용되는 header 정보를 나타내는 객체.

header는 클라이언트에서 서버로 전송되는 메타데이터로, 일반적으로 요청 본문(body)과 함께 전송.

header는 key-value 쌍으로 이루어져 있으며, 이 속성을 통해 HTTP 요청에 대한 정보를 확인할 수 있음.

예) req.headers('content-type': 'application/json')

req. method

HTTP 요청(request) 객체에서 사용되는 메소드(method).

메소드는 HTTP 요청에 대한 액션을 정의.

이 속성을 통해 HTTP 요청의 종류를 확인할 수 있음.

(GET, POST, PUT, DELETE 등이 일반적인 HTTP 메소드)


req. url

HTTP 요청(request) 객체에서 사용되는 URL.

URL은 요청이 전송되는 위치와 해당 요청이 수행되는 리소스를 식별하는 데 사용됨.

이 속성을 통해 클라이언트에서 요청하는 리소스의 경로와 쿼리(query) 문자열 등의 정보를 확인할 수 있음.

 

 

예)  HTTP 서버를 생성하고, 클라이언트의 요청에 대한 응답으로 "Hello, World!"를 보내는 예제.


const http = require('http');

const server = http.createServer((requestresponse) => {
  response.statusCode = 200;
  response.setHeader('Content-Type', 'text/plain');
  response.end('Hello, World!');
});

server .listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});


const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {               // callback함수이다. 
    console.log('서버가 동작합니다.');
    console.log(req.headers);
    console.log(req.method);
    console.log(req.url);

const url = req.url;
    res.setHeader('Content-type', 'text/html');                      // 사용자에게 header정보를 전달.

    if(url === '/'){
        fs.createReadStream('./html/index.html').pipe(res);   // response객체의 사용자(여기서는 localhost:8080)에게로 출력.
    } else if (url === '/mypage'){
        fs.createReadStream('./html/mypage.html').pipe(res); 
    } else {
        fs.createReadStream('./html/notfound.html').pipe(res); 
    }
});

서버가 사용자에 의해 사용될 수 있도록 무한으로 돌면서 대기할 수 있도록 해주어야 함.
// ryuzy.com:80
// localhost:8080

server.listen(8080);

 

예제

아래 링크를 다운로드 받아 압축폴더 내부의 파일 모음을 정리해주는 프로그램 만들기.


https://files.slack.com/files-pri/T026S7PEVA7-F053FBDQ423/download/test_3304cfb8ed.zip?origin_team=T026S7PEVA7 

 

Slack

 

w1625119637-4pe994825.slack.com

 

1. 필요한 모듈 불러오기.


const path = require('path');
const os = require('os');
const fs = require('fs');

 

2. 사용자가 정리하고자 하는 폴더를 선택.


const curdir = process.argv[2];            // 폴더의 이름인 test가 위치한 index번호 2를 받아옴. (process를 진행하는 경로 기준)
                                                                node 2-project test (test폴더에 정리해달라는 코드)
                                                                     0      1           2    로  index번호 지정.

const workingDir = path.join(__dirname, curdir );  // '작업할 경로'를 workingDir로 변수선언.
if(!curdir || !fs.existsSync(workingDir )) {
    console.error('해당 경로 및 폴더가 존재하지 않습니다.');
    return;
}

 

3. 사용자가 원하는 폴더 안에 video, capture, duplicated 폴더를 생성.


const videoDir = path.join(workingDir , 'video');
const capturedDir = path.join(workingDir , 'captured');
const duplicatedDir = path.join(workingDir , 'duplicated');

!fs.existsSync(videoDir ) && fs.mkdirSync(videoDir );
!fs.existsSync(capturedDir ) && fs.mkdirSync(capturedDir );
!fs.existsSync(duplicatedDir ) && fs.mkdirSync(duplicatedDir );



4. 폴더 안에 있는 파일을 조건에 맞게 정리.
     mp4, mov 확장명을 가진 파일: video 폴더로 이동. 
     png, aae 확장명을 가진 파일: captured 폴더로 이동. 
     IMG_로 시작되는 파일: duplicated 폴더로 이동.
     IMG_E로 시작되는 파일은 그대로 둠.


fs.promises
    .readdir(workingDir)
    .then(processFiles)   // 제대로 읽혀졌다면 then
    .catch(console.log);  // 제대로 읽히지 않았다면 catch


function processFiles(files){

    files.forEach((file) => {
        if (isVideoFile(file)) {
            move(file, videoDir );

        } else if (isCapturedFile(file)) {
            move(file, capturedDir );

        } else if (isDuplicatedFile(file)) {
            move(file, duplicatedDir );
        }

    });

}


function isVideoFile(file){                   // g: 글로벌. 전역검색 // m: multi-line: 다중, 여러줄

    const regExp = /(mp4|mov)$/gm;
    const match = file.match(regExp ); // 정규표현식 regExp를 매개변수로 받음.
    return !! match;                              // 해당 const의 변수의 값들이 존재하면 true, 아니면 fasle를 return 

}


function isCapturedFile(file){

    const regExp = /(png|aae)$/gm;
    const match = file.match(regExp ); 
    return !! match ;

}


function isDuplicatedFile(file) {
    if (!file.startsWith('IMG_') || file.startsWith('IMG_E')) {
        return false;
    }
    return true;                                         // if문에 걸리지 않으면 true를 return.
}


function move(file, targetDir) {

    console.info(`move ${file} to ${path.basename(targetDir)}`);
    const oldPath = path.join(workingDir , file);
    const newPath = path.join(targetDir, file);

    fs.promises
        .rename(oldPath, newPath )
        .catch(console.error);
}