Router, 라우터란? API란? AJAX란? 비동기란? 특징과 장점들

ROUTER, 라우터란?

Routing defines the way in which the client requests are handled by the application endpoints. Implementation of routing in Node. js: There are two ways to implement routing in node. js which are listed below: By Using Framework.J
The express. Router() function is used to create a new router object. This function is used when you want to create a new router object in your program to handle requests.

URI or 경로 및 특정한 http 요청 methods( get, post 등) 인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다.
express를 사용하는 이유도 라우팅을 깔끔하게 만들 수 있기 때문

const express = require('express'); const router = express.Router(); router.get('/', function(req,res,next){ res.render('index', { title:'express' }) }) module.exports = router; 

router.get('/'. middleware1, middleware1, middleware3); 

next() 함수 -> 현재의 라우터에서 다음 라우터로 넘어가고자 할 때 연결된 middlewares 를 건너 뛰고 다음 라우터 처리로 넘어갈 수 있다.

출처 : https://expressjs.com/ko/guide/writing-middleware.html

API란?

라우터를 찾다보니 API 가 나왔다. 뜻을 찾아봐도 이해하기 어려웠는데 아래 블로그에서 쉽게 이해할 수 있었다!
blog.wishket.com/api%EB%9E%80-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85-%EA%B7%B8%EB%A6%B0%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8/

API란? 비개발자가 알기 쉽게 설명해드립니다! - Wishket

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

식당에서의 점원의 역할 / 서로 상호작용하도록 돕는 매개체

손님 -----------------> 점원 ---------------> 요리사

프로그램 ----요청----> API ----요청-----> 응용프로그램
프로그램 ----전달----< API ----전달-----< 응용프로그램

API의 역할

1. API 는 서버와 데이터베이스에 대한 출입구 역할
DB같이 정보가 많은 곳은 허용된 사람들에게만 접근성 부여

2. 애플리게이션과 기기가 원활하게 통신할 수 있도록 함
스마트폰 어플, 프로그램 등과 데이터가 원활히 주고받을 수 있도록

3. API는 모든 접속을 표준화 함
기계, 운영체제 등과 상관없이 누구나 동일한 액세스를 얻을 수 있음. ex) 범용 플러그처럼

API의 유형

1. private API - 내부적으로 사용하는 ex) 회사
2. public API - 공개적인 , 공용의 ex) 누구에게나 공개
3. partner API 공유 허락된 특정인들만 사용 ex) 협업, 비지니스

AJAX란? = 비동기식 자바스크립트와 xml 의 약자

(Asynchronous Javascript And XML) - one of JS libraries

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

-> 전체 페이지를 새로 고치지 않고 페이지의 일부를 위한 데이터만 로드하는 기법 Js를 사용한 비동기 통신, 클라이언트와 서버간에 XML데이터를 주고 받는 기술
쉽게 = JS를 통해 서버에 데이터를 요청하는 것

비동기 방식이란 ?

웹페이지를 reload 하지 않고 데이터를 불러온느 방식, AJAX를 통해 서버에 요청을 한 후 멈춰있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포

장점 : 페이지 reload 시 이미지, 스크립트, 코드 등 모두 재요청 하게 되면 생기는 리소스 낭비를 방지할 수 있음.


AJAX 를 사용 가능하게 만드는 것들
AJAX 기술은 여러가지 기술이 혼합적으로 사용되어 이루어 진다.

ex) HTML, DOM, JAVASCRIPT, XMLHttpRequest, Etc

AJAX 사용 이유

위에 언급한 장점과 관련이 있다.
기본적으로 http protocal 은 client(사용자가 사용하는 (상호작용할 수 있는) 소프트웨어 ex.핸드폰, 웹 브라우저 ) 쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면을 갱신할 시 전체 페이지를 갱신하게 되어 낭비가 심각해진다.

Ajax 는 html 페이지 전체가 아닌 일부만 갱신하게 되어 XMLHttpRequest객체를 통해 서버에 request를 한다. 이 경우 Json or XML형태로 필요한 데이터만 받아 갱신하기 때문에 자원, 시간을 아낄 수 있다.

Ajax의 장점

1. 웹페이지 속도 향상
2. 서버의 처리가 완료될 때까지 기다리지않고 처리 가능
3. 서버에서 data만 전송하면 되므로 코딩의 양이 줄어듬
4. 다양한 UI를 가능하게 해줌

Ajax의 단점

1. 히스토리 관리가 잘 안된다.
2. 페이지 이동없는 통신으로 인한 보안상의 risk
3. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
4. HMLHttpRequest를 통해 통신하는 경우 사용자에게 아무런 진행 정보다 주어지지않음. (요청 처리 완료 전 사용자가 페이지를 떠나거나 오작동할 우려가 발생)
5. Ajax를 쓸 수 없는 브라우저 문제
6. http client의 기능 한정
7. 지원하는 charset 한정
8. script로 작성되므로 디버깅이 쉽지않음
9. 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)




참고 블로그:
velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

AJAX란 무엇인가?

-------------------------------------------------------------------------------------------------------------------------------

MVC 패턴이란? (model–view–controller, MVC)

모델-뷰-컨트롤러

하나의 기능을 쪼개서 만든 것 (객체지향)
-> 사용자 인터페이스로부터 비지니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비지니스 로직을 서로 영향없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다.

Model - 애플리케이션의 DATA(정보)

모델(model)이란 어떠한 동작을 수행하는 코드를 말한다. 표시 형식에 의존하지 않는다. 다시 말해, 사용자에게 어떻게 보일지에 대해 신경쓰지 않아도 된다. 모델은 순수하게 public 함수로만 이루어진다. 몇몇 함수들은 사용자의 질의(query)에 대해 상태 정보를 제공하고 나머지 함수들은 상태를 수정한다.

모델의 상태 변화가 있을 때 controller & view에 이를 통보한다. 이와 같은 통보를 통해 view는 최신 결과를 보여주고 controller는 모델 변화에 따른 적용 가능한 명령을 추가, 제거, 수정할 수 있다. 어떤 mvc 구현에서는 통보 대신 뷰나 컨트롤러가 직접 모델의 상태를 읽어 오기도 한다.

View - UI (User Interface)

MVC에서 모델은 여러 개의 뷰(view)를 가질 수 있다. 뷰는 모델에게 질의를 하여 모델로 부터 값을 가져와 사용자에게 보여준다.
사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 온다.

Controller - Data와 비지니스 로직 사이의 상호 동작을 관리

MVC의 뷰는 여러 개의 컨트롤러(controller)를 가지고 있다. 사용자는 컨트롤러를 사용하여 모델의 상태를 바꾼다. 컨트롤러는 모델의 mutator 함수를 호출하여 상태를 바꾼다. 이때 모델의 상태가 바뀌면 모델은 등록된 뷰에 자신의 상태가 바뀌었다는 것을 알리고 뷰는 거기에 맞게 사용자에게 모델의 상태를 보여 준다.

모델 (애플리케이션 data) 에 명령을 보냄으로써 모델의 상태 변경 (ex. 블로그 편집) , 또 컨트롤러가 관련된 뷰에 명령을 보냄으로써 모델의 표시 방법을 바꿀 수 있다. (문서를 스크롤하는 것)

* UI : UI는 사용자가 제품/서비스를 사용할 때, 마주하게 되는 면. 즉, 사용자가 제품/서비스와 상호작용할 수 있도록 만들어진 매개체인 것 (출처:google)





출처 : 위키디피아