데브코스 4주차 정리

API

API( Application Programming Interface)

정의는 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식이다! 

또는 API는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스라고도 말할 수 있다.

API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있다.

 

interface

중간에서 정보를 교환하는 공유 경계를 의미한다. 말 그대로 정보를 교화하기 위한 수단, 방법이다.

즉, 우리가 사용하는 휴대폰의 화면들, 마우스, 터미널등이 인터페이스이다.

gui: graphic user interface : 컴퓨터에게 명령을 내릴 때, 그래픽을 사용해서 명령을 내리는 방식
cli: command line interface: 명령어를 통해 컴퓨터에게 명령을 내리는 것 

 

HTTP를 지키자!

인터넷이라는 연결망 안에서 정보 공유를 하기 위해 만든 공간을 웹이라고 부른다.

그렇기에 인터넷을 돌아다니기 위한 규약을 지켜야한다. 즉, HTTP를 지켜야한다.

이 형식을 지키면 효율이 극대화된다.

 

REST API vs RESTful API

굉장히 잘 지킨 api를 RESTful API라고 한다.

 

REST API 규칙

 

• 소문자 사용
• (_) 언더바가 아닌 (-) 하이픈 사용
• 마지막에 / 포함 X
• 목적(메소드) 포함 X
• 복수형 사용 ex) products
  • 복수형으로 하면 좋은 이유
    • 상품들 중에 id값을 가지는 개별 데이터라는 의미
    • 통일감

•  

Node.js

백엔드에만 사용하는 것이 아닌 리액트, 뷰 등에 많이 사용할 수 있다. 예) 넷플릭스, 에어비앤비, NASA 등

즉, 웹 브라우저 밖에서 javascript가 나올 수 있도록 해준 것이 node.js이다.

 

우리 나라는 정부가 표준으로 spring을 지정했기 때문에 spring의 비중이 높지만 스택오버플로우에서는 웹 프레임워크&테크놀로지 부문에서  node.js는 1위를 차지할 정도로 인기가 많다.

 

 

• Node.js와 리액트(React)가 가장 많이 사용되는 웹 기술로 나타났다. 다시 사용하고 싶은 웹 프레임 워크 및 기술 1위로는 피닉스(Phoenix)가 꼽혔다.
• 가장 연봉이 높은 기술은 지그로 평균 연봉이 10만 3,611달러로 나타났다. ( 약1억3,667만2233원)
• 웹 프레임워크 및 기술, 기타 프레임워크와 라이브러리 카테고리 이외의 도구를 의미하는 '기타 도구' 부문에서 가장 많이 쓰이는 도구는 도커였다. NPM이 2위에 이름을 올렸다.
• 2023년 신설된 부문인 가장 많이 사용되는 AI 개발자 도구 1위는 깃허브 코파일럿이었지만 2위인 탭나인(Tabnine)과의 격차는 크지 않았다. AI 검색 부문에서 가장 많이 쓰인 도구는 챗GPT였고 2위는 빙 AI였다. 전체 응답자의 70%가 올해 개발 프로세스에서 이미 AI 도구를 사용하고 있거나 향후 사용할 것이라고 답했다.
• 개발자가 가장 선호하는 IDE로 마이크로소프트의 비주얼 스튜디오 코드를 선택한 응답자는 74%였고, 2위와 3위에는 비주얼 스튜디오와 젯브레인(JetBrain)의 인텔리J IDEA가 올랐다.
• 개인용으로든 업무용으로든 개발자가 가장 선호하는 운영체제는 윈도우였고, 맥OS와 리눅스 우분투가 뒤를 이었다.
• 비동기식 도구 부문의 1, 2위는 아틀라시안의 지라와 컨플루언스(Confluence)로 나타났다.

특징

• 싱글스레드 - 하나의 스레드
• 이벤트기반 - 이벤트가 발생하지 않으면 일하지 않는다
• 논블로킹 I/O -  대기 시간이 있으면 다른 작업을 한다

논 블로킹 예시

function first() {
  console.log("1");
}
function second() {
  console.log("2");
}
function third() {
  console.log("3");
}

first();
setTimeout(second, 2000);
third();

 

출력

1

3

2

 

모듈

1. 내장모듈 ex- setTimeout()
2. 외부 모듈 - npm으로 찾을 수 있음

라이브러리 =  모듈

- 장점: 원하는 것을 찾고 빌릴 수 있음

- 단점: 방대한 양에 고르기 어려움, 물리적 시간

 

 

프레임워크

틀 안에서 일하는 것을 의미한다! 원하는 서비스를 구현하기 위한 모든 일을 수행하는 틀이다.

프레임워크는 필요해보이는 라이브러리(모듈)을 미리 다 틀에 넣어두었다.

 

node.js는 프레임워크가 아니다!

자바스크립트가 웹 브라우저가 아닌 vscode에서 이용할 수 있도록 하는 플랫폼인 것이다.

