2.1 Web개발의 이해

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

저급 언어

저급 언어는 기계 중심의 언어라고 말할 수 있습니다.

기계가 직접 알아들을 수 있는 말로 '프로그램 코드를 작성한다'고 말할 수 있습니다.

컴퓨터는 전기로 동작합니다.

즉, 전기신호인 켜졌다(on)와 꺼졌다(off) 2가지 상태 값으로 동작한다고 말할 수 있습니다.

보통 숫자로 표현하면 켜졌다는 1, 꺼졌다는 0을 의미합니다. 0과 1로 표현되는 숫자를 우리는 2진수라고 말합니다.

2진수로 이뤄진 값으로 작성하는 프로그래밍 언어를 기계어(Machine Language)라고 말합니다.

숫자로만 되어 있기 때문에 유지보수도 굉장히 어렵습니다.

숫자로만 된 프로그래밍 언어는 사용이 굉장히 어려웠습니다.

그래서, 이 숫자로 된 문장과 1:1로 대응하는 기호를 만들고, 그 기호로 프로그래밍을 하게 되었습니다.

단 기호로 작성된 프로그램은 기계가 바로 알아들을 수 없기 때문에 기호로 작성된 문장들을 원래의 숫자로 바꿔야 하는 과정이 더 필요하게 되었습니다.

이러한 과정에서 사용되는 도구를 컴파일러(Compiler)라고 말하며, 이러한 기호로 작성된 언어를 어셈블리어(Assembly Language)라고 말합니다.

현재는 아주 특수한 경우를 제외하고는 기계어와 어셈블리어로 프로그램을 개발하는 경우는 거의 없습니다.

그만큼 프로그래밍이 어렵고 유지보수가 어렵기 때문입니다.

 

고급 언어

고급 언어는 사람 중심의 언어라고 말할 수 있습니다.

사람이 좀 더 이해하기 쉬운 문법으로 프로그래밍을 할 수 있습니다.

이런 일이 가능하기 위해선 작성된 소스코드를 번역하는 과정이 필요합니다.

이를 컴파일한다고 말하며, 이러한 일을 수행하는 것을 컴파일러라고 말합니다.

앞에서 어셈블리어도 기계어로 컴파일이 된다고 말했었죠?

컴퓨터 성능이 좋아지고, 컴파일러와 관련된 기술이 발전하면서 사람 중심의 언어로 프로그래밍할 수 있다고 생각하면 됩니다.

이러한 고급 언어로는 다음과 같은 언어들이 있습니다.

• FORTRAN : 최초의 고급언어 중의 하나라고 말할 수 있으며, 과학 계산용으로 주로 사용됩니다. 현재 공대에서도 많이 사용되고 있습니다.

• COBOL : FORTRAN과 더불어 역사가 오래된 언어입니다. 일반 업무에서 사용할 목적으로 만들어졌으며, 현재도 은행 등에서 사용되고 있습니다.

• PROLOG : 논리형 프로그래밍 언어로써, 논리식을 토대로 오브젝트와 오브젝트 간의 관계에 관한 문제를 해결하기 위해 사용됩니다.

• C : 1972년 미국 벨 연구소의 데니스 리치에 의해 개발된 고급 언어로써 시스템 프로그래밍에 가장 적합한 평가를 받는 언어입니다.

• Erlang :스웨덴의 에릭슨에서 개발한 함수형 병행성 프로그래밍 언어이며 통신 인프라를 위한 언어입니다.

• Lisp : LISt Processsor의 약자로써 대표적인 함수형 언어입니다. 프로그래밍 언어의 역사를 말할 때, 현대의 컴퓨터를 위해 등장한 고급 언어 중 가장 오래된 것이 포트란이고, 두 번째로 오래된 것이 바로 이 리스프입니다.

• Swift : 2014년 WWDC(Apple WorldWide Developers Conference)에서 공개한 프로그래밍 언어입니다. 최근에 만들어진 언어로 현대 프로그래밍 언어의 발전을 대다수 계승한 모던 프로그래밍 언어라고 말할 수 있습니다.

