[Back-end🦁] #40 Node.js

1. Github

#39 에 amend, stash, cherry-pick, pull request 를 이어서 정리했다.

2. Node.js

1. node??

• JavaScript 런타임 : JavaScript가 동작할 수 있는 환경(실행기)을 말한다. 원래 JavaScript는 브라우저에서만 동작했으니까.
• JavaScript를 브라우저가 아닌 곳에서 돌릴 수 있게 되면서 서버를 만들 수 있게 되었다.

특징

• 이벤트 기반 : 이벤트가 발생했을 때, 미리 지정해둔 작업 수행.
  • 이벤트 루프 : 호출 스택에 할 작업을 쌓아두고, 백그라운드로 실행해야하는 작업은 백그라운드로 보내고, 백그라운드 작업 완료 후 태스크 큐에 쌓아두고 호출 스택의 작업이 모두 끝난 후에 이벤트 루프가 태스크 큐에 있는 작업들을 호출 스택으로 이동하여 진행한다.
• Non-Blocking I/O
  • <-> Blocking I/O에서는 서버가 작업을 하는 동안 클라이언트는 기다려야 한다.
  • 비동기 Input/Output, 캐셔가 다 처리하지 않고 바리스타에게 일단 전달!)
  • 시간이 많이 걸리는 작업은 백그라운드에서 진행. 클라이언트는 작업이 진행되는 동안 서버에 계속 요청을 보낼 수 있다.
• Single Thread (캐셔 1명)
  • 모든 요청을 하나의 스레드가 담당한다.
  • 스레드에 문제가 생기면 전체에 문제가 생긴다.
  • 싱글! 이므로 메모리나 자원을 효율적으로 사용할 수 있다.
  • <-> 멀티 스레드 : 여러개의 스레드가 일을 나눠서 처리하므로 하나의 스레드에 문제가 있어도 대체가 가능하지만, 스레드를 전환할 때 비용이 생기고, 스레드가 놀고 있는 문제가 발생할 수 있다.

장점

• 싱글 스레드, Non-Blocking I/O 로 빠른 속도로 일을 처리 -> 채팅, 스트리밍처럼 I/O 작업이 많은 서버에 사용하기 좋다.
• 컴퓨터 자원 소모가 적고 생산성이 높다.

단점

• 싱글 스레드라 자원을 많이 쓰는 작업을 수행할 때, 부하가 크다.
• 싱글 스레드 == CPU 코어를 하나만 사용한다 -> 게임 같은 CPU 작업이 많은 서버에 사용하기엔 좋지 않다.
• 로직이 복잡할 때, 콜백 지옥에 빠질 수 있다.
• 에러 발생 시, 프로세스 자체가 죽어버린다.

-> 간단한 로직, 빠른 응답시간, 빠른 개발, 비동기 방식 으로 운영되어야하는 서비스에 사용하기 좋다.

-> 설치해서 사용하면 되고, 혹시 설치가 불가능한 환경이면 구름IDE, AWS 등을 사용하면 된다.

2. node 환경에서 실행

node
# node 런타임에서 직접 코드 입력해서 실행 가능
node filename
# js파일을 실행시켜줌. - 어떤 페이지에 갔을 때 어떤 js파일을 실행할지 같은 것을 node로 제어
> console.log('hello world'); # node 의 console 은 global.console.

3. 모듈

모듈을 만들고 그 모듈을 제어하는 js파일을 하나둬서 모듈을 실행하는 구조로 만든다.

// 제어하는 파일.
// 필요한 js 파일을 가져와서 사용.
const 개인프로필 = require('./two');

console.log(개인프로필.이름);
console.log(개인프로필.나이); //100
개인프로필.한살더먹음();
개인프로필.한살더먹음();
console.log(개인프로필.나이); //100 - export 하던 시점의 나이가 찍히는 것.
console.log(개인프로필.값가져오기()); // 102

// 모듈
let 이름 = 'ddosang';
let 나이 = 100;
function 한살더먹음() {
    나이 += 1;
}
function 값가져오기() {
    return 나이;
}

module.exports.이름 = 이름;
module.exports.나이 = 나이;
module.exports.한살더먹음 = 한살더먹음;
module.exports.값가져오기 = 값가져오기;

4. 간단한 서버 만들기!

// 간단한 서버 만들기!
const http = require('http');
const fs = require('fs');

