TIL - Basic Web Architecture

naseriansuzie·2019년 12월 2일
0

Immersive Course_TIL

목록 보기
11/27

Today What I Learned

Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다.


1. Browser: 클라이언트와 서버 간 요청/응답이 이루어지는 장(크롬, IE 등)

스크린샷 2019-12-02 오전 11.21.28.png

2. Client and Server

스크린샷 2019-12-02 오전 11.35.19.png
1. Client : 서비스를 사용하는 사용자 혹은 사용자의 단말기
the typical web user's internet-connected device and web-accessing software available on those devices (usually a web browser like Firefox or Chrome).
2. Server: computers that store webpages, sites, or apps. 클라이언트에서 웹 페이지에 접근하려고 요청하면(request), 서버에서는 요청 받은 웹 페이지를 클라이언트 쪽으로 다운로드 해서 보여 준다(response).
- 인터넷 연결: 사용자가 웹에서 데이터를 보내고 받을 수 있게 해준다.
- TCP/IP: Transmission Control Protocol (전송 제어 규약)과 Internet Protocol (인터넷 규약) 은 데이터가 어떻게 웹을 건너 여행해야 하는지 정의하는 통신 규약
→ "어떻게 서로 의사소통 할 것인지 규칙"
- DNS: Domain Name System Servers (도메인 이름 시스템 서버) 는 웹사이트를 위한 주소록
→ 언어 형식으로 전달된 url을 ip로 구성된 진짜 서버 주소로 변환시킴

3. HTTP: Hypertext Transfer Protocol (하이퍼텍스트 전송 규약) 은 클라이언트와 서버가 서로 통신할 수 있게 하기 위한 언어를 정의하는 어플리케이션 규약

  • 클라이언트와 서버가 소통할 수 있도록 정해둔 규칙(protocol)
  • a set of request methods to indicate the desired action to be performed for a given resource
    - 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙)
    스크린샷 2019-12-02 오전 11.31.57.png
    - 속성: stateless, connectionless
    - 무상태성(stateless): http 요청은 독립적이고 일회적이다. 이전 요청에 대한 컨텍스트를 공유하지 않아서 독립적인 요청이 진행된다. 컨텍스트 공유를 위해서는 인증이라는 과정을 통해서 보완을 해야 한다.
    - 비연속성(connectionless): 1요청 1응답의 구조, 응답 직후 연결은 종료(연결 상태를 유지하지 않음)한다.
    - 작동 방식 : 클라이언트 요청에 반드시 응답한다. (있다, 없다, 잘못된 요청이다 등)
    - URI : 인터넷에 있는 자원을 주소로 담아 나타내는 방식으로 scheme에 HTTP를 넣는 경우 http 프로토콜을 통해 uri를 작성할 수 있다.
    - scheme: http:// 혹은 보안이 적용된 https://로 시작하고 동사가 아닌 명사로 표기
    - 도메인 이름
    - 포트: 웹 서버 상의 리소스에 접근하는데 사용 되는 기술적인 "문(gate)"
    - 경로: 웹 서버 상의 리소스 경로
    - 쿼리: 웹 서버에 제공되는 추가적인 파라미터
    - 프래그먼트: 특정 앵커(브라우저에게 그런 "북마크된" 지점에 위치한 컨텐츠를 보여주기 위한 방법)를 가리킴
    - HTTP 메세지 구성: Header와 Body
    - Header: 어디서 보내는 요청인가, 컨텐츠 타입은 무엇인가, 어떤 클라이언트를 이용해 보냈는가? 등의 정보를 담음
    - Body: 서버에 데이터를 보내기 위한 공간, post/put/patch 등은 body라는 내용에 정보를 많이 그리고 감춰서 전달하고 get이나 delete는 body에 정보를 담지 않는다.
    - Method(crud를 실행하는 방법): get, post, put, delete
    - get: 서버로부터 데이터를 받아 옴(조회), body 대신 주소에 쿼리 스트링으로 데이터를 동봉함
    - delete: 서버에서 데이터를 제거
    - get이나 delete에는 본문을 담았을 때 어떻게 처리 하라는 것인지 명확하지 않아서 본문을 담지 않는다.
    - post: 서버 쪽에 데이터를 추가, body에 추가된 정보를 담아서 전달
    - put: 서버 쪽에 수정, 변경된 정보를 body에 담아서 전달, 보통 정보를 전부 바꿀 때 사용
    - patch: put과 기능 유사, 정보 일부를 특정 방식으로 바꿀 때 사용, 변경될 상세 정보는 body에 담아서 전달

4. API: Application Programming Interface, 클라이언트가 서버 자원을 잘 가져다 쓸 수 있도록 만든 인터페이스

  • 소프트웨어가 다른 소프트웨어로부터 지정된 형식으로 데이터를 요청,명령해서 해당하는 값을 받아 올 수 있는 수단
  • 장점: 직접 원하는 데이터를 담은 서버와 db를 구성하지 않고, api만을 통해 원하는 결과값을 클라이언트에 구현할 수 있음
  • 클라이언트의 요청을 api 서버를 통해 받아 db에서 해당 응답을 할 수 있게 된다.
  • REST API? 자원을 이름으로 명시해놓고, HTTP Method(post, get, pust, patch, delete 등)를 통해 해당 자원에 대한 crud 작업을 진행하는 것

5. AJAX: Asynchronous Javascript and XML

  • Dynamic web page: 서버에서 응답을 받을 때마다 페이지를 리로딩하지 않고, 브라우저 내 비동기적 요청/응답 처리를 통해서 페이지 전체 리로딩 없이 필요한 부분만 업데이트 하는 웹페이지가 등장 → web app

  • Asynchronous Javascript and XML
    - 개념 정의: 비동기적으로 자바스크립트를 이용해 서버에 요청을 할 수 있는 기술
    - 전체 리로딩 대신 비동기적으로 필요한 부분만 업데이트 처리 → javascript와 dom 을 이용
    - 이전에는 서버와 통신을 통해 XMLHttpRequest를 사용(jquery) → 이제는 보다 표준 api를 마련하기 위해 fetch API라는 것이 만들어짐
    스크린샷 2019-12-02 오후 2.33.12.png

  • XMLHttpRequest, jQuery ajax, fetch 등에서 ajax를 메소드로 제공

  • fetch API: 서버의 리소스를 가져온다. XMLHttpRequest와 비슷하지만 가독성 면에서 더 강한 코드

  • fetch API 형태: promise 객체를 받음

  • POST 시 fetch API 형태

profile
선한 변화를 만드는 일에 기여하는 개발자가 되고 싶습니다.

0개의 댓글