KDT 5th 웹개발자 입문 수업 22일차

API (Application Programming Interface)

서로 다른 두 어플리케이션이 통신을 할수 있도록 해주는 통신 규약

➡️ 프론트엔드/백엔드 사이 통역을 해주는 것

 

통신 규약 ->  http:// 

 

➡️ REST : API (Representational State Transfer API) 라고 통칭

➡️ 그중에서도 JSON (Javascript Object Notation, 객체의 문자열화)을 주로 사용함

 

 

프론트 -> 백엔드 정보를 요청 시

1. 정보를 읽어오려면 async / await + fetch() 사용 - POST/GET

2. 서버에서 페이지 자체를 읽어오려면 ejs 등 사용

 

ejs

ejs 는 Embedded Javascript 의 약자로 자바스크립트가 내장되어 있는 html 파일로

서버에서 보낸 변수를 가져와서 사용할 수 있다.

<% %> 사이에 자바스크립트 내용을 넣으면 되고, 줄바꿈시 새로운 <% %>를 사용해야 한다.

<%= %> / <%- %> 태그 안의 변수값을 코드처럼 옮겨주기 위해 사용

근래는 거의 사용이 안함 ---> pug , nunjuks 등을 더 사용

 

 

---

node.js

spring, servlet에 비해 가볍고 빠름

구글 자바스크립트 엔진 V8으로 빌드된 자바스크립트 런타임이 node.js이다!

 

nvm(node version management)

+ nvm (윈도우) / + n (맥) : node.js 버전관리자

-- node.js를 여러 버전 설치해주고 편하게 관리할 수 있게 해주는 도구

 

맥용 버전관리자, n 다운

https://github.com/tj/n 

GitHub - tj/n: Node version management

1. 콘솔을 열고 node -v 확인

2. n 이 깔려있지 않다면, sudo npm install -g n 으로 모듈을 설치 (sudo는 강제로 명령어를 실행하게 만드는 명령어)

3. n을 원하는 버전으로 업데이트 lts 버전으로 깔려면-> sudo n lts

4. sudo n [version] 으로 원하는 버전을 깔 수 있음

 

--> 자바스크립트를 연산 가능한 컴퓨터가 된 것과 같다.

 

 

 

NPM (Node Package Manager) ?

자바스크립트 프로그래밍 언어를 위한 패키지 관리자

직접 컴퓨터에 설치하여 사용할 수 있는 라이브러리(ex. Swiper)와 유사!

이렇게 설치한 패키지를 관리하는 것이 npm이다.

 

패키지 버전에 따라 충돌이 발생할 수 있기에 이러한 문제를 하나의 JSON으로 관리해준다. --> package.json

 

npm -v : 버전 확인

sudo npm install -g n 으로 재설치 가능

 

*.gitignore 파일에 /node_modules 을 추가해줘야 협업에 문제가 생기지 않는다

(node_modules 폴더는 실제 라이브러리가 설치되는 폴더이다!)

 

작업할 폴더로 이동하고, npm init -y 로 패키지 관리를 시작해줄 수 있다.

init 해주면 node.js 관련 package 의 모든 정보가 package.json가 생기고 들어가게 된다!

해당 json 파일 안의 scripts 안 객체는 npm run [객체명] 으로 실행해줄 수 있다.

변경해준대로 출력됨을 알 수 있다.

 

패키지 설치 하는 방법은 : npm install [패키지명] 으로 가능

설치된 패키지는 package.json 안에 dependencies에 패키지명 : 버전 으로 추가된다.

삭제하는 방법은 : npm uninstall [패키지명] 으로 가능

 

package.json 파일로 협업하기

node 폴더 전체를 보낼 필요 없이 package.json만 공유해주고 받아줄 폴더로 이동 후, npm install 해주면 해당 json 파일을 참조하여 node_modules 폴더를 포함하여 알아서 다운 받아진다.

 

 

node.js 실행하기

터미널에 node [파일명.js] 으로 실행 가능!

 

 

---

프로젝트 formatting 하기 -> prettier, eslint

npm install --save-dev prettier 로 prettier 설치하기

install -> i

--save-dev -> -D

축약 가능!

 

1) --save : 패키지 모듈에 추가한다는 의미

2) --save-dev : 개발할 때에만 사용하겠다는 의미로, 실제 프로젝트를 빌드&배포하면 해당 패키지는 포함X

devDependencies 에 저장됨