// 실행하면 자동적으로 main, favicon에 대한 request가 2 번 날아감.
const app = http.createServer(function(request, response) {
    let url = request.url;
    console.log(`request : ${request}`);
    console.log(`request : ${request.url}`);
    if (request.url == '/') {
        // 메인페이지 보여주기
        url = '/index.html';
    } else if (request.url == '/blog') {
        // 블로그페이지 보여주기
        url = '/blog.html';
    } else if (request.url == '/favicon.ico') {
        // favicon 을 못찾으면...
        // 근데 해킹을 대비해서 못찾아도 200을 내보내기도 한다.
        return response.writeHead(404);
    } else {
        response.writeHead(404);
        response.end('Not found');
    }
    response.writeHead(200);
    // 응답이 끝날 때 해당 페이지를 열어줌.
    response.end(fs.readFileSync(__dirname + url));

});

// 3000번 포트에서 동작하게 한다.
app.listen(3000); 

5. 최신 문법

npm init --yes 
# package.json 이 생성됨.

보통 모듈은 설치하고 나서 지우고, package.json, app.js만 업로드한다.
npm은 앱스토어 같은 것이라고 보면 된다.

// main
import * as 개인프로필 from './two.js'; // 전체 다 가져올 때.
// import {이름, 나이, 한살더먹음, 값가져오기} from './two.js';

console.log(이름);
console.log(나이); //100
개인프로필.한살더먹음();
개인프로필.한살더먹음();
console.log(나이); //102 - export로 하니까 제대로 출력!!!
console.log(값가져오기()); // 102

// module
export let 이름 = "ddosang";
export let 나이 = 10;
export function 한살더먹음() {
    나이 += 1;
}
export function 값가져오기() {
    return 나이;
}

5. path 모듈

// 공식문서 링크  : https://nodejs.org/dist/latest-v14.x/docs/api/path.html
const path = require('path');

console.log(`구분자 : ${path.sep}`);
console.log(`디렉토리 : ${path.dirname(__filename)}`);
console.log(`파일이름 : ${path.basename(__filename)}`);
console.log(`확장자 : ${path.extname(__filename)}`);

console.log(__filename);
console.log(__dirname);
console.table(path.parse(__filename));
console.log(path.join(__dirname, 'source')); // 경로에 폴더나 파일 추가할때 + 같은거 쓰지 말고 path.join으로 합치자.

6. file system

// 공식문서 링크  : https://nodejs.org/dist/latest-v14.x/docs/api/fs.html
const fs = require('fs');

// rename, readFile, writeFile, appendFile, copyFile, mkdir
// 1. rename
let 변수 = 'ddosang' // 사용자 이름
let 날짜 = new Date()
fs.rename('./test.txt', `./${변수}${날짜.getMilliseconds()}.txt`, (err) => {
    console.log(err); // 사용자가 올린 이미지를 어떤 이름으로 올릴지에 대한 고려는 미리 해야한다.
})

// 2. readFile
fs.readFile('./test.txt', 'utf8', (err, data) => {
    console.log(err);
    console.log(data);
})

// 3. readDirectory
fs.readdir('./', (err, data) => {
    console.log(err);
    console.log(data);
})

// 4. writeFile
fs.writeFile('./test2.txt', 'hello world 2', (err)=>{
    console.log(err)
});

// 5. appendFile
fs.appendFile('./test2.txt', 'hello world 3', (err)=>{
    console.log(err)
});

// 6. copyFile
fs.copyFile('./test2.txt', './test3.txt', (err)=>{
    console.log(err)
});

// 6
fs.mkdir('./yoyo', (err)=>{
    console.log(err)
});

Quiz!!

Username, Identifier, job
booker, 129012, programmer
grey, 072070, coder
johnson, 814081, data scientist
jenkins, 469346, front-end developer
smith, 795079, back-end developer

1. user별 폴더를 생성(username으로 폴더명 생성해주세요.)
2. 각 폴더에 userinfo.txt을 생성한 후 Username, Identifier, job을 아래 양식으로 모두 저장해주세요.

Username : booker
Identifier : 129012
Job : promgrammer

// 내가 짠 코드 - 나는 readFile 안에서 콜백을 써서 그런 문제는 없었지만 readFile은 비동기라서 밖에서 순차적으로 사용하면 파일을 읽지 않았는데 다음것이 실행돼서 오류가 나기도 한다. readFileSync나 Promise를 사용하자.
const fs = require('fs');

