ddodoi 님의 블로그
3주차-파트05: HTTP method, Node.js, 라이브러리(=모듈)와 프레임워크, npm, let과 const의 차이 본문
3주차-파트05: HTTP method, Node.js, 라이브러리(=모듈)와 프레임워크, npm, let과 const의 차이
ddodoi 2024. 8. 31. 23:10CHAPTER 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
터미널 창에 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}`); //탬플릿 문자열
모두 같은 결과를 낸다.
'웹풀스택 일일정리' 카테고리의 다른 글
4주차-파트 01: js에서의 형변환, 쿼리, 객체와 배열의 비구조화할당, 네이밍케이스, js의 Map구조 (3) | 2024.09.03 |
---|---|
3주차-파트06: EXPRESS, 객체, JSON (0) | 2024.09.01 |
3주차-파트04: API, URL, HTTP (0) | 2024.08.29 |
2주차-파트06: 데이터 베이스 (1) | 2024.08.27 |
2주차-파트04: 쇼핑몰 프로젝트 (0) | 2024.08.27 |