5주차부터는 백앤드 파트에 진입했다.
자바스크립트에 대해 완전히 자신이 있는 것도 아닌데 백앤드 파트에 들어가니 걱정되기도 한다.
자바스크립트는 틈날 때 복습하며 기초지식을 탄탄히 해야겠다.
서버란?
"클라이언트의 요청을 받으면 서비스, 데이터를 제공하는 컴퓨터 혹은 프로그램"을 말한다.
요청을 받으면 데이터를 보내주는 기계라 할 수 있다.
서버에 요청할 수 있는 방법
웹서버에 유저가 정식으로 할 수 있는 요청은 4종류가 있다.
1. 읽기(GET) 요청 (웹페이지를 읽을 때)
2. 쓰기, 생성(POST) 요청 (글쓸 때, 로그인 할 때)
3. 수정(PUT) 요청 (글이나 댓글 수정)
4. 삭제(DELETE) 요청 (글이나 댓글 삭제)
쉬운 GET 요청 방법
본인이 원하는 자료를 가지고 있는 서버에 GET(읽기) 요청을 하면 된다.
가장 쉬운 방법은 바로 브라우저 주소창에 URL 입력하는 것이다.
브라우저의 URL 입력란이 GET 요청하는 곳이다.
Node.js란?
JavaScript 구동 엔진 V8의 등장
크롬, 파이어폭스, 익스플로러 같은 브라우저들이 자바스크립트를 읽고 해석하는 역할을 한다.
자바스크립트를 빠르게 읽고 해석하면 웹사이트 렌더링 성능도 빨라지기에 브라우저 개발자들은 자바스크립트 해석 엔진 개발에 힘썼고, 구글 크롬 개발자들이 V8이라는 엔진을 만들어냈다.
v8엔진의 성능이 너무 뛰어났기에 V8엔진만 떼어 살을 붙여 출시하게 된다.
이것이 Node.js
두줄 요약
자바스크립트를 브라우저 외에 로컬 PC에서도 실행시켜줄 수 있는 실행창(런타임)이다.
Node.js를 실행하면 자바스크립트 입력란이 뜨고 자바스크립트를 입력하면 바로 해석해서 실행해준다.
Node.js를 사용하는 이유
Node.js의 Non-blocking이라는 장점 때문
일반 프로그램 언어로 만든 서버는 무조건 요청 순서대로 하나씩 처리한다.
때문에 중간에 무거운 작업이 있으면 그 작업이 완료되기 전까지 뒤에 있는 작업 처리가 불가능하다.
Node.js로 만든 서버의 경우는 빨리 처리가 가능한 순서대로 처리한다.
Node.js로 만들 때 좋은 것들.
Node.js는 SNS, 채팅 서비스에 특화된 언어다.
수학전 연산을 요구하지 않고 대량이지만 간단한 요청이 들어오는 서비스를 만들 때 유용하다.
스타트업, 프로토타입 만들기에도 적합하다.
빠르게 서비스를 만들고 싶을 때 좋은 선택이다. 초보자에게도 쉽고 빠르게 만들 수 있다.
대량의 요청이 들어와도 서버가 죽지 않고 감당 가능하다.
자바스크립트 문법만으로 프론트앤드, 백앤드 전부 가능하다.
단점은 처리속도가 떨어질 수 있다.
수학연산, 이미지처리 같은 라이브러리가 부족할 수 있다.
Node.js가 제공하는 Non-blocking 처리 방식은 다른 언어에서도 비슷하게 구현 가능하다.
Node.js 사용법
1.Node.js 설치하기
2.VS code 설치하기
3.작업 폴더 만들고 에디터로 열기
4.터미널을 켜고 npm init 입력하기
-input이 등장하는데 엔터치다가 entry point:라고 되어 있는 부분에 파일명 입력하고 엔터 치면 된다.
-npm이란: 노드패키지 매니저라는 건데 라이브러리 설치를 쉽게 도와준다. Node 설치하면 함께 설치된다.
-라이브라러란: 코드모음집이다. 레포트 쓸 때 참고하는 참고도서라 생각하면 쉽다.
-npm init이란: package.json 파일을 만들 때 사용하는 명령어다.
-package.json이란: 내가 설치한 라이브러리 목록을 자동으로 기록해주는 파일이다.
5.터미널에 npm install express 입력
-express란: 서버를 쉽게 만들 수 있도록 도와주는 라이브러리다.
서버를 띄우기 위해 작성하는 템플릿.
(server.js 파일)
const express = require('express');
const app = express();
app.listen(8080, function() {
console.log('listening on 8080');
});위 코드처럼 입력시 서버를 띄울 수 있다.
첫 두줄은 express 라이브러리 첨부와 사용
app.listen()은 원하는 포트에 서버를 오픈하는 문법이다.
listen()함수 안에는 두개의 파라미터가 필요하다.
listen(서버를 오픈할 포트번호, function(){서버 오픈시 실행할 코드})
위 코드 작성하고 New Terminal를 눌러 터미널을 켠 뒤 node server.js를 입력하면 서버가 뜬다.
브라우저에서 localhost:8080이라고 접속하면 확인 가능하다.
포트란?
우리의 컴퓨터는 항상 외부 컴퓨터와 통신할 수 있게 설계되어있다.
랜선을 꽂거나 와이파이를 켜면 다른 사람이 우리 컴퓨터로 접속을 요청할 수 있다.
컴퓨터에는 외부와 통신할 수 있는 구멍이 있다. 이걸 포트라고 부른다.
평상시엔 막혀있지만 외부 컴퓨터 접속을 허가하려면 포트를 열어야한다.
옛날에 "세이클럽 채팅을 하려면 제 컴퓨터 아이피 주소를 치고 6900 포트로 들어오세요~"
이런식으로 활용했다.
이와 비슷하게 무작위로 하나 고른 8080번째 포트를 사용해서 서버를 띄운 것이다.
이제 외부 컴퓨터가 내 아이피 주소:8080이라고 입력하면 내 컴퓨터로 들어올 수 있다.
서버를 매번 껐다 키기 귀찮기에 nodemon을 설치해 활용하면 좋다.
터미널에 npm install -g nodemon을 입력하면 된다.
설치 후 서버를 실행할 때 nodemon server.js라고 입력해주면 된다.
파일 저장할 때마다 자동으로 서버를 새로 시작해주지만, 브라우저에서 새로고침은 해야한다.
GET요청시 HTML 파일 보내는법
(server.js랑 같은 폴더에 index.html 생성 후 작성)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h4>Hello World.</h4>
</body>
</html>html 파일을 만들어서 저장후 sever.js로 이동한다.
(server.js)
app.get('/', function(요청, 응답) {
응답.sendFile(__dirname +'/index.html')
});server.js에는 이렇게 작성하면 된다.
누군가 /경로로 접속시(/만 있으면 홈페이지다) sever.js랑 같은 경로에 있는 /index.html이라는 파일을 보내준다.
-sendFile() 함수 사용시 파일을 보낼 수 있다
-__dirname은 현재 파일의 경로를 뜻한다.
form 데이터 서버 전송하는 법
1.form태그 세팅
<form action ="/add" method = "POST">
...
<button>...</button>
</form>폼 전송버튼을 누를 경우 /add라는 경로로 POST 요청을 하는 폼이다.
form 태그의 method 속성은 GET/POST 중 어떤 요청을 할 건지 정해주는 부분,
action은 어떤 경로로 요청할건지 정해주는 부분이다.
2.body-parser 설치
터미널에 npm install body-parser을 해준다.
server.js 상단에 아래 코드를 추가한다.
const bodyParser= require('body-parser')
app.use(bodyParser.urlencoded({extended: true})) 2021년 이후엔 body-parser 라이브러리가 express에 기본 포함되어 있어서 npm설치가 필요없다.
app.use(express.urlencoded({extended: true}))위 코드만 상단에 추가해주면 된다.
3.POST 요청 처리하는 코드작성
app.post('/add',function(요청, 응답){
console.log(요청.body);
응답.send("전송완료");
});누군가 /add 경로로 post 요청시 터미널 콘솔창에 요청.body 출력을 할 수 있다.
요청.body는 우리가 폼에 입력한 제목과 날짜가 들어가 있다.
응답.send()함수로 성공했다는 메세지를 브라우저에 전달할 수 있다.
REST API란
API
Application Programming Interface라는 용어의 약자.
서로 다른 프로그램 간에 소통할 수 있게 도와주는 통신규약을 뜻한다.
웹에서 사용하면 "서버와 고객간의 통신 규약"을 뜻하고 쉽게 설명하자면 "서버에 요청해서 데이터 가져오는 방법"이 API이다.
우리가 지금까지 작성했던 코드가 누군가 /write로 접속 했을 때 write.html을 보내주는 코드였는데 이게 서버의 API이다.
REST API
REST는 Representataional State Transfer이라는 용어의 약자로 API 디자인 방법이다.
웹 API를 짤 때 REST 6개의 원칙이 있다.
1.Uniform Interface
인터페이스는 일관성이 있어야한다.
-하나의 URL로는 하나의 데이터를 가져와야한다.
-간결하고 예측가능하게 짜야한다.
-URL 이름짓기 관습을 잘 따라야한다.
*URL 이름짓기 관습
instagram.com/explore/tags/kpop
instagram.com/explore/tags/food
facebook.com/natgeo/photos
facebook.com/bbc/photos
이 URL은 잘만든 API의 예시이다. 한눈에 잘보이기 때문이다.
-단어들을 동사보단 명사 위주로 구성한다.
-응용해서 다른 정보들을 쉽게 가져올 수 있을정도로 일관성이 있다.
-URL만 봐도 어떤 정보가 들어올지 예측이 가능하다.
-띄어쓰기는 언더바 대신 대시 사용
-파일 확장자 쓰지 않기(.html .js)
-하위 문서들을 뜻할 땐 / 기호 사용
-
Client-Server 역할 구분하기
고객들은 URL 하나로 서버에 있는 자료를 가져다 쓸 수 있다.
고객에게 서버역할을 맡기거나 DB에 있는 자료를 직접 꺼내라고 하는 식으로 코드를 짜면 안된다. -
Stateless
요청들은 각각 독립적으로 처리되어야한다.
요청1이 성공해야 요청2를 보내주는 식으로 요청간의 의존성이 존재하는 코드를 짜면 안된다.
4.Cacheable
요청을 통해 보내는 자료들은 캐싱이 가능해야한다.
그리고 캐싱이 가능하다고 표시하거나 캐싱 기간을 설정해주어야한다.
*캐싱이란
네이버를 방문했을 때 크롬 브라우저는 자동으로 자주 사용하는 이미지파일,CSS 파일 등을 하드에 저장한다. (네이버로고나 아이콘)
하드에 저장해놓고 네이버를 방문할 때 네이버 서버에 네이버 로고를 요청하지 않고 하드에서 불러온다. 이러한 행위가 캐싱이다.
5.Layered System
요청처리 하는 곳, DB에 저장하는 곳 이런 여러가지 단계를 거쳐서 요청을 처리해도 된다.
6.Code on Demand
서버는 고객에게 실제 실행가능한 코드를 전송해줄 수 있다.