fs.readFile('./username.csv', 'utf8', (err, data) => {
    // \n으로 한번 자르고 그걸 ', '로 한번 잘라서 2차원 array로.
    const dataArr = data.split('\n').map(item => item.split(', '));
    // 사람 수 (arr 행)만큼 돌면서
    for(let i = 1; i < dataArr.length; i++){
        // username 으로 폴더 생성.
        fs.mkdir(`./${dataArr[i][0]}`, (err)=>{
            console.log(err)
        });
        
        // 사람 정보 개수(arr 열)만큼 돌면서
        for (let j = 0; j < dataArr[0].length; j++) {
            // file에 정보 넣기!
            fs.appendFile(`./${dataArr[i][0]}/userinfo.txt`, `${dataArr[0][j]} : ${dataArr[i][j]}\n`, (err)=>{
                console.log(err)
            });
            // console.log(`${dataArr[0][j]} : ${dataArr[i][j]}`);
        }
    }
});

// 다른 분 코드를 보고 보완한 코드!!
fs.readFile('./username.csv', 'utf8', (err, data) => {
    const splitedData = data.split('\n').map(info => info.split(', '));
    const columnTitle = splitedData[0];
    splitedData.slice(1)
        .forEach((personData) => {
            username = personData[0];
            fs.mkdir(`./${username}`, (err) => {});
            for (i in personData) {
                console.log(i);
                fs.appendFile(`./${username}/userinfo.txt` ,`${columnTitle[i]} : ${personData[i]}\n`, (err) => {});
            }
        });
});

\n : LineFeed
\r : Carriage Return
리눅스에서는 \r이 안먹혀서 알아서 \n으로 바꾼다.

또 split 쓰면 되는거 정규표현식인가..? 하고 헤맸다.. split!!! split!!!!

7. http

http 모듈을 가지고 와서 GET, POST 방식으로 리퀘스트를 날렸을 때 데이터가 어디 들어갔는지 찍어보는 작업을 했다. 아직 response 처리하는 것은 그냥 뭘 하는거겠다 라는 느낌만 있고 완벽 이해는 안된다..!

// 모듈 포함.
const http = require('http');
const fs = require('fs');
const querystring = require('querystring');


const server = http.createServer(function(req, res){
    console.log('server가 구동중입니다.');
    // get과 post 둘 다 테스트
    if(req.method == 'GET') {
        fs.readFile('./test.html', 'utf8', (err, data) => {
            console.log(err);
            //writeHead대신 setHeader를 사용하여 type을 보낼 수 있음
            res.writeHead(200, {'Content-Type':'text/html'});
            res.write(data);
            res.end();
        }) 
    } else if(req.method =='POST') {
        req.on('data', function(chunk) { 
            console.log(chunk.toString()); 
            let data = querystring.parse(chunk.toString()); 
            console.log(data);
            res.writeHead(200, {'Content-Type':'text/html'});
            res.write(`id : ${data.id_value}, pw : ${data.pw_value}`);
            res.end(); 
        }); 
    }
});

server.listen(8080);

3. 작은 회고

1. github 수업 마무리를 했다.

amend 가 약간 감이 안오는데.. 기껏 커밋해놨더니 오타가 있어서 다시 커밋해야 할 때 쓰면 될 것 같다. 근데 또 다른 사람이랑 공동 작업 중이면 안쓰는게 맞다고 해서 또 음..? 하는 중이다. 혼자 쓸 때 잘 써봐야겠다. pull request 가 뭔지 항상 궁금했었지만 진짜 프로젝트를 하는게 아니라서 일단 미뤘었는데 이걸 배운게 너무 좋다.

2. node.js 수업을 들었다.

어 일단...! 재밌었다! 뭔가 짧은 코드로 실제 서비스처럼 url에 경로 붙으면서 페이지를 넘어갈 수 있는게 신기했다.

프로젝트 할 때 데이터 형식 보러 백엔드 코드 확인하러 잠깐잠깐 들어갔었는데 아무리 생각해도 프론트단보다 코드가 짧아보이는데 팀원들이 항상 오류 때문에 힘들어하고 있어서 어떤 오류가 나는걸까? 라는 생각을 했었는데 이제 이해가 간다!