• Kotlin : IntelliJ IDEA의 개발사 JetBrains에서 2011년에 개발한 프로그래밍 언어입니다. JVM기반의 언어이며 Java와의 상호 운영이 100% 지원됩니다. Swift와 마찬가지로 현대 프로그래밍 언어의 발전을 대다수 계승한 모던 프로그래밍 언어라 말할 수 있습니다.

• Clojure : 클로저(Clojure)는 리치 히키(Rich Hickey)가 만든 리스프 프로그래밍 언어의 방언으로서, 범용 함수형 언어입니다.

• Python : 프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발할 수 있습니다. 많은 사람에게 추천되는 언어이며, 데이터 과학에서도 자주 사용되며 웹사이트 개발에서도 많이 사용되고 있습니다. 최근 python은 ML (machine learning)에서도 많이 사용됩니다.

• JAVA : 1995년 썬 마이크로시스템즈 에서 개발한 객체지향 프로그래밍 언어입니다. 거의 매년 세계에서 가장 많이 사용되는 인기 1등을 차지하고 있습니다. 

 

웹 프로그래밍에서 인기가 많은 언어

프로그래밍 언어 중에서 가장 인기 있는 언어는 무엇일까요?

사람마다 다른 관점으로 언어를 바라보기 때문에 순위를 매긴다는 것은 쉽지 않을 것입니다.

기업이나 언론의 경우 인기 있는 프로그래밍 언어를 알기 위해서 github, stackoverflow와 같은 사이트에서 언급되는 횟수를 활용하기도 합니다.

Github에서 가장 인기 있는 언어 15개

출처 https://octoverse.github.com/

이외에도 티오베(https://www.tiobe.com)의 자료를 많은 개발자가 공신력이 있다고 생각하고 있습니다.

티오베는 소프트웨어 품질 관련 서비스를 제공하고 있는 기업으로써 위키피디아, 아마존, 유튜브, 구글 검색창의 입력되는 정보를 이용하여 순위를 정하게 됩니다.

 

티오베의 순위를 보면 2016, 2017년도 1등은 Java언어가 차지하고 있는 것을 알 수 있습니다.

단, 다른 언어들의 인기가 높아지면서 비율이 떨어진 것을 알 수 있습니다.

2006년부터 웹과 관련된 언어들이 인기를 얻기 시작하였고, 2012년부터는 모바일 앱을 만들기 위한 언어가 인기를 얻게 되었습니다.

그리고 2016년부터는 데이터 과학과 관련된 언어들이 인기를 얻고 있습니다.

 

웹 관련 인기 언어

• Python : 프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발할 수 있습니다. 많은 사람에게 추천되는 언어이며, 데이터 과학에서도 자주 사용되며 웹사이트 개발에서도 많이 사용되고 있습니다. 다양한 라이브러리. 쉬운 개발

• PHP : 웹의 80% 이상이 PHP로 만들어졌다고 말합니다. 그만큼 PHP는 웹 개발에서 많이 사용됩니다. 

• JavaScript : 자바 스크립트는 처음 시작이 브라우저에서 동작하는 언어였습니다. 현재는 서버에서도 작성하는 프로그램으로 점차 영역을 넓혀가고 있습니다. 프론트 개발자라면 반드시 알아야 할 언어입니다. 자바스크립트 커뮤니티도 점점 더 거대해지고 있습니다. (프론트 엔드부터 서버 개발까지 한 가지 프로그래밍 언어를 사용하여 개발한다면)

• JAVA : 엔터프라이즈 소프트웨어 환경에 잘 맞는 언어입니다. 큰 규모의 소프트웨어 개발에 자바언어가 많이 사용되고 있습니다. JAVA언어를 지원하는 수많은 커뮤니티에 위해서, 지속적으로 발전되어 훌륭한 구조와 설계 기법들이 잘 갖춰져 있습니다. 

• Ruby : 빠른 개발에 널리 사용되며, 단순함과 세련된 웹 어플리케이션을 만들 수 있기 때문에 인기 있는 언어 중의 하나입니다.

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

HTTP (Hypertext Transfer Protocol)란?

• 팀 버너스리(Tim Berners-Lee)와 그가 속한 팀은 CERN에서 HTML뿐만 아니라 웹 브라우저 및 웹 브라우저 관련 기술과 HTTP를 발명하였습니다.

• 문서화된 최초의 HTTP버전은 HTTP v0.9(1991년)입니다.

• HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(protocol)입니다.

• HTTP는 계속 발전하여 HTTP/2까지 버전이 등장한 상태입니다.

 

HTTP 작동방식

• HTTP는 서버/클라이언트 모델을 따릅니다.

• 장점
  - 불특정 다수를 대상으로 하는 서비스에는 적합하다.
  - 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다.

• 단점
  - 연결을 끊어버리기 때문에, 클라이언트의 이전 상황을 알 수가 없다.
  - 이러한 특징을 무상태(Stateless)라고 말한다.
  - 이러한 특징 때문에 정보를 유지하기 위해서 Cookie와 같은 기술이 등장하게 되었다.

 

URL (Uniform Resource Locator)

• 인터넷 상의 자원의 위치

• 특정 웹 서버의 특정 파일에 접근하기 위한 경로 혹은 주소

• 요청 메소드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.

• 요청 URI : 요청하는 자원의 위치를 명시한다.

• HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전이다.

 

첫번째 줄의 요청메소드는 서버에게 요청의 종류를 알려주기 위해서 사용됩니다.

각각의 메소드 이름은 다음과 같은 의미를 가집니다.

참고로 최초의 웹 서버는 GET방식만 지원해줬습니다.

• GET : 웹 브라우저가 서버에게 정보를 요청하기 위해서 사용한다. (SELECT)

• POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)

• PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)

• DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)

• HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.

• OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.

• TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

3) 웹 Front-End 와 웹 Back-End

웹프론트엔드?

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

또한, 사용자의 요청(요구사항)에 반응해서 동작합니다.

 

웹프론트엔드의 역할

• 웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML

• 적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS

• 사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript

 

원하는 문서의 구조를 프로그래밍 언어로 표현해야 합니다.

HTML이라는 것은 그 구조를 잘 표현해 줍니다.

 

웹페이지를 꾸미기 위해서는 각각의 HTML 태그(문서의 구조를 표현한 각 조각 단위)를 꾸미기 위한 규칙이 필요합니다

CSS는 이를 표현할 수 있는 프로그래밍 언어입니다.

 

HTML,CSS를 이리저리 움직이고 변경할 필요가 있을 거예요.

JavaScript가 그걸 해줍니다.

 

백엔드(Back-End)란?

backend는 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할을 한다. 가령 쇼핑몰이라면, 상품 정보를 가지고 있고, 주문을 받아서 저장하고, 사용자가 관심있어 하는 상품을 골라주는 역할이 back-End의 역할이다.

 

백엔드 개발자가 알아야 할 것들

• 프로그래밍 언어(JAVA,  Python, PHP, Javascript 등)

• 웹의 동작 원리

• 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식

• 운영체제, 네트워크 등에 대한 이해

• 프레임워크에 대한 이해(예: Spring)

• DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)

 

[참고 자료] 웹프론트엔드 역할을 아주아주 쉽게 볼 수 있어요! http://html-css-js.com

 

 

4) browser의 동작

브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어입니다.

 

인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함하고 있습니다.

그리고 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있습니다.

브라우저마다 서로 다른 엔진을 포함하고 있습니다.

아래 그림이 대표적인 내용입니다.

사파리 브라우저에서 처리되는 webkit렌더링엔진의 처리과정

출처 https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

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

이 과정에서 Parsing 과정이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정이라고 보시면 됩니다.

DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합됩니다.

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

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

 

- 컴파일은 CPU가 알아들을 수 있는 machine code 또는 VM이 알아들을 수 있는 byte code 코드로 변환하는 단계

 

How Browsers Work: Behind the scenes of modern web browsers 의 번역본입니다.

https://d2.naver.com/helloworld/59361 

 

5) browser에서의 웹 개발

HTML 문서구조

 

알게 된 몇 가지 특징

• HTML문서는 html이라는 태그로 시작해서 html태그로 끝납니다.

• head는 무엇을 하는 걸까요?

• body는 무엇을 하는 걸까요?

• HTML은 계층적입니다.

• HTML은 tag를 사용해서 표현합니다. <tag class="title">안녕하세요</tag>

• JavaScript와 CSS가 html 안에 여기저기 존재합니다.

 

 