exports.route = route 이것이 모듈을 만드는 것이다. 즉, node.js덕분에 자바스크립트를 vscode로 돌릴 수 있게 되어서 모듈을 만들고 사용할 수 있게 된 것이다.

 

npm은 무엇인가?

npm은 외부 모듈을 내 프로젝트에 설치및 삭제 할 수 있도록 도와준다. 

 

외부 모듈 설치 삭제

설치

npm i figlet

• package.json에서 figlet을 확인할 수 있다

• 

• global 설치 가능
•  이번에도 npm i figlet을 하니 package.json이 생기지 않았다. 다음 방법으로 해결할수있다.
  • https://bsu0404.tistory.com/65

 

삭제

npm uninstall figlet

https://www.npmjs.com/

npm | Home

=> 다양한 모듈

콜백함수

함수의 매개변수로 변수 또는 값이 아니라, 함수를 전달하는 것을 의미한다.

 

npm의 figlet모듈을 이용한 예)

//from figlet 공식문서

var figlet = require("figlet");

figlet("hi  suyeon", function (err, data) {
  if (err) {
    console.log("Something went wrong...");
    console.dir(err);
    return;
  }
  console.log(data);
});

=>익명함수 사용

익명의 함수를 이용하는 이유는?

주로 이 함수를 다른데서 쓸 일이 없기 때문이다.

var figlet = require("figlet");

function tmp(err, data) {
  if (err) {
    console.log("Something went wrong...");
    console.dir(err);
    return;
  }
  console.log(data);
}
figlet("hi  sungeun", tmp);

 

 

변수

• const - 블록 {}스코프, 한번 정한 값을 바꿀 수 없음
• let - 블록 {}스코프, 값을 바꿀 수 있다.
• var 

 

 

http vs express

 

http는 웹 서버 역할을 할 수 있게 만든 내장 모듈

express는 안에 http의 기능이 포함되어 있으며, 좀 더 간결하게 작성할 수 있다.

let http = require("http");

function onRequest(request, response) {
  response.writeHead(200, { "Content-Type": "text/html" });
  response.write("hello node.js");
  response.end();
}

http.createServer(onRequest).listen(8888);

 

=>http일 때보다 express가 조금 더 간편하다.

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

 

 

객체, json을 보내는 이유

app.get('/products/1',function(req,res){
  res.send('node.js를 배워보자 (책)');
  res.send(20000);
})

=> 이렇게 보내면 두번째 send는 가지 않기 때문에 객체로 보내야한다.

 

javascript object notation

: 자바스크립트 객체가 어떻게 생겼나 = 어떤 형태인가

 

express에서 url 파라미터 받기

 

/products/:n

 

const express = require("express");
const app = express();

app.listen(3003);

app.get(`/products/1`, function (req, res) {
  res.json({
    num: 1,
  });
});
app.get(`/products/2`, function (req, res) {
  res.json({
    num: 2,
  });
});
app.get(`/products/3`, function (req, res) {
  res.json({
    num: 3,
  });
});

 

=> 줄이기 (url에서 파라미터 받고 사용하기)

const express = require("express");
const app = express();

app.listen(3003);

app.get(`/products/:n`, function (req, res) {
  //products/__빈칸에 오는 값을 n에 담아준다.
  //: => 어? 나한테 url로 매개변수를 전달해줄 것이다.
  //req.params에 모든 것을 담아준다.
  res.json({
    num: req.params.n,
  });
});

문자를 숫자처럼 계산하는 javascript

const express = require("express");
const app = express();

app.listen(3003);

app.get(`/products/:n`, function (req, res) {
  //products/__빈칸에 오는 값을 n에 담아준다.

  res.json({
    num: req.params.n,
  });

  if (req.params.n > 10) {
    console.log("10보다 크다.");
  }
});

결과

왼쪽에서 결과를 보면 문자열로 인식했지만 계산이 된 것을 볼 수 있다.

javascript는 계산할 때, 문자로 된 숫자를 숫자처럼 취급하고 계산한다!

이런 것은 위험할 수도 있으므로 parseInt를 이용해서 숫자로 바꿔주는 것을 추천한다. 

 

app.get(`/products/:n`, function (req, res) {
  let number = parseInt(req.params.n);
  res.json({
    num: number,
  });
});

 

이제는 이렇게 숫자로 보내지는 것을 확인할 수 있다

 

url 이용하기

1. 파라미터를 사용하기

=> http://localhost:3003/sungeun

app.get(`/:nickname`, function (req, res) {
  const param = req.params;
  res.json({
    channel: param.nickname,
  });
});

 

2. 쿼리 사용하기

=> http://localhost:3004/watch?v=Kb2_njd7jJg&t=11630s

app.get(`/watch`, function (req, res) {
  const query = req.query;
  res.json({
    video: query.v,
    timeline: query.t,
  });
});

자바스크립트 객체, 배열 비구조화

비구조화를 통해서 코드의 길이를 대폭 줄이고 가독성을 올릴 수 있다.

 

1. 객체의 비구조화

