3주차-파트05: HTTP method, Node.js, 라이브러리(=모듈)와 프레임워크, npm, let과 const의 차이

CHAPTER 1. HTTP method

저번 시간에 HTTP에는 HEAD와 BODY가 있으며 BODY에 담기는 데이터 중 "데이터를 달라는 요청 + 목적"이 있다는 것을 알아보았다. 이번에는 이 목적에 쓰이는 용어들을 알아보자. HTTP는 규약이므로 목적에 따른 정해둔 용어가 있다. 외울 필요는 없지만 사용할 때 적절한 method를 찾아 사용하자.

 

 

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

• 생성(=등록): POST
• 조회: GET
• 수정: PUT(덮어쓰기) / PATCH(일부변경, 부분수정)
• 삭제 : DELETE
• HEAD, OPTIONS, CONNECT, TRACE

cf. PATCH: 일부 변경, 부분수정 

ex) 마이페이지: 연락처, 이메일, 집주소, 이름 => 부분 수정

 

 

 

 

 

CHAPTER 2. Node.js

Node.js는 자바스크릴트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼(운동장)이다. 자바스크립트는 본래 웹 브라우저 안에서만 쓸 수 있었다. 이러한 자바스크립트를 웹 브라우저 밖에서 쓸 수 있게 하여 코딩 할 수 있게 한 것이 Node.js이다. 우리는 Node.js를 이용하여 자바스크립트로 백엔드 뿐만 아니라 프론트엔드(Node.js 기반: 리액트, 뷰)까지 구현할 수 있다. 

Node.js로 작성한 사이트: 넷플릭스, 에어비앤비, 링크드인, 우버, NASA

 

 

✔️Node.js의 특징

• 싱글 스레드주방에 요리사가 한명이다 => 주문이 계속 밀려들어와도 한명이 모두 처리
• 이벤트 기반주문이 들어와야만 일을 한다 (=주문이 없으면 일을 하지 않는다)
• 논블로킹 I/O한명이 일을 하는데 요리를 순차적으로 X, 중간중간 비는 시간에 다른 요리를 한다.ex) 라면 물 끓여놓고 => 물 끓는 동안 볶음밥 요리 => 라면요리

 

 

vscode에서 node.js를 이용하여 논블로킹 I/O를 시험해보자. extentions의 code runner를 추가로 설치해줬다.

 

여기서 setTimeout함수 안의 매개변수로 쓰이는 함수 second는 "콜백 함수"라고 한다.

 

 

 

 

✔️콜백 함수

함수의 매개변수로 변수 또는 값을 전달하는 것이 아니라, 함수를 전달하는 것

 

 

 

 

 

결과창. "첫 번째", "세 번째" 출력후 2초뒤에 "두 번째"가 출력되었다.

 

 

 

 

CHAPTER 3. 모듈이란?

✅모듈(="라이브러리")

내가 만든게 아니라, 선배 개발자들이 미리 만들어둔 코드 덩어리

 

그럼 선배들이 만들어둔 모듈을 가져다 쓰고 싶으면...

     1. 내장 모듈 사용

          ex)

             setTimeout() 

             console.log

             -> 기본적으로 제공하고 있는 모듈 =내장 모듈 or 표준 모듈

 

     2. 외부 모듈 사용 ->  npm사용

 

 

"Node.js 덕분에 자바스크립트를 모듈로 만들수 있게 되었고, 사용할 수도 있게 되었다!"

자바스크립트로 모듈을 만드는 법

 

 

 

 

 

⭐라이브러리 vs 프레임워크⭐

✔️라이브러리(=모듈)

    도서관 : 분류 => 상세 주제의 한권의 책을 골라낸다. 기준: 출판사, 작가, 내용....

    -장점: 내가 원하는 걸 빌릴 수 있고

    -단점: 고르기가 힘들 수도... 찾는 시간이 오래 걸리고, 도서관 가는 시간....

 

✔️프레임워크

    내가 만들고 싶은 서비스를 구현하는 데 필요한 모든 일을 틀 안해서 하는 것

    (프레임 워크는, 필요해보이는 라이브러리(모듈)를 미리 다 틀 안에 넣어뒀다.)

 

cf. node.js는 프레임워크가 아니다.

 

 

 

CHAPTER 4. NPM, figlet 사용

✅NPM

외부 모듈을 내 프로젝트에 설치할 수 있게 해준다. npm이 저장소에 "외부 모듈" 설치를 우리가 원하는 프로젝트에 자동으로 해준다.

= "프로그램"설치 파일 다운로드 받아서 더블 클릭

=  npm install 모듈

 

(cf. npm은 빠르고 간편하게 삭제도 가능 = npm uninstall 모듈)

 

npm i 모듈명 -g:  내 컴퓨터에 있는 모든 프로젝트에 해당 모듈을 설치하는 것 // 추천 x

 

 

 

 

다음 사이트에서 글자를 아스키코드로 바꿔주는 figlet모듈을 가져와 사용해보자.

https://www.npmjs.com/package/figlet

figlet

 

 

 

터미널 창에 npm install figlet으로 설치해준다. 

 

 

만약 로컬 컴퓨터에 있는 모든 프로젝트에 figlet모듈을 설치하고 싶다면 다음 명령어를 터미널에 입력하자. -g의 g는 globlal의 약자이다.

npm install -g figlet-cli

 

 

 

package.json 파일 안의 모습. 외부 모듈을 가져와 무언가 적힌다.

dependencies->내가 사용할 것(모듈)

 

※ json이란?

자바스크립트 객체가 생긴 모양

key- value모양으로 형태가 작성되는 객체

" " : {} 형태

 

 

 

이후 새 파일을 만들어 다음 예시 코드를 실행시켜보자.

var figlet = require("figlet");    //모듈 호출

figlet("Hello World!!", function (err, data) {
    //익명의 함수를 쓰는 이유 = 이 함수를 쓸 일이 다른 데는 없어서..
    //figlet 만든 사람이, 매개변수로 함수를 받기로 했기 때문

    //첫번째 매개변수 "Songa"라는 문자열을 받아서,
    //"아스키 아트를 만든 다음에"
    //두번째 매개변수 function 함수를 실행 = 콜 백
    
  if (err) {
    console.log("Something went wrong...");
    console.dir(err);
    return;
  }
  console.log(data);
});

 

 

예시 코드르 돌린 모습.

 

 

이번에는 가져온 npm모듈을 삭제해보자.

npm uninstall figlet

 

 

package.json 파일 안의 모습

 

 

 

코드를 실행시키면 삭제된것을 확인 할 수 있다.

 

 

 

 

 

 

 

 

※ 자바스크립트에서 함수 괄호 쓸 때, 안 쓸 때

헷갈려서 지피티한테 물어보았다.

 

 

 

 

 

CHAPTER 5. let const의 차이, 템플릿 문자열

 

✔️let

블록 { } 스코프(지역 변수의 개념), 초기화 이후 값을 바꿀 수 있다.

 

✔️const

블록 { } 스코프(지역 변수의 개념), 초기화 이후 값을 못 바꾼다.

 

 

 

 

✔️<템플릿 문자열>

내장된 표현식을 허용하는 문자열 리터럴로 따옴표 대신 ``(백틱) 문자로 문자열을 감싸서 만드는데 ${} 안에 표현식을 넣어 사용한다. 

var num1 = 7;
const num2 = 3;
let num3 = 21;


console.log(num1 + " X " + num2 + " = " + num3 );

console.log(`${num1} X ${num2} = ${num3}`);   //탬플릿 문자열

 

 

 

모두 같은 결과를 낸다.