백엔드 기초 1-2 ~ 2-2(method와 Node.js)

1-2 HTTP method

1️⃣ method

• method란? HTTP에 담아보내는 나의 목적

2️⃣ method의 기본

• 생성(=등록): POST
• 조회: GET
• 수정: PUT(덮어쓰기)/PATCH
• 삭제: DELETE
• HEAD, OPTION, CONNECT, TRACE -> 데이터 외 통신에 관한 method

cf. PATCH: 일부 변경, 부분 수정 ex. 마이페이지에서 연락처, 이메일, 주소, 이름 중 부분만 수정

---

2 Node.js 제대로 뜯어보기

2-1 Node.js의 특징

1️⃣ Node.js란?

• 꼭 백엔드에서만 쓰이지는 않음, 프론트엔드 프레임워크(리액트, 뷰,,, 등), 넷플릭스, 링크드인, 페이팔 등의 여러 플랫폼들의 기반이 되기도 함
• Node.js는 기능이 편리하고 프론트엔드와도 호환이 좋은 편이라 세계적으로 사용률이 높음
  
  
• JavaScript(객체지향 언어라서 편함)는 본래 웹 브라우저 밖에서 쓸 수 없었음(코딩도 브라우저에서만 가능했었음), Node.js가 등장하여 JS를 웹 브라우저 밖에서도 사용할 수 있게 됨: 어플리케이션 만들기 등

  Node.js의 등장은 Java Script를 웹 브라우저로부터 독립시켜 서버 구현을 가능케 했습니다. 여기서 런타임이란, 특정 언어가 구동되는 환경을 뜻합니다. 과거 Java Script의 런타임이 웹 브라우저였다면 Node.js로 인해 서버 구현까지 가능한 새로운 런타임이 생기게 된 것입니다.

2️⃣ Node.js 특징

• 요리사에 비유: 라면 1개(물끓는 시간 5분: 요리사는 물 끓는 것만 쳐다봄), 볶음밥(완성하는데 5분)
  • 싱글 스레드: 요리사가 한명, 주문이 계속 밀려들어와도 한명이 어떻게든 쳐내야 함
  • 이벤트 기반: 주문이 들어와야만 일을 함(=주문 없으면 일 안함)
  • 논블로킹 I/O: 한명이 일을 하는데 요리를 순차적으로 하지 않고 비는 시간에 다른 요리를 함(라면 물이 다 끓을 동안 볶음밥을 만듦)

cf. 스프링은?

3️⃣ 논블로킹 실습, setTimeout하면서 모듈 얘기로 넘어감

❯ node -v // 버전확인
v22.4.1
❯ node // node 실행
Welcome to Node.js v22.4.1.
Type ".help" for more information.
> .help
.break    Sometimes you get stuck, this gets you out
.clear    Alias for .break
.editor   Enter editor mode
.exit     Exit the REPL
.help     Print this help message
.load     Load JS from a file into the REPL session
.save     Save all evaluated commands in this REPL session to a file

Press Ctrl+C to abort current expression, Ctrl+D to exit the REPL

> .exit // 나가기

function first (){
  console.log("첫 번째")
}

function second (){
  console.log("두 번째")
}

function third (){
  console.log("세 번째")
}

first();
setTimeout(second, 2000); // second 함수를 2초뒤에 실행
third();

// 논블로킹의 예시: 위와 같은 함수를 실행했을 때 첫번째, 세번째가 먼저 실행되고 2초뒤 두번째가 실행됨

4️⃣ 모듈(라이브러리)이란?

• 내가 만든 것이 아닌 이전에 이미 만들어둔 코드 덩어리
  • 기본 내장 모듈: setTimeout, alert...
  • 외부 모듈은 어떻게 사용하지? npm을 통해 사용

    Node.js의 등장으로 JavaScript가 VSCODE에서 돌아가는 덕분에 모듈을 만들고 사용할 수 있게 됨

5️⃣ 라이브러리 VS 프레임워크

• 도서관: 분류 => 우리는 상세 주제의 한권의 책을 골라냄, 기준: "출판사, 작가, 내용, ..."
  • 장점: 내가 원하는 걸 빌릴 수 있음
  • 단점: 고르기가 힘들고 찾는 시간이 오래걸리고 도서관에더 가야 함