<!doctype html>

<html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <title>저를소개해요</title>

   <link rel="stylesheet" href="css/style.css">

   <script src="js/start.js"></script>

 </head>

 <body>

   <h1>안녕하세요</h1>

   <div>코드스쿼드 크롱이라고 합니다</div>

   <script src="js/library.js"></script>

   <script src="js/main.js"></script>

 </body>

</html>

 

HTML 문서 안에 HTML태그뿐 아니라 CSS, JavaScript코드가 존재합니다.

JavaScript 코드는 body 태그 닫히기 전에 or 닫히고 나서 위치하는 것이 렌더링을 방해하지 않아도 좋고, 

css코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋습니다.

[참고링크] 웹에서 html, css, javascript를 쉽게 테스트 할 수 있는 웹사이트 http://www.jsbin.com

사이트 추천 jsbin.com (git과 비슷한 개념으로)

6) 웹서버

웹 서버란?

• 웹 서버는 소프트웨어(Software)를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말합니다.

• 웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것입니다.

• 클라이언트 개념 - 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적(static)인 데이터이거나 동적인 결과가 될 수 있습니다.

 

새로 고침 (다시 요청)

웹 브라우저는 www.naver.com이라는 웹 서버에 접속을 했을 거고요.

해당 주소에서 기본으로 보이는 HTML 문서를 요청했어요.

그러면 웹 서버는 사용자가 요청한 HTML 문서를 웹 브라우저에게 전달합니다.

웹 브라우저는 웹 서버로부터 전송받은 HTML 문서를 읽어들인 후에 해석을 해요.

HTML 문서를 알맞게 보여주기 위해서 필요한 이미지, CSS, JavaScript와 같은 이런 리소스들에 대해서 URL을 추출해내고요. 웹 서버에게 동시에 여러 개의 리소스를 요청하게 됩니다.

웹 서버는 동시에 요청한 여러 개의 요청을 받아들여서 그 결과를 브라우저에게 전송해요.

웹 브라우저는 아까 해석했던 HTML 문서와 그리고 읽어들인 여러 개의 응답을 하나로 합쳐서 그 결과를 화면에 보이게 하는 거예요.

 

렌더링: 하나로 합쳐서 보여주는 작업

웹 서버 소프트웨어의 종류

• 가장 많이 사용하는 웹 서버는 Apache, Nginx, Microsoft IIS

• Apache웹 서버는 Apache Software Foundation에서 개발한 웹서버로 오픈소스 소프트웨어(Open-source Software)이며, 거의 대부분 운영체제에서 설치 및 사용을 할 수 있습니다.

• Nginx는 차세대 웹서버로 불리며 더 적은 자원으로 더 빠르게 데이터를 서비스하는 것을 목적으로 만들어진 서버이며 Apache웹 서버와 마찬가지로 오픈소스 소프트웨어입니다.

7) WAS

 

클라이언트/서버 구조

클라이언트(Client)는 서비스(Service)를 제공하는 서버(Server)에게 정보를 요청하여 응답 받은 결과를 사용합니다.

DBMS (DataBase Management System)

다수의 사용자가 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어입니다.

미들웨어 (MiddleWare)

클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리(배포 등)로 인해 비용이 많이 발생하는 문제가 있습니다.

비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 합니다.

 

WAS (Web Application Server)

WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 웹 애플리케이션이 동작하도록 지원하는 목적을 가집니다. * 프로그램이 동작해서 얻은 결과 → 동적인 콘텐츠라 말함

기능1 프로그램 실행 환경과 데이터베이스 접속 기능 제공, 기능 2 여러 개의 트랜잭션(논리적인 작업 단위) 관리, 기능 3 업무를 처리하는 비즈니스 로직 수행

웹 서버 vs WAS

• WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있습니다.

• 현재는 WAS가 가지고 있는 웹 서버도 정적인 콘텐츠를 처리하는 데 있어서 성능상 큰 차이가 없습니다.

• 규모가 커질수록 웹 서버와 WAS를 분리합니다.

• 자원 이용의 효율성 및 장애 극복, 배포 및 유지보수의 편의성을 위해 웹서버와 WAS를 대체로 분리합니다.