티스토리 뷰
- 웹 프로그래밍에서 주로 쓰이는 인기 언어들
> Python
> PHP
> Javascript: 브라우저에서 동작하는 언어로 출발했으나 지금은 백엔드에서도 널리 쓰임 (node.js)
> Java: 큰 규모의 엔터프라이즈 환경에서 많이 쓰임
> Ruby: 단순하고 세련된 웹 애플리케이션을 빠르게 만들 수 있다
- HTTP (HyperText Transfer Protocol)
클라이언트-서버 모델을 따르는, 인터넷상에서 데이터를 주고받기 위한 프로토콜 (규약).
> 장점
불특정 다수를 대상으로 하는 서비스에 적합
클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 (Stateless), 최대 연결 수보다 훨씬 많은 요청을 처리할 수 있음
> 단점
Stateless의 한계: 클라이언트의 이전 상황을 알 수가 없음. (그래서 정보를 유지하기 위해 필요한게 Cookie, Session)
- HTTP 요청 메시지: 헤더
아래와 같이 요청 메서드 - 요청 URI - HTTP 버전이 순서대로 온다
GET /servlet/query?a=10&b=30 HTTP/1.1
요청 메서드의 종류:
> GET: 정보를 요청 (SELECT)
> POST: 정보를 입력 (INSERT)
> PUT: 정보를 업데이트 (UPDATE)
> DELETE: 정보를 삭제 (DELETE)
> HEAD: HTTP 헤더 정보만 요청. 해당 자원이 존재하는지, 서버에 문제가 없는지 테스트하는 용도로 사용
> OPTIONS: 웹서버가 지원하는 메서드의 종류를 요청
> TRACE: 클라이언트의 요청을 그대로 반환. 서버 상태를 확인하기 위한 테스트 용도로 사용
- 웹 프론트엔드
사용자에게 웹을 통해 다양한 컨텐츠를 제공하고, 사용자의 요청에 반응해 동작하게 만드는 것
> 웹 컨텐츠를 보여주기 위해 구조를 만들어야 함: HTML
> 적절한 배치와 디자인을 제공해야 함 (HTML 태그를 꾸미기 위한 규칙): CSS
> 사용자와의 소통이 필요 (사용자의 입력에 따라 HTML, CSS를 움직이고 변경): JavaScript
- 웹 백엔드
정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할.
예컨대 쇼핑몰이라면 상품 정보를 가지고 있고, 주문을 받아서 저장하고, 사용자에게 상품을 추천해주는 등의 역할.
클라이언트가 "1번 페이지의 상품 리스트를 보여주세요" 라고 하면 그걸 DB에서 긁어와서 클라이언트한테 줘야 한다.
백엔드 개발자가 알아야할 것들:
> 웹 프로그래밍 언어
> 웹의 동작 원리
> 알고리즘, 자료구조 등 프로그래밍 지식
> 운영체제, 네트워크 등
> 프레임워크에 대한 이해
> DBMS에 대한 이해와 사용방법
- 웹 브라우저의 동작
웹 브라우저에는 데이터를 해석해주는 Parser, 데이터를 화면에 표현해주는 Rendering Engine이 포함되어 있다
브라우저의 구성요소 (Components):
> User Interface
> Browser Engine: 브라우저 SW를 동작시켜주는 핵심 엔진
> Rendering Engine
> Data Persistence: 캐시 등 데이터를 저장하는 역할
> Networking: HTTP를 통해 서버와 통신
> JavaScript Interpreter: 자바스크립트 코드를 해석
> UI Backend: UI 영역을 처리할 수 있는 백엔드 영역
- 렌더링 엔진의 일반적인 동작 과정
1) HTML을 파싱하여 DOM Tree를 만든다 (구조에 대한 정보를 담고 있음)
2) CSS를 파싱하여 CSS Tree를 만든다 (스타일에 대한 정보를 담고 있음)
3) CSS Tree, DOM Tree를 매칭하여 Render Tree를 만든다 (구조+스타일에 대한 정보를 담고 있음)
4) 화면에 Render Tree를 그린다
- 렌더링 엔진의 종류: 브라우저마다 다름
> 사파리: Webkit
> 파폭: Gecko
> 크롬, 오페라: Blink (크롬은 Blink를 포함하는 '크로미움' 을 사용)
- DOM Tree
HTML 코드를 보면 <html> 안에 <body>, 그 안에 또 무슨 태그... 이런 식으로 태그들이 계층구조를 가지는데 이걸 트리로 표현한 것이 DOM Tree
- CSS Tree
CSSStyleSheet라는 최상위 객체 아래에 CSSRule, 각 룰은 Selectors와 Declaration으로 구성
> Selector: 태그 이름, 클래스 이름처럼 대상을 지정함 (ex: p.div)
> Declaration: 그 대상에 지정할 속성을 표현함 (ex: margin-top:3px - key / value로 구성되어 있으며 콜론으로 구분)
- 브라우저에서의 웹개발
크롬 개발자 도구: Ctrl + Shift + I
크롬에서 직접 코딩을 하는건 아니고, HTML/CSS/JS 코드 디버깅을 위해서 자주 쓴다
Network 탭 > www.xxx.com > Response 탭: 서버에서 첫번째로 보내준 코드.
<script>, <style>: HTML 안에 자바스크립트, CSS 코드가 중간에 여기저기 들어갈 수 있음
> CSS 코드는 <head> 안에, 자바스크립트 코드는 <body> 가 끝나기 직전이나 끝난 다음 넣어주는 것이 일반적임 (자바스크립트 코드가 body 중간에 나오면 이걸 해석하느라 렌더링이 느려질 수 있음)
> CSS, 자바스크립트 코드가 길어질 경우 따로 파일로 만들어서 link로 연결시켜줄 수 있다. 이렇게 하면 그 줄을 만났을 때 브라우저는 서버로 해당 파일에 대한 요청을 보내게 됨. 받으면 바로 그걸 해석해서, 바로 실행해야 할 자바스크립트 코드가 있을 경우 바로 실행.
<meta>: 이 사이트가 어떤 사이트다, 라는걸 브라우저에게 알려주기 위함
jsbin.com: 웹에서 웹 프로그래밍 하고 저장, 공유할 수 있는 사이트
- 웹 서버
클라이언트가 요청하는 HTML 문서나 각종 리소스를 전달하는 역할을 하는 소프트웨어, 또는 그 소프트웨어가 동작하는 컴퓨터
> 가장 많이 사용되는 웹 서버: Apache, Nginx, Microsoft IIS
리소스는 정적인 것과 동적인 것이 있다.
> 정적인 데이터: 이미지, HTML/JS/CSS 파일 등 컴퓨터에 저장되어 있는 파일
> 동적인 결과: 웹 서버에 의해 실행되는 프로그램에 의한 결과물
개발자 도구에서 Network 탭으로 들어가보면 받아온 파일들의 리스트와 정보를 볼 수 있다.
- 웹 애플리케이션 서버 (WAS)
과거에는 둘을 분리하지 않았고 현재도 WAS가 웹 서버의 기능을 자체적으로 내장하고 있는 경우도 많다.
그러나 프로젝트의 규모가 커질수록 웹 서버는 정적 컨텐츠를 처리하고 WAS는 동적 컨텐츠를 처리하도록 역할을 분리하는 경우가 많음 -> 자원 이용의 효율성, 장애 극복, 배포 및 유지보수의 편의성 증가
> failover 예시: 사용하던 WAS에 문제가 생겨서 재시작해야 할 경우, 앞단의 웹 서버에서 그걸 인식해서 재시작될때까지 다른 WAS를 이용하도록 함. 웹 서버보단 WAS가 무거워서 재시작하는데도 오래 걸린다.
> 등장 배경
초창기 웹 서버는 정적인 데이터만 다뤘으나, 점차 동적인 기능을 요구하게 됨
웹 서버에서 프로그래밍을 하는걸 CGI라고 불렀는데, 단순한 프로그램은 괜찮았지만 규모가 커지면서 역할 분리가 필요해짐. 특히 이런 프로그램들 대부분이 DBMS와 연관
-> 클라이언트와 DBMS 사이에서 미들웨어 역할을 해주는 WAS의 등장