ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [부스트 코스] 웹 개발의 이해 - FE/BE
      CS기초/웹 2020. 2. 6. 01:55
      728x90
      반응형

       

      * 이 글은 부스트 코스 웹 프로그래밍 강좌를 듣고, 작성되었습니다.

      https://www.edwith.org/boostcourse-web/joinLectures/12952

       

      [부스트코스] 웹 프로그래밍 강좌소개 : edwith

      - 부스트코스

      www.edwith.org

       

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

      • 저급언어 : 기계 중심의 언어
      • 고급언어 : 사람 중심의 언어
      • 컴파일러 : 어셈블리어를 기계어로 바꿔줌. 또는 소스코드를 기계어로 번역해주는 도구

       

      컴퓨터, 즉 기계가 직접 알아들을 수 있는 0과 1의 2진수로 이뤄진 값으로 작성하는 프로그래밍 언어를 기계어라고 한다.

      기계어는 사람이 프로그래밍하기 굉장히 어렵기 때문에, 이 기계어의 숫자와 1:1 대응시킨 기호를 만들고, 이 기호로 프로그래밍을 하게 되었는데, 이 기호로 작성된 언어를 어셈블리어라 하고, 기호를 숫자로 바꿀때 사용하는 도구를 컴파일러라 한다. 그러다 어셈블리어로 프로그래밍 하는 것도 어려워, 사람이 좀 더 이해하기 쉬운 문법으로 작성된 고급 언어가 등장했다. 고급 언어로 작성된 소스코드도 기계어로 번역해야 하는데, 이러한 일을 수행하는 것 또한 컴파일러 라고 하고, 이 과정을 컴파일 이라고 한다.

       

       

      웹 관련 인기 언어는 다음과 같다. 

       

      • Python : 프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발할 수 있다. 많은 사람에게 추천되는 언어이며, 데이터 과학에서도 자주 사용되며 웹사이트 개발에서도 많이 사용되고 있다.
      • PHP : 웹의 80% 이상이 PHP로 만들어졌다고 말합니다. 그만큼 PHP는 웹 개발에서 많이 사용된다. 
      • JavaScript : 자바 스크립트는 처음 시작이 브라우저에서 동작하는 언어였다. 현재는 서버에서도 작성하는 프로그램으로 점차 영역을 넓혀가고 있다. 프론트 개발자라면 반드시 알아야 할 언어이다. 자바스크립트 커뮤니티도 점점 더 거대해지고 있다.
      • JAVA : 엔터프라이즈 소프트웨어 환경에 잘 맞는 언어입니다. 큰 규모의 소프트웨어 개발에 자바언어가 많이 사용되고 있다. JAVA언어를 지원하는 수많은 커뮤니티에 위해서, 지속적으로 발전되어 훌륭한 구조와 설계 기법들이 잘 갖춰져 있다.
      • Ruby : 빠른 개발에 널리 사용되며, 단순함과 세련된 웹 어플리케이션을 만들 수 있기 때문에 인기 있는 언어 중의 하나.

       

       

      2. 웹 Front-End 와 웹 Back-End

      웹 프론트엔드(FE)

      웹 프론트엔드란 무엇일까? 

      사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)을 제공하고, 

      사용자의 요청(요구사항)에 반응해서 동작하는 것이다.

       

      웹 프론트엔드의 역할엔 세가지가 있다.

      • 웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 한다.(신문,책등과 같이) 
      • 적절한 배치와 일관된 디자인 등을 제공해야 한다.(보기 좋게)
      • 사용자 요청을 잘 반영해야 한다.(소통하듯이)

      웹 프론트엔드에서 쓰이는 프로그래밍 언어와 그 역할을 살펴보자. 

      • HTML :  계층적으로 문서의 구조를 잡는다.
      • CSS : 웹 페이지의 디자인적인 요소를 결정한다.
      • Javascript : HTML, CSS 를 동적으로 제어한다.

      웹 백엔드(BE)

      웹 백엔드의 역할은 무엇일까?

      정보를 처리하고 저장하며, 클라이언트의 요청에 따라 정보를 내려주는 역할을 한다.

      가령 쇼핑몰이라면, 상품 정보를 가지고 있고, 주문을 받아서 저장하고, 사용자가 관심있어 하는 상품을 골라주는역할을 한다.

       

       

      백엔드 개발자가 알아야 할 것에는 다음과 같은 것들이 있다.

      • 프로그래밍 언어(JAVA,  Python, PHP, Javascript 등)
      • 웹의 동작 원리
      • 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
      • 운영체제, 네트워크 등에 대한 이해
      • 프레임워크에 대한 이해(예: Spring)
      • DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)

       

      3. browser 의 동작

      브라우저의 구성

      브라우저의 구성은 다음과 같다.

       

      브라우저는 브라우저 컴포넌트로 구성되어 있다.

      각각의 컴포넌트 들의 역할을 살펴보자.

      • UI: 주소창, 앞으로 가기/뒤로 가기 버튼, 북마킹 메뉴 등이 해당된다. 요청된 페이지에서 윈도우를 제외한 브라우저가 제공하는 모든 파트들을 말한다. 이런 것들은 OS 레벨에서 설치되어 있는 소프트웨어다.
      • 브라우저 엔진: UI 와 렌더링 엔진사이에서 작동하는 브라우저 소프트웨어를 동작시켜주는 핵심 엔진이다. 
      • 렌더링 엔진: 요청된 컨텐츠를 화면에 보여주는 역할을 한다. 예를 등러, HTML로 작성된 컨텐츠가 요청되었다면, 렌더링 엔진이 HTML 과 CSS 를 넘겨서, 그 넘겨진 컨텐츠를 화면에 보여준다. 
      • 네트워킹 : 브라우저가 HTTP를 통해서 웹 서버, 특정 인터넷 주소를 해석한 다음, 그 주소로 통신한다.
      • UI 백엔드 : 콤보박스, 윈도우와 같이 기본적인 위젯을 그린다. 백엔드에는 플랫폼 의존적이지 않은 제네릭한 인터페이스가 있다.
      • 자바스크립트 인터프리터 : 자바스크립트 코드 해석
      • 데이터 저장소 : 데이터 관리 영역이다. 쿠키, 캐시 데이터 등을 저장한다.

       

       

      렌더링 엔진

      렌더링 엔진을 좀 더 살펴보면, 렌더링 엔진은 렌더링을 한다. 렌더링이란? 요청된 컨텐츠를 브라우저 화면에 보여준다.

       

      기본적으로, 렌더링 엔진은 HTML 과 XML 문서를 보여줄 수 있다. (플러그인을 사용해 다른 타입의 데이터를 보여줄 수도 있다.) 

       

      브라우저 마다 다른 렌더링 엔진을 사용한다. 파이어폭스는 Gecko, 사파리는 WebKit, 크롬과 오페라는 Blink 다. 

       

      렌더링 엔진은 컨텐츠 가져오는 단계를 네트워킹 계층부터 시작할 것이다. 

      렌더링 엔진의 메인 플로우를 보자.

       

       

       

       

      1. DOM 트리를 만들기 위해 HTML 을 파싱한다. 

      파싱이란, 문자 단위로 다 하나하나 해석을 해서 이 내용이 가진 의미들을 파악하는 것이다.

       

      DOM(Document Object Model) 트리 생성한다.

      HTML은 대게 구조화된 정보이기 때문에 그런 것들을 해석해서 일종의 트리구조의 형태로 데이터들 다시 가지고 있게 된다.

       

         2.  렌더 트리 만들기.

       

      각각의 DOM 트리별로 어떤 스타일 정보를 가지고 있는지 렌더트리를 다시한번 객체화 시켜서 key와 value 로 된 구조로 만드는 것이 일반적인 방법이다.

       

        3. 렌더 트리를 배치한다.

       

      렌더 트리 기준으로 CSS 를 합쳐서 매칭하게 된다. 즉, 화면에 어떻게 배치할지를 결정한다.

       

        4. 화면에 그린다.

       

      브라우저의 형태

      이는 WebKit 메인플로우다. 

       

      HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서 역시 CSS Tree(CSS Object Model)을 만든다.

      이 과정에서 Parsing 과정이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정이라고 보면 된다. DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합된다.

      이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있다.

      이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거치게 된다.

      Parsing-general

      파싱은 렌더링 엔진 안에서 중요한 프로세스 이므로, 일반적인 파싱의 방법에 대해서 알아보자. 

      문서를 파싱한다는 것은, 그것을 사용 가능한 구조로 해석한다는 것이다. 파싱한 결과는 구조화된 노드로 구성된 트리가 된다.

       

      위의 이미지는 예를 들어 2 + 3 - 1 을 파싱했을 때의 결과를 보여준다.

       

      파싱은 일종의 전산학에서는 컴파일러에 해당하는 부분이다. 토큰단위로 다 잘라서 의미를 해석한 다음에, 의미에 따라서 어떤 실행을 해주는 것이다. 

       

      HTML Parser

      HTML 코드가 실제로 브라우저에서는 어떤 모습으로 구성되어 있을까?

       

      <html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="example.png"/></div>
  </body>
