- http 서버 만들기 -- > 가장 간단한 서버는기본서버레포에 작성되어 있으니 그거를 바탕으로 서버 만들기
- 각 요청 분기하다
--> 가장 먼저 해야 해야함
- routing이라는 개념이용(클라이언트가 보낸 조건에 따라 알고리즘 만들어서 실행)
- 분기에 따른 API 제공하기
- API 문서 작성하기
-- api를 만들고 문서화 하는거까지가 API작성임
-- API사용법(method,router,path..)
--- 기대되는 return data형식 및 예제
서버는? 무엇인가를 제공하는 주체
http 서버? http protocol을 통해 통신해서 API를 제공하는 주체
CORS
[| MDN | Cross-Origin Resource Sharing (CORS)],
[CORS 쉽게 이해하기],
Cross-Origin Resource Sharing (CORS)은 추가 HTTP 헤더를 사용하여 브라우저가 실행 중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록 하는 메커니즘이다. 다른 출처(도메인, 프로토콜 또는 포트)의 자원 및 리소스를 요청할 때 cross-origin HTTP 요청을 실행한다.
과거에는 보안 상의 이유로, 자바스크립트(XMLHttpRequest, Fetch API)로 다른 웹페이지에 접근 할 때에는 같은 출처(same origin), 즉 같은 프로토콜, 호스트명, 포트일 때에만 페이지 접근이 가능했었다.
그러나 여러 도메인에 걸쳐 구성되는 대규모 웹 프로젝트가 늘어나고, REST API등을 이용한 외부 호출이 많아지는 상황에서 same origin은 대단히 불편한 정책이였다. 따라서 요청을 받은 웹서버가 허용할 경우에는 다른 도메인의 웹 페이지 스크립트에서도 자원을 주고받을 수 있게 해주는 CORS라는 매커니즘이 만들어졌다
fetch API
[A walkthrough with JavaScript’s Fetch API]
[|MDN| fetch API]
ajax를 이용하는 여러가지 기술 중 최신적이고 널리 이용되는 fetch API 가 있다.
GET요청
fetch(url) // 아무것도 요청하지 않으면 'GET'요청
.then(res => {
console.log(res);
// res : Response의 instance로 여러 정보를 담고 있습니다.
// 일단, 우리가 원하는 정보가 바로나오지는 않는 다는 것을 인지할 수 있습니다.
// 따라서, 우리가 원하는 정보로 다음 .then()으로 넘겨줍시다.
return res.json();
// res.json()을 통해 자바스크립트 객체로 만든다.
})
.then(res => {
console.log(res);
// res : 위의 .then()에서 return해준 결과를 뜻합니다.
// 원하는 정보는 객체형태로 얻었습니다. 그 이후 원하는 것을 해보시면 됩니다.
});POST요청
const serverURL = 'http://~~~~~~~'
window.fetch(serverURL, {
method: 'POST',
body: JSON.stringify(message),
headers: {
"Content-Type": "application/json",
}
}).then(response => {
return response.json();
}).then(json => {
console.log(json);
// message sent!
});package.json
Package.json이란 npm이라는 패키지 매니저를 활용하기 위한 정보들이 모여 있는 파일이다. 그 뿐 아니라 project에 전반에 관한 정보도 들어있다.
Package.json은 크게 Project에 관한정보, 설정된 script 코드, 그리고 개발과 관련된 dependency들(어떤라이브러리를 활용하고있는지)로 나눈다
npm을 쓰는 프로젝트로 만들기 위해 npm init을 사용해 package.json을 만들면 Project에 관한정보가 설정된다.
{
"name": "index", //
"version": "1.0.0", // 버전
"description": "npm start test", // npm을 test하는 desciption만듬
"main": "index.js", //
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" // 아직 설정해 주지 x
}script
package.json에 정의된 script는 npm run 명령으로 실행하며, 웹 애플리케이션인 경우 "start"에서는 npm start명령을 통해 서버를 실행, "test"에서는 npm test명령을 통해 테스트를 실행 할 수 있다.
"scripts": {
"start": "node index.js", // npm start를 실행하기 위해 설정
"test": "jest" // npm test 실행하기 위해 설정
}dev-dependency
dev-dependency는 production과 직접적인 상관이 없지만, 컴파일을 하거나 테스트를 하기 위한 용도로 이용하며 production과 관계없는 depencdency를 이용한다.
설치할 때
$ yarn add @babel/core --dev //yarn$ npm install @babel/core --sav-dev // 라이브러리 설치할 때옵션을 줘서 등록한다.
dependencies
dependencies는 production과 직접적으로 상관이 있다. dependencies에서 기록된 라이브러리가 ./node_modules 안에 모두 설치된다.
설치할 때
$ yarn add react // yarn$ npm install --save react // 라이브러리 설치할 때옵션을 줘서 등록한다.
{
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"eslint": "^6.8.0",
"jest": "^24.1.0"
}
}- npm 시 --save를 쓰는 이유?
NPM(Node Package Manager)은 세계에서 가장 큰 오픈소스 라이브러리 생태계 중 하나로써 npm에 있는 모듈들은 노드와 함께 번들링 이 되있는 것이 아니라 npm install을 해야 한다.
우리가 처음 project를 github에서 clone 후 npm install을 하면 package.json에 있는 dependency를 바탕으로 설치를 하게 된다. 실제로 노드모듈들은 깃 상에서 제외되는 것이 일반적이기 때문에 package.json에 있는 dependency를 바탕으로 npm이 다시 설정되는것.
그러나 우리가 설정된 dependency가 등록 되어있지 않다면? 코드에서는 해당 모듈을 쓰고 있지만 npm install로는 설치 되지 않아 해당 코드는 모듈이 없다는 코드를 뜨게 되어 협업할 시 팀 갈등의 주요 원인이 된다.
node.js
node는 자바스크립트를 기계어로 컴파일 해주는 장치인 V8엔진으로 만들어진 프로그래밍 언어가 구동되고 있는 환경(JavaScript runtime)이며 프로그래밍 언어가 구동되고 있는 환경기반 및 논블로킹 I/O모델이다
(블로킹 - 다음 함수의 실행이 현재 함수의 종료 이후에 이루어 지는 것
논블로킹 - 다음 함수의 실행이 현재 함수의 종료를 기다리지 않고 실행되는 것)
(I/O model? Input을 주면 Output을 반환하는 모델(request를 줬을 때 리소스를 반환하는))
- Node가 설치되어 있으면 따로 (install)설치하지 않아도 작동되는 모듈들 (node와 함께 번들링 되어있는 모듈들)
: require("")방식으로 사용 할 수 있음
: fs, http, url, path
const fs = require('fs')
const http = require('http')