Node
Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다.
"자바스크립트를 실행시켜주는 도구"
자바스크립트를 독립적으로 실행시켜줌.
서버의 역할도 수행할 수 있는 자바스크립트 런타임이지만 서버는 아님.
노드로 자바스크립트로 작성된 서버를 실행할 수 있음.
- 런타임 : 특정 언어로 만든 프로그램들을 실행할 수 있게 해주는 가상 머신(크롬의 V8엔진 사용)의 상태
- 노드 : 자바스크립트로 만든 프로그램들을 실행할 수 있게 해줌
- 다른 런타임으로는 웹 브라우저(크롬, 엣지, 사파리, 파이어폭스 등)가 있음
- 노드 이전에도 자바스크립트 런타임을 만들기 위한 많은 시도가 있었지만 엔진 속도문제로 실패
자바스크립트는 컴파일러가 아닌 해석기이다.
이벤트 기반
이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식
- 이벤트의 예 : 클릭, 네트워크 요청, 타이머 등
- 이벤트 리스너 : 이벤트를 등록하는 함수
- 콜백 함수 : 이벤트가 발생했을 때 실행될 함수
논 블로킹 I/O
- 논 블로킹 : 오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행되게 하고, 나중에 오래 걸리는 함수를 실행
논 블로킹 방식 하에서 일부 코드는 백그라운드에서 병렬로 실행됨
일부 코드 : I/O 작업(파일 시스템 접근, 네트워크 요청), 압축, 암호화 등
나머지 코드는 블로킹 방식으로 실행됨
I/O 작업이 많을 때 노드 활용성이 극대화
node webserver.js 서버 실행
네트워크 프로그래밍의 이해
http 통신 방식과 소켓 통신 방식의 차이점
- 네트워크를 통해 서버로 데이터를 가져오기 위한 통신 방식 2가지
http 통신
- 클라이언트 요청 시에만 서버가 응답하여 정보를 전송하고 곧바로 연결 종료하는 방식.
- 요청을 보냈을 경우 연결 및 내용을 기다리는 시간이 소요됨.
- 단방향적 통신으로 서버가 클라이언트로 요청을 보낼 수 없음.
- 콘텐츠 위주의 데이터를 사용할 때 이 방식을 사용
- 모바일 앱은 필요한 경우에만 서버로 정보를 요청하므로 http 통신을 주로 사용
소켓 통신
- 서버와 클라이언트가 특정 포트를 통해 연결하여 실시간 양방향 통신을 하는 방식.
- http 통신과 달리 서버가 클라이언트에 요청이 가능하고, 실시간 연결 유지.
- 실시간 스트리밍 서비스, 온라인 게임 또는 채팅과 같이 즉각 정보를 주고 받는 경우 사용.
TCP 기반 서버의 구현
서버에서의 기본적인 함수 호출 순서
클라이언트의 기본적인 함수 호출 순서
서버/클라이언트의 전체적인 흐름
- 서버는 소켓 생성 이후 bind, listen, accept 함수의 연이은 호출을 통해 대기 상태에 들어간다.
- 클라이언트는 소켓 생성 이후 connect 함수 호출을 통해 연결 요청을 하게 된다.
싱글 스레드
-
싱글 스레드라 주어진 일을 하나밖에 처리하지 못함
블로킹이 발생하는 경우 나머지 작업은 모두 대기해야함 ⇒ 비효율 발생 -
주방에 비유 (점원: 스레드, 주문:요청, 서빙:응답)
-
대신 논 블로킹 모델을 채택하여 일부 코드(I/O)를 백그라운드(다른 프로세스)에서 실행 가능
요청을 먼저 받고, 완료될 때 응답함
I/O 관련 코드가 아닌 경우 싱글 스레드, 블로킹 모델과 같아짐
멀티 스레드 모델과의 비교
-
싱글 스레드 모델은 에러를 처리하지 못하는 경우 멈춤
프로그래밍 난이도 쉽고, CPU, 메모리 자원 적게 사용 -
멀티 스레드 모델은 에러 발생 시 새로운 스레드를 생성하여 극복
단, 새로운 스레드 생성이나 놀고 있는 스레드 처리에 비용 발생
프로그래밍 난이도 어려움
스레드 수만큼 자원을 많이 사용함 -
점원: 스레드 , 주문:요청 , 서빙:응답
서버로서의 노드
- 서버: 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터
- 클라이언트: 서버에 요청을 보내는 주체(브라우저, 데스크탑 프로그램, 모바일 앱, 다른 서버에 요청을 보내는 서버)
- 노드 != 서버
But, 노드는 서버를 구성할 수 있게 하는 모듈
노드 서버의 장단점
- CPU 작업을 위해 AWS Lambda나 Google Cloud Functions 같은 별도 서비스 사용
- 페이팔, 넷플릭스, 나사, 월마트, 링크드인, 우버 등에서 메인 또는 서버로 사용
서버 외의 노드
-
자바 스크립트 런타임이기 때문에 용도가 서버에만 한정되지 않음
웹, 모바일, 데스크탑 애플리케이션에도 사용- 웹 프레임워크: Angular, React, Vue, Meteor 등
- 모바일 앱 프레임워크: React Native
- 데스크탑 개발 도구: Electron(Atom, Slack, VSCode, Discord 등 제작)
-
위 프레임워크가 노드 기반으로 동작함
Electron
npm install -g electron
package.json
{
"name" : "hello-world",
"version" : "1.0.0",
"main" : "main.js",
"scripts": {
"start" : "electron ."
}
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<style>
body {
background-image: linear-gradient(45deg, #EAD790 0%, #EF8C53 100%);
text-align: center;
}
button {
background: rgba(0,0,0,0.4);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
border-radius: 8px;
color: white;
padding: 1em 2em;
border: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 20pt;
position: relative;
top: 40%;
cursor: pointer;
outline: none;
}
button:hover {
background: rgba(0,0,0,0.3);
}
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css"/>
</head>
<body>
<script>
function sayHello() {
alert("Hello World");
}
</script>
<button onclick="sayHello()">Say Hello</button>
</body>
</html>main.js
const {app, BrowserWindow} = require('electron');
function createWindow() {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('./index.html');
}
app.on('ready', createWindow);npm start
ReactNative
npm install -g expo-cli
expo 어플 설치 후 npm start 명령 후 qr코드로 확인가능
Express
npm init
npm install express
