1. 서버란?
서버란 무엇인가? (Serveran?)
전문용어로 정리하면
'클라이언트의 요청을 받으면 서비스, 데이터를 제공하는 컴퓨터 혹은 프로그램'
인간의 용어로 다시 설명하자면
'요청을 받으면 데이터를 보내주는 기계'
비유하자면 서버는 삼겹살집 알바생과 똑같은 역할
음식점에 갔다고 가정해보자.
알바생에게 삼겹살 3인분 주세요라고 요청을 하면, 알바생은 우리에게 삼겹살을 가져다
준다. 바로 서빙을 해주는 그 알바생이 서버라고 할 수 있겠다.
서버에 요청할 수 있는 4가지 방법
-
읽기(GET) 요청 (웹페이지를 읽을 때)
-
쓰기 혹은 생성 (POST) 요청 (글쓸 때, 로그인할 떄)
-
수정 (PUT) 요청 (글이나 댓글 수정)
-
삭제 (DELETE) 요청 (글이나 댓글 삭제)
2. Node.js의 정체
태초에 HTML이라는 언어가 있었다.
그리고 HTML과 함께 사용하던 JavaScript라는 언어가 있었다.
그 당시에는 웹페이지에 움직임을 주기 위해 사용했다.
JavaScript 구동 엔진인 V8의 등장
크롬, 파이어폭스, 익스플로러 이런 브라우저들이 자바스크립트를 읽고 해석하는 역할
자바스크립트를 빠르게 읽고 해석하면 웹사이트 렌더링 성능도 빨라진다.
{ 크롬이 빠른 이유: javascript 해석을 잘해서 (v8 해석 엔진이 좋음) }
'크롬 브라우저 개발자'들이 개발을 성공했는데,
자바스크립트 해석엔진인 V8이라는 프로그램을 만들었는데 성능이 너무나도 뛰어난
나머지 V8을 자랑하려고 이것만 똑 떼어서 살을 붙여 출시
그리고 Node.js라고 이름을 짓는다.
Node.js 를 한줄 요약하자면
자바스크립트를 브라우저 말고도 로컬 PC에서도 실행시켜줄 수 있는 실행창(런타임)
Node.js를 실행하면 그냥 자바스크립트 입력란이 하나가 뿅 뜨고,
거기다가 자바스크립트 입력하면 바로바로 해석해서 실행시켜줌
node.js 환경을 이용하면 서버를 만들기가 엄청 쉽다고 한다.
3. Node.js의 Non-blocking이라는 장점
Node.js를 Non-blocking 이라는 장점 때문에 사용
만약 영화 예매표를 파는 창구가 있다고 가정해보자
- 일반 서버의 경우
사람들이 이렇게 줄지어 표를 산다고 하면
1장을 파는 건 문제가 안되는데, 세 번째 손님이 300장을 산다고 했을 때
일반 서버의 같은 경우는 300장을 다 팔 때까지 네 번째 손님이 기다리고 있어야 한다.
(300장을 처리 할 때까지 서버가 멈춘다는 뜻)
그럼 네 번째 손님은 처리가 끝날 때까지 기다려야 한다는 단점이 있다.
- node.js로 만든 서버의 경우
이렇게 4개의 요청이 차례로 들어왔을 경우
일단 접수부터 다 받고 빨리 완료된 것부터 처리한다.
그러면 네 번째 손님이 기다릴 필요가 없어진다는 뜻
(서버가 멈추지 않는 장점)
Node.js는 그냥 이렇게 완료가 빨리된 것부터 처리할 수 있게 설계된 런타임
Node.js가 강점을 보이는 분야는
바로 SNS, 채팅서비스 웹서버이다.
SNS같은 플랫폼 만들 때 가장 중요한게 '한번에 많은 요청을 감당할 수 있냐' 이다.
일반 서버의 경우 1초에 10만개의 요청이 들어오면.. 바로 처리해주기 위해선
-
똑같은 서버를 몇만대 복사해서 만들어 두거나 (Scaling)
-
CPU 멀티쓰레딩을 이용하거나
-
Node 처럼 Non-blocking 스타일로 코드를 짜거나
위 세 가지가 필요하다.
Node.js 서버의 경우엔 애초에 설계상 한꺼번에 많은 요청을 받아줄 수 있으니
애초에 서버 덩치를 키울 걱정 자체가 적다.
하지만 처리 속도라든지 이건 다른 문제이다.
Node.js자체가 연산속도가 빨라서 유명해진 건 아니다.
단점으로
처리속도가 떨어질 수 있고, 수학연산이나 이미지처리 같은 라이브러리가 부족할 수 있다,
4. Node.js와 Express 웹 프레임워크 설치
-
구글에서 node.js 검색하여 설치
-
VScode로 작업 폴더 오픈
-
터미널 창을 켜서 npm init을 입력
- npm이 뭐냐 : 노드 패키지 매니저라는 건데 라이브러리 설치를 쉽게 도와주는 도구
- npm init은 뭐냐 : package.json 파일을 만들기 위해 사용하는 명령어
- package.json은 뭐냐 : 설치한 라이브러리 목록을 자동으로 기록해주는 파일
- npm install express 입력
- express가 뭐냐 : 서버를 매우 쉽게 짤 수 있게 도와주는 라이브러리의 총 집합?(프레임워크) 덕분에 코드 두줄 쓰면 서버 생성 끝임
5. GET 요청
서버를 띄우기 위해 작성할 기본 템플릿
(server.js 파일)
const express = require('express'); // 아까 설치한 라이브러리를 첨부해주세요
const app = express(); // 첨부한 라이브러리를 이용해 객체를 만들어주세요
// 1.
app.listen(8080, function() { // 원하는 포트에 서버를 오픈하기 위한 문법
console.log('listening on 8080')
})
// 2.
app.listen(8080, () => { // 에로우펑션도 사용 가능
console.log('listening on 8080');
}); -
listen() 함수 안엔 두개의 파라미터가 필요
-
listen(서버를 오픈할 포트번호, function(){서버 오픈시 실행할 코드})
콜백함수란?
함수 안에 함수가 들어가는 것이 콜백함수
ex) 함수(function() { });
GET 요청을 처리하는 기계를 만들어보자
app.get('/pet', (요청, 응답) => {
응답.send('펫용품 쇼핑할 수 있는 페이지입니다.');
});- 터미널에서 ctrl + c 누르고 서버를 끈 다음 node server.js 입력해서
서버를 재시작하셔야한다. - 이런 귀찮은 작업을 안 하기위해 nodemon을 설치하자
6. 서버에서 HTML 파일전송 & Nodemon으로 자동화
껐다 키기 귀찮으니 nodemon 설치를 해보자
- npm install -g nodemon 입력
-
에러가 발생했다.
-
sudo npm install nodemon -g 입력하여 해결
GET 요청시 HTML 파일을 보내주도록 합시다.
app.get('/', (요청, 응답) => {
응답.sendFile(__dirname + '/index.html');
});- / 하나만 있으면 홈페이지
(웹페이지에 첫 접속 상태)
7. POST요청
form 데이터를 서버로 전송해보자 1. form 태그 셋팅
코드 예시
-
폼 전송버튼을 누를 시 /add 라는 경로로 POST 요청
-
form데이터일 경우
서버에서 input을 구분하기 위해 name="이름"을 쓰는 것
form 데이터를 서버로 전송해보자 2. body-parser 설치
const bodyParser= require('body-parser')
app.use(bodyParser.urlencoded({extended: true})) -
js파일 상단에 추가 해주기
(body-parser 라이브러리 사용) -
input에 입력해서 요청해 저장된 정보를 꺼내 보기위한 라이브러리
form 데이터를 서버로 전송해보자 3. POST 요청 처리하는 코드짜기
app.post('/add', (요청, 응답) => {
응답.send('전송완료');
console.log(요청.body.title);
console.log(요청.body.date);
})-
콜백 함수 안에 (요청)에 input 데이터가 저장이 된다.
-
요청.body만 consloe.log하면 JSON형태로 데이터가 출력된다.
