javascript_Web Architecture

장봄·2020년 7월 1일
JavaScript
0

code-states_IM_4주차

목록 보기
2/3
post-thumbnail

1. Browser

브라우저는 췝페이지, 이미지, 비디오 및 기타파일을 포함하여 World Wide Web에서 컨텐츠를 찾고 검색하고 표시하는데 사용되는 소프트웨어 응용 프로그램이다. 예로는 크롬, 사파리, 익스플로어, 오페라, 파이어폭스 등이 있다. 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원은 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 웹 사이트는 쿠키라는 파일에 사용자 정보를 저장한다.

브라우저의 기본 구조

1) UI(사용자 인터페이스) : 사용자가 브라우저와 상호작용하는 공간이다. 유저와 의사소통이 가능한 매개체이다.

2) 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진간 브릿지 역할을 한다.

3) 렌터링 엔진 : 요청 된 웹페이지를 브라우저 화면에 렌더링한다.

  • Internet Explorer : Trident
  • Firefox 및 기타 Mozilla 브라우저 : Gecko
  • Chrome & Opera 15 이상 : Blink
  • Chrome (iPhone) 및 Safari : Webkit

4) 네트워킹 : HTTP 또는 FTP의 일반적인 인터넷 프로토콜을 사용하여 URL을 검색하는 브라우저의 구성 요소이다.

5) 자바 스크립트 해석기

6) UI 백엔드 : UI 백엔드는 콤보 상자 및 창과 같은 기본 위젯을 그리는 데 사용된다.

7) 데이터 지속성 / 스토리지 : 브라우저는 localStorage, IndexedDB, WebSQL 및 FileSystem과 같은 스토리지 메커니즘을 지원한다.

2. Server

서버라고 하면 커다란 기계를 생각했다. 하지만 공부해보니 그냥 서버역할을 하면 서버라고 부른다고 한다. 서버는 자원을 제공하는 주체이다. 서버를 하드웨어측면에서는 웹사이트의 컴포넌트파일들을 저장하는 컴퓨터이다. 그리고 이 파일들을 최종 소비자의 디바이스에 전달한다. 소프트웨어 측면에서는 기본적으로 웹 사용자가 어떻게 오스트 파일들에 접근하는지를 관리한다. 이 문서에는 서버는 http서버로 국한한다.

3. API(Application Programing Interface)

웹 서버 또는 웹 브라우저를 위한 애플리케이션 프로그래밍 인터페이스이다. 간단하게 프로그램들이 서로 상호작용하는 것을 도와주는 매게체이다. 이것은 기술이 아니라 개념이다.

모든 유형의 API의 공통 목표는 즉시 사용 가능한 기능의 일부를 제공하여 애플리케이션 개발을 가속화하는 것이므로 개발자가 직접 구현할 필요는 없다.

예시로 구글mapAPI를 들어보면 구글지도관련데이터들이 오픈되어 있어도 우리는 사용하는데 어려움을 겪는다. 스마트폰을 이용하고 싶은데 전원버튼이나 홈버튼이 없어서 사용하지 못하는 것과 같다. API는 데이터나 프로그램을 사용자가 사용하기 쉽게 해주는 다리라고 생각을 하면된다. 컴퓨터를 이용하기 위해 마우스를 사용하듯 구글map을 이용하기위해 API를 이용한다.

API의 역할

  • 서버와 DB에 대한 출입구 역할을 한다. DB에는 정보들이 저장되어 있기때문에 아무나 접근을 하면 안된다. 이를 방지하기 위해 출입구역할을 하며 허용된 사람에게만 접근성을 부여한다.

  • 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다.

  • 모든 접속을 표준화한다.

출처http://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/

4. HTTP(Hypertext Transfer Protocol)

브라우저와 서버간의 데이터를 주고받기 위한 방식이다. 속성은 stateless와 connectionless가 있다. 각각의 데이터 요청이 서로 독립적으로 관리가 되어 stateless프로토콜, 한번의 요청에는 한번의 응답을 한다는 것을 connectionless라고 한다. TCP와 UDP를 사용하며, 80번 포트를 사용한다.

header와 body로 구성되어 있다.

1) URL(Uniform Resource Locators) : 서버에 자원을 요청하기 위해 입력하는 영문주소이다.

2) HTTP 요청 메서드

  • GET : 존재하는 자원에 대한 요청

  • POST : 새로운 자원을 생성

  • PUT : 존재하는 자원에 대한 변경

  • DELETE : 존재하는 자원에 대한 삭제

3) HTTP 상태 코드

<200번대 상태코드>

  • 200 : GET 요청에 대한 성공

  • 204 : No Content. 성공했으나 응답 본문에 데이터가 없음

  • 205 : Reset Content. 성공했으나 클라이언트의 화면을 새로 고침하도록 권고

  • 206 : Partial Conent. 성공했으나 일부 범위의 데이터만 반환

