8/6 - API와 Node.js

API - application programming interface

• 응용 프로그램들간의 매개체와 기능 제어 즉, 인터페이스다.

• 웹에 있어서는 그 응용 프로그램들이 클라이언트와 데이터베이스 사이다

• API 이외 인터페이스는 HUI, GUI, WUI

• HUI는 하드웨어 즉 키보드, 마우스 등..., GUI는 우리가 화면에 보여지는 폴더모양, 마우스포인터 등...,

• WUI는 웹 유저 인터페이스로서 유저와 웹브라우저간의 소통으로서 배너라던가 아이콘, 검색버튼등...

Node.js

• 비동기 이벤트 기반 크롬 브라우저의 v8 자바스크립트 엔진을 탑재한 서버사이드 오픈소스 런타인 환경이다.

• 웹개발에 있어서 클라이언트, 즉, 브라우저에서 돌아갈수 있는 것은 html,css, 자바스크립트뿐

• 거기에서 자바스크립트를 브라우저 만이 아닌 백엔드 환경에서 관리할 수 있게끔 한것이 node.js

• 또한 자바스크립트로 백엔드 환경을 관리하고 서버를 구축하기에, 자바스크립트 기반인 프론트엔드와 기술 스택 통합 가능

• 네트워크 서버 구축에 특화되어 있다. MSA 구조에 특화

• Apache(네트워크 서버 구축 서비스)에서는 만개 이상의 트래픽을 처리할 수 없지만 node는 그 이상 다 핸들링 가능

 

 

V8 javascript engine

구글에서 브라우저에서 자바스크립트가 동작하도록 만든 것

 

MSA - MicroServicesArchitecture

웹사이트에서의 다양한 기능들을 세분화해서 서버를 여러개 띄우는 것

 

NPM

node package manager에 줄임말로, 일종의 오픈소스 라이브러리다. 우리가 흔히하는 여러 내장함수들을 개발자들이 만들고 npm이 올려서 우리가 그 함수를 사용할수 있게되는것이다.

 

repl 명령어

node - 노드를 실행하여 바로 그 다음부터 자바스크립트 문법을 쓰고 실행이 가능

.exit - 노드를 종료

node js 파일명 - 현재 디렉토리에서 해당 js 파일 실행

 

npm명령어

npm install 모듈명 - 해당 모듈 설치, 예로 fetch는 npm install --save node-fetch@2

npm uninstall 모듈명 - 해당 모듈 삭제

npm uninstall --save 모듈명 - 해당 모듈 삭제하고 package.json에 반영

• pacakage.json은 spring에서 환경변수 설정해줬듯이 해당 프로젝트의 npm 모듈들을 관리,즉 프로젝트마다 모듈이 따로 설치되는것
• commonjs기반의 모듈과 es6기반의 모듈은 서로 공존하기 힘들다.따로 타입 설정안해주면 기본 타입은 es6기반이다. 별도 commonjs로 바꿀려면 type: commonjs로 해줘야한다.

• httpie 모듈은 프로젝트가 아닌 시스템 자체에 설치http -v GetorPost방식 실행할 네트워크

Node에 http모듈로 서버 생성 - express(x)

//노드에 http 패키지를 받아온다. - require는 import랑 동일 
//import를 사용해도 require로 변형되서 실행됨 
const http = require("http"); 
const { sendPosts } = require("./sendPosts");  

//서버 만들기 
//req, res는 함수로서 request와 response, 요청과 응답 
const server = http.createServer((req, res) => {  

    //request에서 url과 method 정보 가져옴	
    const { url, method } = req;  

    //헤더 타입 설정 	res.setHeader("Content-Type", "application/json");  

    //end 안에 값이 실제로 클라이언트가 받는 응답 	
    if (url === "/") return res.end(JSON.stringify({ message: "/ endpoint" })); 	
    if (url === "/signup" && method === "POST") return res.end(JSON.stringify({ message: "회원가입 완료!" })); 	
    if (url === "/login" && method === "POST") return res.end(JSON.stringify({ message: "로그인 완료!" })); 	
    if (url === "/products" && method === "GET") return sendPosts(res);  //만든서버 호출 - 매개변수는 포트 번호와 실행할 함수 총 두개 	

    res.end(JSON.stringify({ message: "this response answers to every request" })); });  

server.listen(8000, () => { 	
	console.log("server is running on PORT 8000"); 
}); //ctrl + c하면 서버 꺼짐

express.js

• 노드 백엔드 프레임워크

• express없이 노드만으로 서버를 만들려면 순수 자바스크립트로 노드에 패키지만을 이용해서 직접 구현해야한다.

• npm install express --save

• 위에 express없이 만든 서버를 express로 만들었을때 아래와 같이

Node에 http모듈로 서버 생성 - express(o)

const http = require("http"); 
const express = require("express"); 
// 다른 js파일을 불러올때 활용, 즉 자바로 치면 클래스를 상속받는 개념 
const { sendPosts } = require("./sendPosts");  

const app = express();  
app.get("/", (req, res) => { 	
	res.json({ message: "/ endpoint" }); 
});  

app.post("/signup", handleSignUp); 
app.post("/login", handleLogin); 
app.get("/products", sendPosts);  

const server = http.createServer(app);  

server.listen(8000, () => { 	
	console.log("server is running on PORT 8000"); 
});  
function handleSignUp(req, res) { 	
	res.json({ message: "회원가입 완료!" }); 
}  
function handleLogin(req, res) { 	
	res.json({ message: "로그인 완료!" }); 
} 

// express객체 변수 생성 - get,post를 지정할때 바로 변수명이 붙임 - stringify과정이 필요없이 바로 핸들링됨 - 그리고 마지막에 express 객체 변수로 서버를 만듬

 

kill terminal 이후 new terminal로 첫 경로를 해당 프로젝트로 지정할 수 있다.

 

노드의 프론트엔드 프레임워크는 react, 백엔드 프레임워크는 express - 정확히는 react는 노드 기반이라기보다는 노드가 가지고 있는 npm을 활용하는 프레임워크다.