.prettierrc 파일을 만들어서 프리티어 세부 설정값을 직접 줄 수 있다

"semi" 는 세미콜론을 끝에 붙여줄건지

"singleQuote" 는 문자열을 표현할 때 홑따옴표를 사용할건지 설정해주는 값

 

위의 설정값을 vscode 상에서 사용하기 위해선,

최상단 위치에서 .vscode 폴더를 만들고 그 안에, settings.json 파일을 만들어서 프리티어를 연결해줘야한다.

{
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

"editor.formatOnSave" 는 저장할 때 실행되게끔 설정

"editor.defaultFormatter" 는 vscode의 기본 포멧프로그램을 prettier로 설정해주는 값이다.

 

 

Linting

formatting에 가깝지만 더 많은 규약과 규율, 로직(문법)까지도 검사해주는 모듈

웹 개발에서는 Airbnb 에서 사용하는 Linting 규율이 유명함

 

ESLint (MicroSoft)

npm i -D eslint (npm install --save-dev eslint)

*package-lock.json 파일은 컴퓨터를 위한 json / package.json은 사람을 위한 json 임

 

최상단 위치에 .eslintrc.js 파일 생성 후, module.exports = { }; 를 추가

그다음, npm i -D eslint-config-airbnb-base eslint-plugin-import 실행하면 가장 유명한 Airbnb의 Linting rule을 가져올 수 있다.

모듈을 설치한 것을 .eslintrc.js 파일 상에 추가하기 위해서

module.exports = {
	extends : ['airbnb-base'],
};

해주면 완료

 

✚ 추가로 윈도우라면 LF, CRLF 문제 해결을 위해 rules의 'linebreak-style' 를 추가해준다

'no-console' 은 off 하면 콘솔상에 보이던 경고, 문제 등이 코드상에 안 보이게 된다(..)

module.exports = {
	extends : ['airbnb-base'],
    rules : {
		'linebreak-style' : 0,
    	'no-console' : 'off',
	},
};

추가로 vscode 확장인 eslint까지 설치하면 됨

 

자바스크립트 상으로 문제가 없지만 ESLint 의 규약에 문제가 생기기에 나타나는 밑줄

코드상에는 문제가 없지만 eslint의 규약에 어긋남

Typescript 모듈 설치

npm i -D typescript

설치하면 자동으로 설정됨. js 파일 위에 // @ts-check 를 추가해주면 이제부터 타입스크립트 모듈을 사용하게 된다.

Type 관련 문제는 타입스크립트가 제어하게 됨

 

 

 

Node.js 에도 다양한 Type이 존재

node.js에서 사용되는 많은 객체들에 대한 Type 정보 체크를 위해 해당 정보를 아는 package를 설치해야 한다

npm i -D @types/node 로 간단히 설치!

 

 

Node.js 서버 만들어보기

const http = require('http'); // node.js 의 모듈을 불러오기 위한 require()함수

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.end('Hello');
});

const PORT = 4000;
server.listen(PORT, () => {
  console.log(`The server is listening at port : ${PORT}`);
});

1. require() 함수 :  node.js에 존재하는 모듈을 불러오기 위한 함수
   1. require('http') 는 http 모듈을 불러오는 것이다. 다만 현재는 오래된 http 대신 express.js를 사용한다.
2. http.createServer() 함수로 서버를 만들어주는데, 인자로 받는 req, res는 요청과 응답에 해당
3. server.listen(포트번호, 콜백함수) 형식으로 포트번호에 맞춰 서버가 listen하는 것임

위 코드를 작성하고 node main.js 로 실행해주면 listen 안의 콜백함수가 터미널에 뜨게 되고,

지정해준 port번호인 4000번에 localhost:포트번호 로 접속하면 res.end() 에 작성한 값이 보이게 된다.(응답)

res.statusCode 는 접속 성공 시 코드 번호(성공적이면 200)임

 

---

express.js

서버를 구동하려면 위의 http 클라이언트나 웹 프레임워크가 필요한데, 이때는 http 보다는 프레임워크가 편하므로 express를 사용

node.js 에서 제일 유명한 백엔드 프레임워크!

npm install express 로 설치

 

CORS(Cross Origin Resource Sharing) 이슈를 피하기 위한 cors모듈 설치

npm install cors 로 설치

CORS(Cross Origin Resource Sharing) ? 교차 출처 자원 공유?
Origin 은 URL 에서 프로토콜, 도메인, 포트 번호를 합친 부분

브라우저에서 다른 출처의 리소스를 공유하는 방법

 