<300번대 리다이렉션>

  • 301 : Moved Permanently, 요청한 자원이 새 URL에 존재

  • 303 : See Other, 요청한 자원이 임시 주소에 존재

  • 304 : Not Modified, 요청한 자원이 변경되지 않았으므로 클라이언트에서 캐싱된 자원을 사용하도록 권고. ETag와 같은 정보를 활용하여 변경 여부를 확인

<400번대 클라이언트 에러>

  • 400 : Bad Request, 잘못된 요청

  • 401 : Unauthorized, 권한 없이 요청. Authorization 헤더가 잘못된 경우

  • 403 : Forbidden, 서버에서 해당 자원에 대해 접근 금지

  • 405 : Method Not Allowed, 허용되지 않은 요청 메서드

  • 409 : Conflict, 최신 자원이 아닌데 업데이트하는 경우. ex) 파일 업로드 시 버전 충돌

<500번대 서버 에러>

  • 501 : Not Implemented, 요청한 동작에 대해 서버가 수행할 수 없는 경우

  • 503 : Service Unavailable, 서버가 과부하 또는 유지 보수로 내려간 경우

4) HTTP Request 구조

  • 메소드(Header) : 사용자가 서버에 요청하는 메소드이다

  • 요청헤더(Header) : 서버에 전달되는 사용자 정보

  • 공백 : 헤더와 본문을 구분하기 위한 공백

  • 본문(message) : 요청을 담고있는 부분(Post가 아닌 Get인 경우 요청정보가 주소에 담겨있어 본문은 빈 상태이다)

5) HTTP Response 구조

  • 상태코드(Header) : 사용자의 요청에 대한 서버 처리결과를 나타낸다

  • 응답헤더(Header) : 사용자에게 전달한 데이터 정보를 나타낸다

  • 본문 : 사용자에게 전달한 데이터 내용을 담고 있다

6) REST API

REST은 HTTP을 기반으로 필요한 자원에 접근하는 방식을 정해 놓은 아키텍쳐이다. 그리고 REST API는 REST를 통해 서비스API를 구현한 것이다. 먼저 REST를 알아보자.

REST의 속성

  • 서버에 있는 모든 resource는 각 resource 당 클라이언트가 바로 접근 할 수 있는 고유 URI가 존재한다

  • 요청시 정보를 받을 수 있어 정보를 따로 보관하지 않아 서비스자유도가 높아지고 유연하다

  • HTTP 메소드를 사용한다

  • 서비스 내에 하나의 resource가 주변에 연관 된 리소스들과 연결되어 표현이 되어야 한다

REST API출처https://medium.com/@dydrlaks/rest-api-3e424716bab

출처블로그https://jinbroing.tistory.com/96

출처블로그 https://joshua1988.github.io/web-development/http-part1/

출처https://ko.wikipedia.org/wiki/HTTP

5. Ajax

브라우저는 정적인 시스템이다. 그래서 기본적으로 클라이언트쪽에서 요청을 하고 서버에서 요청한 정보를 전송받으면 연결이 끊어지게 된다. 그래서 화면의 내용을 갱신하려면 다시 요청하고 정보를 받는 과정이 필요해진다. 하지만 javascript의 라이브러리 중 하나인 Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩없이 서비스를 사용할 수 있게 한다. 이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

  • 표현 정보를 위한 HTML (또는 XHTML) 과 CSS

  • 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트

  • 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다)

1) Ajax의 장점

  1. 웹페이지의 속도향상

  2. 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능하다.

  3. 서버에서 Data만 전송해면 되므로 전체적인 코딩의 양이 줄어든다.

  4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.

2) Ajax 의 단점

  1. 히스토리 관리가 안 된다. (보안에 좀 더 신경을 써야한다.)

  2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.

  3. XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.

출처https://opentutorials.org/course/1375/6843

위키백과https://ko.wikipedia.org/wiki/Ajax#Ajax%EB%A5%BC_%EC%A7%80%EC%9B%90%ED%95%98%EB%8A%94_%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80

출처https://coding-factory.tistory.com/143

용어정리

  • Interface(인터페이스) : 구현된 것은 아무것도 없는 기본 설계도라는 의미이다. 추상메소드와 상수만 멤버로 가질 수 있다. 인터페이스는 표준, 약속, 규칙이다.

  • Protocol(프로토콜) : 복수의 컴퓨터 사이나 중앙 컴퓨터와 단말기 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약이다.

  • URI (Uniform Resource Identifier) - 통합 자원 식별자, 인터넷에 있는 자원을 나타내는 유일한 주소다

  • URL (Uniform Resource Locator) - 파일 리소스의 위치, 네트워크상의 자원의 위치다

profile
장봄
즐겁게 배우고 꾸준히 블로깅하는 개발자입니다 ;>
이전 포스트

javascript_Callback & Promise / Async & Await

다음 포스트

javascript_Browser Security

0개의 댓글