</html>

       

       

      HTMLHElement, html 아래 body, div 아래 img 태그 ... 이렇게 트리형태로 표현하게 되는데 이를 DOM 트리라고 한다.

       

      CSS Parsing

      CSS 는 HTML 과 다르게, 문맥에 따른 문법 ( context free grammar) 가 없어, 위에 나온 파서로 파싱될 수 있다. 

       

      5. 웹 서버

      웹 서버는 보통 소프트웨어를 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말하는 경우도 있다.

       

      웹 서버의 기능은 클라이언트(= 웹 브라우저나 웹 크롤러) 가 요청하는 HTML 문서나 각종 리소스를 전달하는 것이다.

       

      요청하는 리소스는 컴퓨터에 저장되어있는 정적인 데이터(HTML, CSS, Javascript 파일 등 컴퓨터에 저장되어 있는 파일들) 이거나 동적인 결과(=웹 서버에 의해서 실행되는 프로그램을 통해서 만들어진 결과물) 이 될 수 있다.

       

      웹 서버 소프트웨어의 종류에는 Apache, Nginx, Miscrosoft, Google 웹 서버 등이 있다.

       

      6. WAS

       

      웹서버와 웹 브라우저는 대표적인 클라이언트/서버 구조이다.

       

      클라이언트는 서버에게 서비스를 요청해 그 결과를 보여주는 것을 말하고, 서버는 서비스를 제공한다. 

       

      DBMS (Database Management System)

      데이터를 관리하는 시스템, 즉 DBMS 는 소프트웨어로, 다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해준다.

       

      보통 서버형태로 서비스를 제공하기 때문에, 예전엔 DBMS 에 접속해서 동작하는 클라이언트 프로그램들이 많이 등장했다. 그러나 이는 단점이 있다. 클라이언트에 로직이 집중되어 크기도 커지고, 유지보수도 힘들 뿐더러, 보안도 나쁘고, 프로그램 로직이 변경되면 클라이언트가 매번 배포되어야 하기 때문에 번거롭고 비용이 많이 든다.

       

      그래서 미들웨어가 등장하게 된다.

       

      미들웨어

      클라이언트와 DBMS 사이에 또 다른 서버를 두어 비즈니스 로직을 담당한다. 클라이언트는 단순히 요청만 중앙에 있는 서버에게 보내고, 중앙에 있는 서버(=미들웨어) 에서 대부분의 로직을 수행하는 것이다. 데이터를 조작할 일이 있으면, DBMS 에게 요청한다. 그리고, 결과를 클라이언트에 전송하면 클라이언트는 그 결과를 화면에 보여주면 된다.

       

      프로그램 로직이 변경되어도 모든 클라이언트를 다시 배포할 필요 없이 중앙의 미들웨어만 변경하면 된다.

       

      WAS (Web Application Server)

      WAS 는 일종의 미들웨어로, 웹 클라이언트(웹 브라우저)의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하는 목적을 가진다.

       

      웹에서 동적인 기능을 요구하게 되었고, 이는 프로그래밍을 통해서 가능해졌는데, 웹 서버에서 프로그래밍 기능이 들어가는 방식을 CGI 라고 부른다. CGI 가 단순한 프로그래밍에서는 별 문제가 없지만, 웹은 점점 복잡해졌고, 이 복잡한 기능들은 DBMS 와 연관된 경우가 많았다. 따라서, 클라이언트인 브라우저와 DBMS 사이에 동작하는 미들웨어를 필요로 하게 되었고, 그것을 WAS 라고 부른다. 

       

      중요한 기능들은 다음과 같다.

      • 프로그램 실행 환경과 데이터베이스 접속 기능을 제공한다.
      • 여러개의 트랜잭션(=논리적인 작업 단위) 을 관리한다.
      • 업무를 처리하는 비즈니스 로직을 수행한다.
      • 이 외에도 기본적인 웹 서버의 기능을 제공한다.

      현업에서의 구성은 다음과 같다.

       

      톰캣에 웹 서버가 충분한 기능을 하여 웹서버 따로 설치 안하고 톰캣이라는 WAS 만 설치해도 사용 가능하다.  

       

      그러나 보통 웹 서버가 WAS 앞 단에 있으면 좋다.

       

      웹 서버는 WAS 보다 간단한 구조로 만들어져 있어, 사람들이 많이 접속하는 대용량 웹 애플리케이션일 경우 서버 수가 여러대 일 수 있다. 이때, WAS 에 문제가 생겼을 때, 웹 서버에서 먼저 해당 WAS 를 이용하지 못하도록 하고 WAS 를 재시작 하여 무중단으로 운영할 수 있다. 

       

      WAS vs. 웹 서버

      • WAS 도 보통 자체적으로 웹 서버 기능을 내장하고 있다.
      • 현재는 WAS 가 가지고 있는 웹서버도 정적인 컨텐츠를 처리하는데 있어서 성능상 큰 차이가 없다.
      • 규모가 커질수록 웹 서버와 WAS를 분리한다. 그 목적은 장애 극복기능 (failover) 인 경우가 많다.
      • 웹 서버는 보통 정적인 컨텐츠를 웹 브라우저에게 전송하는 역할을 하고, WAS는 프로그램의 동적인 결과를 웹 브라우저에게 전송하는 역할을 담당한다.

       

       

       

       

       

      이미지 출처, 참고 자료 : https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Introduction

       

      728x90

      'CS기초 > 웹' 카테고리의 다른 글

      [부스트 코스] JSP - BE  (0) 2020.06.07
      [부스트코스] Web UI 개발 - FE  (0) 2020.03.20
      [부스트 코스] CSS 기초 문법 (우선순위, 선택자, 레이아웃 구성)  (0) 2020.02.13
      [부스트 코스] HTML - FE  (0) 2020.02.06
      [부스트코스]웹의 동작 원리(HTTP 프로토콜의 이해)  (2) 2020.01.19

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바