1. 웹 프로그래밍을 위한 프로그램 언어들
저급언어
- 기계 중심의 언어 (Machine Language - 2진수)
- 전기신호인 켜졌다(1)와 꺼졌다(0) 두가지 상태 값으로 (2진수로) 동작한다.
- 숫자로만 된 프로그래밍 언어는 사용과 유지보수가 굉장히 어려웠기에 1:1로 대응하는 기호를 만들고, 그 기호로 프로그래밍을 하였다. 기호로 작성된 언어를 어셈블리어(Assembly Language)라고 한다.
- 기호로 작성된 프로그램을 기계가 알아들을 수 없기에 컴파일러(Compiler)를 이용하여 기호로 작성된 문장들을 원래의 숫자로 바꾸었다.
고급언어
- 사람 중심의 언어, 사람이 좀 더 이해하기 쉬운 문법으로 프로그래밍을 한다.
- 작성된 소스코드를 컴파일러(Compiler)를 이용하여 번역한다. (컴파일 한다)
- 언어의 예시 : FORTRAN, COBOL, PROLOG, C, Erlang, Lisp, Swift, Kotlin, Clojure, Python, JAVA
티오베
- https://www.tiobe.com/tiobe-index/ → 언어 순위를 확인할 수 있다.
- 소프트웨어 품질 관련 서비스를 제공하는 기업
2. 웹의 동작(HTTP 프로토콜)
인터넷(네트웍 통신)의 이해
- 물리적인 하나의 컴퓨터에는 여러 개의 서버가 동작할 수 있고 각각의 서버들은 포트라는 값으로 구분되어 동작한다.
EX) 웹 - 80번 포트 / 이메일 - 25번 포트 / FTP - 21번 포트 - 인터넷 : 네트워크들의 네트워크라고 할 수 있다. (네트워크들의 결합체)
- 인터넷은 TCP/IP라는 약속으로 연결되어 있다.
- 인터넷 중 웹은 서로 통신하기 위해 HTTP(Hypertext Transfer Protocol)를 사용한다.
HTTP(Hypertext Transfer Protocol)
- 서버와 클라이언트가 인터넷상에서 데이터를 주고받기위한 프로토콜(규약)
- 어떤 종류의 데이터도 전송할 수 있도록 설계되어 있다.(이미지, 동영상, 오디오, 텍스트문서 등)
HTTP 작동방식
-
서버/ 클라이언트 모델
-
무상태 프로토콜 (Stateless Protocol): 서버는 클라에게 응답을 하고 난 후 연결을 바로 끊는다. 클라가 다음 것을 요청하더라도 이 클라가 아까 요청했던 클라인지 알수 없다.
✨ 장점: 불특정 다수를 대상으로 하는 서비스에 적합. 계속 연결된 형태가 아니므로 최대 연결 수 보다 훨씬 많은 요청과 응답을 처리할 수 있다.
✨ 단점: 클라이언트의 이전 상황을 알 수 없다. 이에 정보를 유지하기 위해서 쿠키와 같은 기술이 등장하였다.
URL(Uniform Resource Locator)
- 인터넷 상의 자원의 위치를 나타내기 위해서 사용된다. (문서, 이미지, 동영상 등)
- 특정 웹 서버의 특정 파일에 접근하기 위한 경로 혹은 주소
HTTP
요청 데이터 포맷
- 요청 헤더 부분
- 요청 메서드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.
- 요청 URI : 요청하는 자원의 위치를 명시
- HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전
-이후에 여러 줄의 헤더정보가 나온다. (각 줄은 라인피드(LF)와 캐리지리턴(CR)로 구분된다. - 빈줄
- 요청 바디 부분
- GET 방식의 경우 요청할 때 가지고 가야할 자원을 URI에 붙여서 가기 때문에 GET 방식은 요청 바디 부분이 비어진 상태로 간다.
-요청 메서드가 POST이나 PUT이 사용될 경우 바디가 요소가 들어간다.
응답 데이터 포맷
- 응답 헤더 부분
- 첫 줄에 반드시 응답 HTTP프로토콜의 버전이 나오고 뒤이어 응답코드, 응답 메세지 등으로 나온다.
-나머지 헤더 부분에는 날짜, 웹서버 이름, 버전, 콘텐츠타입, 캐시제어방식, 콘텐츠 길이 값 등이 작성된다. - 빈줄
- 응답 바디 부분
- 실제 응답 리소스 데이터가 나오는 부분
요청 메서드
- 서버에게 요청의 종류를 알려주기 위해 사용된다.
- GET : 정보를 요청하기 위해서 사용한다. (SELECT)
- 보안에 취약 - POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)
- PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
- DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
- HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
- OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
- TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.
HTTPS (HTTP over Secure Socket Layer)
- 기존의 HTTP는 중간에 정보를 가로챌 수 있기 때문에 보안성의 문제를 해결하기 위해 HTTPS가 등장하였다.
- 소켓 통신에서 일반 텍스트를 사용하는 대신, SSL이나 TLS 프로토콜을 통해 세션 데이터를 암호화시켜 데이터의 적절한 보호를 보장한다.
- 보안성을 높인 대신 암호화/복호화로 인해 속도가 느려지나 요즘에는 네트워크 기술의 발달로 인해 체감상 속도의 차이가 크지 않고, 사용자 정보같은 중요한 정보를 다룰 때 HTTPS가 보안성에서 우수하다.
3. 웹 프론트엔드와 백엔드 (FE/BE)
프론트엔드(Front-end/ Client side)
-
사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등 - 리소스)을 제공
-
사용자의 요청(요구사항)에 반응해서 동작
- HTML(Hypertext Markup Language) : 웹의 구조적 요소- CSS (Cascading Style Sheets): 디자인적 요소
- JavaScript : 동적인 제어 요소
백엔드(Back-end/ Server side)
- 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할
- 사용 언어 예 : JavaScript, Java, PHP, Python 등
4. 브라우저의 동작
브라우저
- 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어
- 인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함하고 있다.
- 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있다.
- 브라우저마다 서로 다른 엔진을 포함
파싱
- 일종의 컴파일러, 토큰 단위로 다 잘라서 의미를 해석한 다음에 의미에 따라서 어떤 실행을 해주는 것.
참고 페이지
- How Browsers Work: Behind the scenes of modern web browsers(원문)
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ - 브라우저는 어떻게 동작하는가?(번역)
https://d2.naver.com/helloworld/59361
5. Browser에서의 웹개발
HTML 문서의 구조
- HTML 문서는 로 시작해서 로 끝난다.
- head 태그 안에는 문서에 대한 자세한 정보 포함한다.
- JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아 좋다.
- css코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋다.
6. 웹서버
- 보통 소프트웨어를 말하지만 웹서버 소프트웨어가 동작하는 컴퓨터를 말한다.
- 웹서버의 핵심 기능 : 클라이언트(웹브라우저)가 요청하는 HTML문서나 각종 리소스를 전달하는 것
- 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장되어있는 정적(static)인 데이터이거나 동적인 결과가 될 수 있다.
- 정적인 데이터 : 이미지, HTML 파일, CSS파일, JavaScript파일 등 컴퓨터에 저장되어있는 파일- 동적인 결과 : 웹 서버에 의해서 실행되는 프로그램을 통해서 만들어진 결과물
웹 서버 소프트웨어의 종류
- 가장 많이 사용하는 웹서버: Apache, Nginx, Microsoft, Google 웹서버
- Apache : 오픈소스 소프트웨어, 대부분의 운영체제에서 설치 및 사용 가능
- Nginx : 차세대 웹서버로 불리며 더 적은 자원으로 더 빠르게 데이터를 서비스 하는 것을 목적으로 만들어진 서버, 오픈소스 소프트웨어
7. WAS (Web Application Server)
미들웨어(MiddleWare)의 출현 배경
- DataBase Management System이 출현하고 DBMS는 서버형태로 서비스를 제공했기에 DBMS에 접속해서 동작하는 클라이언트 프로그램이 한때 많이 만들어졌다.
- 클라이언트의 로직이 많아지고 클라이언트 프로그램의 크기가 커진다는 문제점이 발생하였다.
- 또한 프로그램 로직이 변경되면 클라이언트가 매번 배포되어야 했고 대부분의 로직이 클라이언트에 포함되어 배포되기 때문에 보안이 나쁘다는 문제점이 발생하였다.
미들웨어
- 클라이언트와 DBMS 사이에 또 다른 서버를 두는 방식
- 클라이언트는 단순히 요청만 미들웨어에 보내고 미들웨어에서 대부분의 로직을 수행
- 미들웨어에서 데이터를 조작할 일이 있을 때 DBMS에 요청하고 결과를 클라이언트에 전송한다.
⇒ 클라이언트의 복잡한 로직이 사라지고 단순히 화면에 결과만 보여주면 되므로 클라이언트는 사용자로부터 입력만 받아서 미들웨어에게만 보내는 역할만을 수행하기에 크기가 매우 작아진다. (입력과 출력만 담당) - 프로그램 로직이 변경되어도 모든 클라이언트를 다시 배포할 필요 없이 미들웨어만 변경하면 된다는 장점을 가진다.
WAS(Web Application Server)
- 일종의 미들웨어, 웹 클라이언트의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하는 목적을 가진다. (Ex: Tomcat)
- WAS의 기능
1. 프로그램 실행 환경과 데이터베이스 접속 기능 제공- 여러개의 트랜잭션(논리적인 작업 단위)을 관리
- 업무를 처리하는 비즈니스 로직을 수행
- 웹서버의 기능
웹서버 vs WAS
- 웹서버는 보통 정적인 콘텐츠를 웹브라우저에게 전송하는 역할, WAS는 프로그램이 동작해서 얻은 결과인 동적인 결과를 웹브라우저에게 전송하는 역할
- WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있다.
- 현재는 WAS가 가지고 잇는 웹 서버도 정적인 컨텐츠를 처리하는데성능상 큰 차이가 없다.
- 웹서버가 WAS 앞단에 있으면 좋은 이유 : 웹서버는 상대적으로 WAS보다 간단한 구조로 만들어져 있고 WAS 자체에 문제가 발생하는 경우 WAS를 재시작 해야하는데 문제가 있는 WAS를 재시작 할 때 앞단의 웹서버에서 해당 WAS를 이용하지 못하도록하고 WAS를 재시갖ㄱ하면 사용자는 WAS의 문제가 발생하였는지를 모르고 이용할 수 있다.
- 따라서 규모가 커질수록(대용량 웹 애플리케이션의 경우) 웹서버와 WAS를 분리한다. 장애극복기능(failover) 목적 - 무중단 운영
병아리 분석가