Express 서버 구축

const express = require('express'); // express 모듈 불러오기
const cors = require('cors'); // cors 모듈

const PORT = 4000;
const app = express(); // express 모듈 실행

app.use(cors()); // express에 cors 모듈 실행
app.use('/', (req, res) => {
	const str = '백엔드 영역';
    const json = JSON.stringify(str);
    res.send(json);
});

app.listen(PORT, () => {
	console.log(`현재 서버 포트번호 : ${PORT}`);
});

서버 구축은 node js파일명

서버 구축 확인은 localhost:포트번호 로 접근 가능하다.

 

프론트에서 정보요청하기

백엔드에서 데이터를 보내는 기능을 만들었으므로 프론트에서 백엔드로 요청을 보내려면

가장 기본적으로 자바스크립트 내장 함수인 fetch를 이용하여 통신을 요청한다.

 

<h1>Hello Protocol</h1>
  <button onclick="fetchData()">백엔드 통신 버튼</button>
  <script>
    const headerEl = document.querySelector('h1');

    function fetchData() {
      fetch('http://localhost:4000')
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          headerEl.innerHTML = data;
        })
    }
  </script>

fetch() 함수를 이용하여, 접속할 서버의 url을 입력하고, 그 서버에서 send() 해준 값을 첫번째 then()으로 받아올 수 있음

두번째 then()은 두번째 받아온 res를 처리한 그 결과값을 리턴해준다. (메서드 체이닝) 

 

 

 

JSON 은 JS의 객체처럼 속성과 값을 쌍으로 가지는 객체형 자료형

서버 통신을 위한 개방형 표준 포맷이므로 서로 다른 시스템에도 쉽게 전송이 가능해야하며 데이터를 최대한 압축이 가능해야 함

사람의 눈에는 객체처럼 보이지만 데이터로 전달될 때 하나의 긴 문자열처럼 전달이 되는 것이다.

 

따라서 서버에서 프론트엔드로 데이터를 전송할 때 해당 데이터를 JSON 형태로 변환해서 전달하고

해당 JSON 데이터를 받은 시스템에서는 JSON 데이터를 해당 시스템에 맞는 자료형으로 다시 변경하여 사용해준다.

 

만약, JSOM 형태로 데이터를 변환하지 않고 문자열로 보낸다면 SyntaxError 가 발생한다.

 

 

 

비동기 프로그래밍

node.js는 컴퓨터의 각각의 코어에 다른 일을 시킬 수 있어, 동시에 여러가지 일을 한꺼번에 수행할 수 있다

그래서 node.js는 가볍고 빠른 서버를 구성할 수 있는 것이다.

다만 서버 통신을 할 때, 동기적으로 문제를 해결해야 하는 경우가 있을텐데 (로그인 요청과 로그인 처리는 동기적이어야 함)

node.js는 비동기적인 특성을 가지므로 일부 상황에서 순서를 지정해줄 필요가 있으며 그게 바로 콜백함수의 쓰임새이다.

 

callback 함수는 특정 함수의 작업이 종료되어야만 호출되기 때문에 절차적 프로그래밍이 가능해진다!

 

// 콜백함수를 사용하기 전 (비동기라서 원하지 않은 결과가 출력)
function buySync(item, price, quantity) {
  console.log(`${item}의 가격은 ${price}이고, 수량은 ${quantity}개 입니다.`);
  setTimeout(() => {
    console.log('계산 필요');
    const total = price * quantity;
    return total;
  }, 1000);
}

function pay(total) {
  console.log(`${total}원 지불함.`);
}

const totolMoney = buySync('포켓몬빵', 1000, 5);
pay(totolMoney);
/*
포켓몬빵의 가격은 1000이고, 수량은 5개 입니다.
undefined원 지불함.
계산 필요
*/

// 콜백함수를 사용한다면, (강제적으로 절차적 프로그래밍이 가능하케 함)
function buySync(item, price, quantity, callback) {
  console.log(`${item}의 가격은 ${price}이고, 수량은 ${quantity}개 입니다.`);
  setTimeout(() => {
    console.log('계산 필요');
    const total = price * quantity;
    callback(total);
  }, 1000);
}

function pay(total) {
  console.log(`${total}원 지불함.`);
}

buySync('포켓몬빵', 1000, 5, pay);

/*
포켓몬빵의 가격은 1000이고, 수량은 5개 입니다.
계산 필요
5000원 지불함.
*/