cf. 프레임워크: 내가 원하는 서비스를 구현하는 데 필요한 모든 일을 틀 안에서 하는 것
(프레임워크는 서비스를 완성하는데 필요해 보이는 라이브러리(모듈)를 미리 다 틀 안에 넣어둔 것
react는 프레임워크?

2-2 npm과 figlet, 콜백함수

1️⃣ npm, figlet 사용하기

• npm은 node를 사용하기 위한 패키지 관리자
• npm으로 figlet 설치하기

npm install figlet // figlet(다른 사람이 작성한 코드, 피글렛필체 표현하기) 설치

• figlet 사용해보기

var figlet = require("figlet");

figlet("Oh my god!!", function (err, data){
  if (err) {
    console.log("Somthing went wrong...");
    console.dir(err);
    return;
  }
  console.log(data);
});

• OUTPUT에서 출력하여 사용해보기

[Running] node "/Users/joseph/Documents/webStudy/node-base/figlet-demo"
   ___  _                                         _ _ _ 
  / _ \| |__    _ __ ___  _   _    __ _  ___   __| | | |
 | | | | '_ \  | '_ ` _ \| | | |  / _` |/ _ \ / _` | | |
 | |_| | | | | | | | | | | |_| | | (_| | (_) | (_| |_|_|
  \___/|_| |_| |_| |_| |_|\__, |  \__, |\___/ \__,_(_|_)
                          |___/   |___/                 

[Done] exited with code=0 in 0.955 seconds

2️⃣ 콜백함수 확인하기

• figlet에서 찾을 수 있는 콜백함수

var figlet = require("figlet"); // figlet을 requre(외부 모듈을 호출)

figlet("Oh my god!!", function (err, data){ // figlet의 매개변수에는 아스키코드로 출력할 문자열과 에러표출 함수 
// 함수이름이 없음, 익명의 함수를 쓰는 이유 = 이 함수를 다른 곳에 쓸 일이 없기 때문, figlet 만든 사람이, 매개변수로 함수를 받기로 했기 때문
// 첫번째 매개변수 "Oh my god!!"라는 문자열을 받아서,
// "아스키 아트를 만든 뒤"
// 두번째 매개변수 function 함수를 실행 = 콜백
if (err) {
    console.log("Somthing went wrong...");
    console.dir(err);
    return;
  }
  console.log(data);
});

// 매개변수로 전달할 수 있는 것은 변수, 값, 함수(전달하는 값에 적용하는 경우) 모두 들어갈 수 있음

• second는 콜백함수

function second (){
  console.log("두 번째")
}

setTimeout(second, 2000); // 논블로킹의 예시: 위와 같은 함수를 실행했을 때 첫번째, 세번째가 먼저 실행되고 2초뒤 두번째가 실행됨

// 함수의 매개변수로 변수 또는 값을 전달하는 것이 아니라, 함수를 전달하는 것
// 이를 "이를 콜(부른다) 백(나중에) 함수"라 부름

3️⃣ let, const 값 변경 가능 , 템플릿 문자열

• let과 const는 블록{} 스코프이기 때문에 값이 지정이 안된 상태에서 log를 찍으면 에러가 남

if (true){
  var num1 = 7;
  const num2 = 3; // 블록{} 스코프이기 때문에 'num3 is not defined'에러 발생
  let num3 = 5; // 블록{} 스코프이기 때문에 'num3 is not defined'에러 발생
}

console.log(num1)
console.log(num2)
console.log(num3)

• 블록 스코프는 지역변수라고도 부름, 반대로 중괄호 구분 없이 모든 함수들이 다 쓸 수 있으면 전역변수

• 템플릿 문자열(Template String)을 사용하면 문자 표현이 쉬워짐

if (true){
  var num1 = 7;
  const num2 = 3; // 블록{} 스코프이기 때문에 'num3 is not defined'에러 발생
  let num3 = 5; // 블록{} 스코프이기 때문에 'num3 is not defined'에러 발생

  num2 = 10; // const는 상수이기 때문에 처음 지정한 값에서 바꿀 수 없음, 이대로 실행 시 에러 발생
  num3 = 21; // 초기화 이후 값을 바꿀 수 있음

  console.log(num1 + " X " + num2 + " = " + num3);
  // 2015년 이전 js는 이렇게만 문자열 표현히 가능했음

  console.log(`${num1} X ${num2} = ${num3}`);
  // 지금은 템플릿 문자열 사용

}

console.log(num1)
console.log(num2)
console.log(num3)

• 변수의 규칙
  • let 1a; // 변수명은 숫자로 시작해선 안 됩니다.
  • let my-name; // 하이픈 '-'은 변수명에 올 수 없습니다.
  • apple와 AppLE은 서로 다른 변수입니다.
  • let let = 5; // 예약어인 'let'을 변수명으로 사용할 수 없으므로 에러!
  • let return = 5; // 예약어인 'return'을 변수명으로 사용할 수 없으므로 에러!

4️⃣ http 모듈 뜯어보면서 콜백 함수 다시 확인하기

• http는 콜백함수로 onRequest를 불러와야 서버가 만들어진 후에 response.write를 쓸 수 있음

let http = require('http'); // 매개변수로 http 모듈(내장모듈)을 가져와서 http 변수에 정의함

function onRequest(request, response) {
  response.writeHead(200, {'content-Type' : 'text/html'});
  response.write('Hello node.js');
  response.end();
  }

http.createServer(onRequest).listen(8989);
// http 모듈에 createServer 함수에서 할 일을 다 한 다음에
// onRequest 콜백 함수를 실핼 시켜달라고 매개변수로 던진 것

5️⃣ npm 좀 더 뜯어보기(-g, uninstall, package.json 뜯어보기)
👉 npm은 모듈을 내 프로젝트에 설치할 수 있도록 도와줌, 저장소에 외부모듈 설치를 우리가 원하는 프로젝트에 자동으로 해줌

• uninstall: figlet 삭제하기

npm uninstall figlet

Error: Cannot find module 'figlet'

• package.json은 외부모듈 설치시 해당 모듈의 데이터가 작성되는 곳
• package-lock.json은 npm이 모듈을 가져와서 저장하는 위치 및 코드가 작성됨
  • dependencies: 사용할 모듈이라는 의미

{
  "dependencies": {
    "figlet": "^1.7.0" // figlet의 설치를 확인할 수 있음
  }
}

• -g: 전역에 설치하기, 모든 프로젝트에 모듈 적용하는 것으로 별로 좋은 방법은 아님

npm install figlet -g