Web-웹의 동작원리

웹 프로그래밍을 위한 프로그램 언어들

• 기계어는 0과 1로 구성되어있는 언어
• 기계어는 숫자로만 되어있기 때문에 유지보수와 사용이 매우 어렵다.
• 단, 기호로 작성된 프로그래밍 언어는 기계가 바로 알아들을 수 없기 때문에 기호로 작성된 문장들을 원래의 숫자로 바꿔야 하는 과정이 더 필요하게 된다.
• 이러한 과정에서 사용되는 도구를 컴파일러(Compiler)라고 말하며, 이러한 기호로 작성된 언어를 어셈블리어(Assembly Language)라고 말한다.
• 현재는 아주 특수한 경우를 제외하고는 기계어와 어셈블리어로 프로그램을 개발하는 경우는 거의 없습니다. 그만큼 프로그래밍이 어렵고 유지보수가 어렵기 때문이다.

웹의 동작 (HTTP 프로토콜 이해)

• 인터넷이란 네트웨크들의 네트워크!
• 웹 = 인터넷? 이건 틀린 말
• 인터넷에는 굉장히 많은 서비스가 있는데 웹, 이메일, ftp 등등이 있다.
• 하나의 컴퓨터에는 여러 개의 서버들이 동작할 수 있다.

• 각각의 서버들은 포트라는 값으로 구분되어서 동작되어진다.

• http란?
  • 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(protocol)이다.
  • http는 서버/클라이언트 모델을 따른다.
• http 장점
  • 불특정 다수를 대상으로 하는 서비스에는 적합하다.
  • 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다.
• http 단점
  • 연결을 끊어버리기 때문에, 클라이언트의 이전 상황을 알 수가 없다. → 쇼핑몰에서 쇼핑하다 결정한걸 이제 구매하려는데 뭘 구매하려했는지 정보가 없는 경우!
  • 이러한 특징을 무상태(Stateless)라고 말한다.
  • 이러한 특징 때문에 정보를 유지하기 위해서 Cookie, Session과 같은 기술이 등장하게 되었다.
  • 어떠한 요청과 응답이 끝나면 바로 4번 close가 실행되기 때문에 이 특성을 무상태라고 표현하는 것이다.

• URL

  • URL은 웹 상에서 문서와 많은 자원들의 위치를 나타내기위해서 사용됨.
  • 하나의 컴퓨터에는 여러 개의 소프트웨어 서버가 동작할 수 있음.
  • 하나의 포트번호에 하나의 서버가 존재해야함.
  • HTTP서버는 기본 포트값이 80번

요청헤더

    GET/servlet/query?a=10&b=90 HTTP/1.1

• GET메소드 방식은 요청바디가 없다! → 요청할 때 가지고가는 자원들을 URI에 붙혀서 가져가기 때문
• servlet부터 90까지가 요청 URI인데 요청하는 자원의 위치를 명시해주는 것
• HTTP/1.1 이거는 HTTP버전넘버

요청바디

• 요청방식이 POST나 PUT방식이면 안에 요청하는 자원들 내용이 있다.

응답헤더

• 서버정보, HTTP버전, 날짜, 캐시제어방식, 자원정보타입 등을 명시해준다.

응답바디

• 실제 응답 리소스 데이터

웹 Front-End 와 웹 Back-End

• 프론트엔드 / Client-side
  • 웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML
  • 적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS
  • 사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript
• 백엔드 / Server-side
  • 백엔드는 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할을 한다. 가령 쇼핑몰이라면, 상품 정보를 가지고 있고, 주문을 받아서 저장하고, 사용자가 관심있어 하는 상품을 골라주는 역할이 백엔드의 역할이다
  • 백엔드 개발자가 알아야 할 것들
    • 프로그래밍 언어(JAVA, Python, PHP, Javascript 등)
    • 웹의 동작 원리
    • 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
    • 리눅스같은 운영체제와 네트워크 등에 대한 이해
    • 프레임워크에 대한 이해(예: Spring)
    • DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)