app.get(`/watch`, function (req, res) {
  // const query = req.query;
  const { v, t } = req.query; //url에서 v,t로 오기 때문에 변수명을 바꿀 수 없다.
  res.json({
    video: v,
    timeline: t,
  });
});

=> http://localhost:3004/watch?v=Kb2_njd7jJg&t=11630s

객체는 변수명을 똑같이 써줘야한다(v,t)  . 이를 객체의 비구조화라고 한다.

 

2. 배열의 비구조화

const array = [1, 2, 3, 4, 5];
const [, num2, num3, , num5] = array;

console.log(num5);

각 순서의 정보를 저장한다.

 

3. 참고

app.get(`/:nickname`, function (req, res) {
  const param = req.params;
  res.json({
    channel: param.nickname,
  });
});

위를 비구조화 한다면 아래와 같다.

app.get(`/:nickname`, function (req, res) {
  const {param} = req.params;
  res.json({
    channel: param,
  });
});

 

네이밍케이스

[kebab-case]

폴더 ex. demo-api

파일 ex. object-api-demo.js

 

[camelCase]

변수명, 함수명 ex. channelTitle, videoNum

 

[PascalCase]

ex. PascalCase

 

[snack_case]

ex. snack_case

 

express에서 map 사용하기

• map 정의하기

let db = new Map();

• map에 데이터 넣기

db.set(1,"book");
db.set(2,"note");
db.set(3,"pen");

 

map에 저장하면 다음과 같은 형태로 저장된다.

map은 key값의 숫자, 문자를 구분하는 것을 알아두자.

• map 사용하기

=> http://localhost:3000/5

위와 같이 파라미터로 5가 들어온 경우 map의 key가 5인 정보를 보내주는 코드이다.

파라미터는 처음에 문자로 인식되기 때문에  id=parseInt(id);를 통해서 숫자로 바꿔준다.

 

Map에 해당 키에 대한 내용이 없는 경우에는 undefined가 나오므로 이를 이용해서 예외처리를 한다.

const express = require('express')
const app = express()

app.get('/:id', function (req, res) {
  let {id} = req.params;
  id=parseInt(id);
  console.log(id);
  if( db.get(id) == undefined){
    res.json({
      data: "no data"
    });
  }
  else{
    res.json({
      id: parseInt(id),
      data: db.get(parseInt(id))
  });
  }
});

app.listen(3000)


let db = new Map();

db.set(1,"book");
db.set(2,"note");
db.set(3,"pen");

console.log(db);

 

 

map (object)

string을 저장하는 것과 다를 것 없이 object를 map에 넣어준다.

 

다음은 map에 object를 저장한 뒤, url로 받은 id를 이용해서 json을 보내주는 코드이다. 

 

받아온 object에 id를 추가하는 코드는 다음과 같다. 

let youtuber = db.get(id);

let product = youtuber;

product.id = id; or  product["id"] = id

 

 

 

express 

 

node.js로 http모듈을 이용하여, 서버를 만들고 route를 하는 등 하나하나 구현한다면 할 일이 많고 사람마다 다 체계가 달라질 수 있다. 이 때 , 웹 프레임워크인 express를 이용하면 편리하다.

 

express-generator

Express 환경을 간단하게 구축해주는 npm이다.

이미 폴더가 만들어져서 그 안에서 설치하는 경우이다.

 

1. 설치

알아서 체계를 만들어주고 필요한 패키지를 설치할 수 있도록 만들어주는 express-generator 

npm install express-generator -g

 

2. 새 프로젝트 생성

express

 

3. npm i

package.json에 있는 필요한 npm 파일을 설치해준다.

npm i

 

에러

https://bsu0404.tistory.com/72

이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\사용자명\AppData\Roaming\npm\expre ss.ps1 파일을

 

express의 구조

간단히 몇가지 파일을 살펴보겠다.

 

bin-> www.js

var app = require('../app');
var debug = require('debug')('express-base:server');
var http = require('http');

//...

var server = http.createServer(app);

//...

위와 같은 부분이 있다. http를 이용하면 직접 서버를 만드는데 express generator를 이용하면 해당 부분에서 서버를 만들어주며, 서버를 실행하는 스크립트이다. 또한, port넘버도 설정한다.

 

routes->index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

 

라우터들을 관리하는, 경로와 관련된 js파일이다. 서버의 로직은 route 폴더 안의 파일에서 작성한다. 단, index.js를 기반으로!

 

app.js

핵심적인 서버의 역할을 하며, 미들웨어를 관리한다.

app.set으로 app을 설정, app.use로 미들웨어를 연결한다.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express(); //express

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev')); //use는 미들웨어(http를 제외한 모듈을 일컫는 말) 연결
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

js함수 4가지 종류

function add1(x,y){
    return x+y;
}

let add2 = function(x,y)
    return x+y;
}

const add3 = (x,y) =>{ //화살표함수(arrow function)
    return x+y;
}

var add4 = (x,y) => x+y;

 

출처: stackoverflow, https://www.itworld.co.kr/t/61023/%EA%B0%9C%EB%B0%9C%EC%9E%90/295045