컴퓨터이론

[기초 이론] 5. 웹 아키텍처

뇨롱 2020. 9. 7. 05:27

이 포스트는 인프런의 반드시 알고 넘어가야 할 웹 기술 기초편 을 보고 작성하였습니다!

 

 

 

5. 웹 아키텍처

<웹의 구성>

∨ 클라이언트 + 웹 서버 + 데이터베이스

  • 프론트 엔드(Front-End): 클라이언트

      예시: UI, HTML, JAVASCRIPT, CSS

  • 백 엔드(Back-End): 웹 서버, 데이터베이스

     예시: PHP, JSP, ASP, ASPX

 

(1) 웹 아키텍처 동작 원리 

①웹 브라우저의 동작 예시

1) 클라이언트 측에서 사용자가 웹 브라우저를 통해 사이트를 접속한다.

2) 도메인에 따른 IP변환 ⇒ 데이터 전송을 위해서 IP가 필요하다.

3) HTTP 요청 메세지를 제작한다.

 

★로컬 캐시에 저장해 똑같은 일을 다시 반복하지 않는다.

 

② IP 변환방법

  • 개인 PC의 로컬 DNS 캐시 확인(ipconfig, displandns)
  • hosts 파일 참조
  • DNS 서버 질의

 

③ 웹 아키텍처 동작 원리 분석

 

-TCP/IP 통신 기반이므로 3-way hand shake 과정을 거쳐 HTTP 데이터를 전송한다.

  • 요청 → DB 연결 및 질의 과정 → 요청메세지 제작 → 전송

*와이어샤크를 통해 패킷을 잡으면 mac+ip+tcp+http 가 encapsule되어있다.

  • IP는 웹 서버가 목적지 이다. 

  • 응답 메세지를 받을 시, 웹 브라우저가 HTML코드를 출력 → 사용자에게 깔끔하게 인터페이스로 출력

(2) 클라이언트

  • 예시: 웹 브라우저 - 인터넷 익스플로어, 구글 크롬, 애플 사파리

①과정

1) 웹 브라우저는 사용자가 입력한 URL을 이용해 서버에 자원을 요청한다.

2) 서버로부터 응답을 받아 해석한다.

3) 사용자에게 GUI 환경을 제공한다.

4) 메세지의 HTML, CSS, JAVASCRIPT 코드를 해석해 사용자에 출력한다.

 

②웹 사이트 구조 분석

 

-HTML, CSS, JAVASCRIPT로 구성되어있다.

∨ 가독성 있는 인터페이스: HTML, CSS

∨ 동적인 인터페이스: JAVASCRIPT

 

 

  • 서버와의 통신을 이용해 <form>태그를 이용해 폼 데이터를 전송한다.
  • Ajax라는 기술을 이용해 비동기화로 가능하다

*비동기화: 새로고침 없음.

⇒ 서버에 요청/응답을 받아서 페이지 재구성이 가능하다.

웹페이지는 그대로인데 버튼을 클릭하면 요청/응답을 해 JS에서 응답에 따른 처리를 한다.

백엔드의 부하율을 낮추기 때문에 트래픽이 많이 사용되는 사이트에서 사용한다. (필요한 부분만 요청해서 받는다)

  • Ajax 기반의 웹사이트를 진단

요청/응답 행위는 동일하기 때문에 진단방법이 동일하다.

하지만 컨텐츠타입은 다르다.

∨ 응답 컨텐츠의 경우, HTML이 아니라 XML, ISON 타입이라도 인터페이스를 구성하는 데이터로 사용하되 JS를 분석 후 알맞게 데이터를 변조하면 된다.

 

(3) 웹 서버 : 클라이언트 자원 요청에 따른 웹 서비스 제공

  • 예시: Apache, IIS, NQINX,WebToB,Oracle HTTP SERVER 등

 

 

① 2-Tier 구조: 일반적인 환경

웹 서버- 데이터베이스

② 3-Tier 구조

웹 서버 - 웹 애플리케이션 서버 - 데이터베이스

-웹 서버와 웹 어플리케이션 서버를 분리하여 웹 서버는 정적인 자원(이미지, 텍스트파일), 웹 어플리케이션 서버는 동적자원(JSP)을 처리한다. 

⇒ 효율적이고 유연한 서비스를 제공한다.

예시: JAVA Web Application 환경

 

③ 동작 원리

1) 클라이언트가 웹 서버에 요청 메세지를 보낸다.

  • 요청메세지 해석 → 메소드가 자원 요청일 경우 자원의 유/무를 체크한다.
  • 정적 자원일 경우 스크립트 해석기가 따로 필요없다.(동적자원은 필요!)

 

2) 웹 서버는 요청된 자원의 유/무를 검토해 클라이언트에게 응답 메세지를 보낸다.

  •  정적 자원 요청 시, 웹 서버에서 바로 응답한다.
  •  동적 자원 요청 시, 웹 서버에서 웹 애플리케이션으로 포워딩하고 로직에 따라 데이터베이스에 질의한 후 응답메세지를 전송한다.

 

 

④WS/WAS 구성

-웹 서버와 웹 어플리케이션을 쌍으로 이용한다.

  • WS: 웹 서버와 웹 어플리케이션 서버는 하나로 구성되어있는 경우 (논리적으로 구성)

  • WAS: 물리적으로 분리 (물리적으로 구성)

WAS 는 정적인 자원을 처리하지 못할까?  가능하다.

  •  분리한 이유:

웹 서버는 정적 자원 처리에 최적화 되어있고, 웹 어플리케이션은 동적 자원 처리에 최적화되어 있기 때문에 업무 분담을 해 자원 처리에 대한 효율성을 높인다.

 

 

  • JAVA Web Application 환경의 WS/WAS 구성

대부분 하나의 회사에서 제공되는 웹 서버와 웹 어플리케이션 서버를 쌍으로 사용한다.

웹 서버 웹 어플리케이션
Apache Tomcat(무료)
WebtoB(TMAX) JEUS(TMAX)
Oracle HTTP Server(Oracle) Weblogic(Oracle)
IBM HTTP Server(IBM) WebSphere(IBM)
Apache, Ngix Jboss(Redhat)
Ngix Tomcat

 

(4) 데이터베이스: 동적인 컨텐츠를 제공하기 위해 데이터를 저장해두는 저장소

  • 데이터 예시: 사용자 정보, 상품 정보, 커뮤니티 정보 등 

  • 로그인, 게시판 이용에도 쓰인다.

①종류: Oracle, SQLServer, MYSQL

 

 

(5) Server Side 와 Client Side

- 웹 구조는 Server Side 와 Client Side로 나눈다.

① Client-Side Script: 웹 클라이언트에서 해석되는 스크립트 언어

  • 예시: HTML, CSS, JAVASCRIPT

 

∨ 클라이언트 측에서 보안 검증 절차가 구현되어 있어도 서버에서 보안 검증 로직을 반드시 구현해야한다.

 

 

★Client-Side Script 기반 보안 검증이 안전하지 않은 이유

  • 웹 프록시 도구를 통해 내용을 들여다 볼 수 있다. 파라미터로 정보를 전송하면 다 보인다.
  • 개발자 도구를 통해 Client-Side Script를 조작, 값 변조가 가능하다.
  • INPUT 태그와 hidden 타입의 전송도 웹 프록시 도구 혹은 개발자 도구로 확인 가능하다. ⇒ 신뢰할 수 없다

     ⇒  검증이 무의미하다.

 

② Server-Side Script: 웹 서버에서 해석되는 언어

*어플리케이션 서버 종류에 따라 해석할 수 있는 언어가 달라진다.