Front End에서 Back End까지 데이터 플로우 정리

🌟프론트엔드와 백엔드

 

 

🌟Web Service Architexture

 

✔️1. 목표 

  - web개발에 있어서 frontend와 backend를 연결하는 방법을 알아보겠습니다. 

  - 이번 Post는 web개발 함에 있어서 front-end와 back-end를 연결 원리를 알지 못하는 사람들을 위한 post입니다.

 

 

 

✔️ 2. Web Server의 Architecture

 

  - frontend와 backend를 이해 하려면 아래의 Web Server의 Architecutre는 무조건 이해하고 가야 합니다.

    그래야 Frontend, backend 및 1tier, 2 tier, 3 tier Architecture 등을 이해할 수 있습니다.

  - Web Server의 기본 구조는 아래와 같이 3개의 Server(Web Server, Web Application Server, DB Server)로
    구성이 됩니다. 

 

 

 

  1) Web Server

    - Client PC에서 동작 할 정적 Web Page를 생성하여 Client PC에 전달 합니다.

    * 정적 Web Page란?

      - Web Brower만 있으면 볼 수 있는 page를 말합니다.

        즉, Web Server와 통신이 필요 없는 Page입니다.

      - 정적 Page에서는 CSS, javascript가 동작을 하나 동작 결과는 Server에 저장되지 않습니다. 

 

  2) Web Application Server(WAS)

    - Web Server의 요청에 따라 동적 Data를 생산하여 Web Server에 전달합니다.

    - Ex) Client는 

 

  3) DB Server

    - Web Appcliaion Server에 생성 한 동적 Data를 저장하는 데 사용하거나

      Web Appcliaion Server에 필요 한 동적 Data를 읽을 때 사용합니다.

 

 

✔️ 3. 1 tier, 2 tier, 3 tier Architecture는 뭔가?

 

  - tier(계층)는 컴포넌트들의 물리적인 분리를 뜻 합니다.

  - 결론 적으로 Server을 물리적으로 얼마나 분리했냐에 따라서 1, 2, 3 tier가 나누어지는 것입니다. 

 

 

  1) 1-tier

    - (Web Application Server(WAS) + DB Server)가 물리적 한 Server에 동작하는 구조

    - WAS가 Web Server 및 Web Application Server의 역할을 모두 수행합니다.

 

2) 2-tier

    - Web Application Server(WAS)와  DB Server가 각각의 물리적 Server에 동작하는 구조

    - WAS가 Web Server 및 Web Application Server의 역할을 모두 수행합니다.

 

 

 

3) 3-tier

    - Web Server와 Web Application Server 와 DB Server가 각각의 물리적 Server에 동작하는 구조

 

 

 

 

✔️ 4. Frontend와 Backend는 어떻게 구분되는가?

 

  1) Frontend

    (1) 개념

      - 사용자에게 보이는 영역이며 Web Brower를 통하여 바로 볼 수 있는 영역입니다.

    (2) 개발 언어 

      - HTML, CSS, Javascript 등을 이용하여 개발을 합니다.

    (3) 개발 framework 

      - React,  Vue, Angular 등등

 

  2) Backend

    (1) 개념

      - 사용 자체가 보일 동적 데이터를 처리하는 영역입니다.

    (2) 개발 언어 

      - java, nodejs 등을 이용하여 개발을 합니다.

    (3) 개발 framework

      - Express.js , Django, Spring 등등

 

5. Frontend와 Backend의 동작 Flow

  - 빨간색 -> Get Query을 통한 Web 페이지 요청

  - 녹색    -> Get Query에 대한 Web 페이지 응답