browser의 동작

• 서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 ‘Browser’이다.
• Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어있다.

• browser는 아래와 같은 구성요소로 되어있다.

• 렌더링 엔진이란?
  • 파이어폭스는 Gecko, 사파리는 Webkit, 크롬과 오페라는 Blink 이렇게 브라우저 별로 렌더링 엔진을 각각 갖고 있음.
  • 렌더링 엔진 흐름
    1. html요소들을 먼저 파싱함 → 문자 단위로 하나하나 해석해서 이 내용이 가진 의미를 파악
    2. 그 다음 어떤 데이터객체로 구조화시킨다. (Dom tree)
    3. render tree에 css를 추가하여 데이터객체를 형성한다. ※ 파싱이란? 토큰 단위로 잘라서 의미를 해석한 후에 의미에 따라 실행을 하는 것을 의미한다.

• DOM tree 구조

• CSS tree 구조

• HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서 역시 CSS Tree(CSS Object Model)을 만든다.
• DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합된다.
• 이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있다.
• 이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거치게 된다.

browser에서의 웹 개발

• javascript코드는 왠만하면 body 태그 뒤 혹은 body태그가 닫히기 직전에 위치시키는 것이 좋다.
• javascript코드가 렌더링을 방해해서 브라우저 화면상 보이는걸 늦게 보여주기 때문이다.

웹서버

• 웹 서버란?
  • 웹 서버는 소프트웨어를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터로 주로 말한다.
  • 웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것이다. → 핵심
  • 웹 크롤러도 웹서버에게 요청을 보낼 수 있는데 웹 브라우저, 웹크롤러 모두 웹 서버에게 http에 맞도록 리소스를 요청한다.
  • 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적(static)인 데이터이거나 동적인 결과가 될 수 있습니다.
  • 여기서 동적인 결과란 웹서버에 의해서 실행되는 프로그램을 통해 만들어진 결과라고 할 수 있음.
  • 웹 서버와 웹 클라이언트는 http를 통해서 통신한다.
• 웹 서버 소프트웨어의 종류
  • 가장 많이 사용하는 웹 서버는 Apache, Nginx, Microsoft IIS
  • Apache웹 서버는 Apache Software Foundation에서 개발한 웹서버로 오픈소스 소프트웨어(Open-source Software)이며, 거의 대부분 운영체제에서 설치 및 사용을 할 수 있다.
  • Nginx는 차세대 웹서버로 불리며 더 적은 자원으로 더 빠르게 데이터를 서비스하는 것을 목적으로 만들어진 서버이며 Apache웹 서버와 마찬가지로 오픈소스 소프트웨어이다.

WAS (Web Application Server)

• DBMS와 클라이언트
• DBMS는 보통 서버에 접속해서 제공하는 형태여서 DBMS에 접속해서 동작하는 클라이언트가 많았다.
  • 위 방식의 문제점은 클라이언트 로직이 많아지고 클라이언트 크기가 커진다는 점이다.
  • 이러한 문제즘을 해결하기 위해 나온 것이 미들웨어!!

• 미들웨어

  • 대부분의 비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 한다. (클라이언트-요청 / 서버 - 응답)
  • 이러면 클라이언트 로직의 복잡함이 사라지고 단순히 화면에 결과만 보여주면 되는 가벼움을 획득
• WAS
  • 웹 서버에서 프로그래밍 기능이 들어가는 방식이 CGI
  • WAS도 미들웨어의 한 종류이다. (CGI에서 더 복잡한 프로그래밍을 필요로 해서 등장)
  • WAS의 대표적인 예가 톰캣
  • WAS의 중요한 3가지 기능
    1. 프로그램 실행환경과 데이터베이스 접속기능을 제공한다.
    2. 여러 개의 트래젝션을 관리한다.
    3. 업무를 처리하는 비즈니스 로직을 수행한다.