[boost course] 2. Web 개발의 이해

hyeon·2022년 5월 2일
0

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

생각해보기

  1. 프론트 엔드부터 서버 개발까지 한 가지 프로그래밍 언어를 사용하여 개발한다면 어떤 언어를 사용하는 것이 좋을까요?
    => javascript : javascript는 프론트 개발에 주로 쓰이는 언어이지만 node.js와 같이 서버단까지 js를 사용하여 개발할 수 있게되어 프론트와 백 모두 javascript로 해결할 수 있다.

  2. 다양한 라이브러리, 쉬운 개발, 읽기 쉽고 적은 코드를 장점으로 한다면 어떤 언어를 사용하는 것이 좋을까요?
    => python : 다양한 라이브러리가 존재하고 입문자들이 접근하기 쉽고 짧은 코드로 개발 할 수 있다.

  3. 프로그래밍 언어에게 좋은 커뮤니티가 있다는 것은 어떤 장점을 가질까요?
    => 지속적으로 발전할 수있다.

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

인터넷(네트워크 통신)의 이해

인터넷!= WWW(WORLD WIDE WEB)
하나의 물리적 컴퓨터에는 여러 서버가 동작할 수있는데 각각의 서버들은 포트라는 값으로 구분되어 동작한다.

인터넷은 수많은 네트워크들의 결합체이다. 이러한 것들은 TCP/IP라는 약속으로 연결되어있다.

HTTP (Hyper Text Transfer Protocol)

인터넷 중 웹에서 서로 통신하기위해 사용함
=> 서버와 클라이언트가 인터넷상에서 데이터를 주고 받기위한 프로토콜을 말함. 어떤종류의 데이터도 전송할수있도록 설계되어있음 (이미지,동영상등등)

작동방식

서버-클라이언트 모델 따름
클라이언트가 요청을 보내고 -> 서버가 응답해준다

특징

무상태(Stateless) 프로토콜이다 = 응답을 해준 후 서버-클라이언트간의 연결이 끊어지기 때문에 이전 클라이언트와 같은 클라이언트인지 클라이언트의 이전상황을 알 수 없다.

=> 장점

불특정 다수가 사용하는 서비스에 적합함. (계속 연결이 되어있는게 아니기때문에 클라이언트와 서버가 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있음)

단점

클라이언트의 이전상황을 알 수 없다.(쇼핑몰에서 이전 쇼핑한 품목을 알 수없다.) => 이를 해결하기 위해서(정보를 유지하기 위해서) Cookie와 같은 기술들이 등장하게 됨

URL(Uniform Resource Locator)

http://www.naver.com/docs/index.html
접근 프로토콜 종류://자원이 있는 서버의 IP주소 혹은 도메인주소,포트번호/자원의 위치(문서의경로)/문서이름

<IP와 포트의 차이점>

IP: 집주소(하나의 컴퓨터에는 하나의 IP)
포트: 방 (컴퓨터에는 포트번호가 다른 포트가 여러개있다)

HTTP 동작 방식

요청 헤더의 첫번째줄 GET/servelet/query?a=1-&b=90 HTTP/1.1은
요청 메서드(GET,POST,PUT,DELETE등)/요청URL(요청하는 자원의 위치)/HTTP버전
위의 사진에 요청 바디가 빈칸인데 GET 방식은 요청할때 필요한 자원같은것을 URL에 붙여서 가기때문에 바디가 없다. (POST나 PUT을 사용할때는 있다)

응답 헤더의 첫번째 줄 HTTP/1.1 200 OK
응답 HTTP프로토콜의 버전 응답코드 응답 메시지
날짜, 웹서버이름과 버전, 컨텐츠 타입,캐시제어방식, 컨텐츠 길이
~빈줄~
응답바디 : 실제 리소스 데이터가 나오는 부분이다.

<CRUD제외 요청메소드>

HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

생각해보기

  1. HTTP에 S가 붙은 HTTPS는 어떤용도로 사용되는 것인가요 HTTP와 무엇이 다른가요?

HTTPS(Hyper Text Transfer Protocol Secure)는 기존 HTTP에서 Secure이 붙은 데이터 암호화가 추가된 프로토콜이다. http는 80번 포트를 사용하지만 https는 443번 포트를 사용하고 네트워크 상에서 중간에 제 3자가 정보를 볼 수없도록 지원한다.

HTTPS는 대칭키 암호화와 비대칭키 암호화를 모두 사용하여 빠르고 안정성있다. 연결과정(Hand-Shaking)에서 서버-클라이언트 간에 세션키(데이터암호화를 위한 대칭키)를 교환한다. 대칭키인 이유: 데이터 간의 교환에는 빠른 연산속도가 필요하므로 세션키는 대칭키로
세션키를 교환하는 과정에서 비대칭키가 사용된다.
=> 처음 연결을 안전하게하기 위하여 비대칭키가 사용되고 이후 빠른 데이터 교환을 위해 대칭키가 사용된다.

HTTP와 차이는 보안의 정도, 암호화 복호화과정에서의 속도차이(오늘날 거의 차이가 없다고한다), 인증서 발급을 위한 추가비용이 발생이 있다.

=> HTTP는 노출되어도되는 단순정보를 다룰때 HTTPS는 민삼한 데이터를 다룰때 사용하면 된다.
참고 블로그

3. 웹 Front-End와 웹 Back-End

Front-End : 사용자에게 웹을 통해 다양한 콘텐츠(리소스)를 제공한다. 또한 사용자의 요청에 반응하여 동작한다.

Back-End(Server Side) : 정보를 처리하고 저장하며 (클라이언트의)요청에 따라 정보를 내려주는 역할을 한다.

4. Browser의 동작


사진출처
UserInterface : 탭부분이나 ㅡㅁx부분들
Browser engine : 브라우저 소프트웨어를 동작시켜주는 핵심엔진
Rendering engine : 화면에 위치를 잡고 색칠을해주는 엔진 (파이어폭스의 gecko, 사파리의 webkit, 크롬오페라는 blink)
Data Persistence: 브라우저도 일부의 데이터를 캐시를하고 저장을 하는데 이를 관리하는공간
Networking module: URL을 해석한다음 통신하기위한 모듈
JavaScript Interpreter: 자바스크립트 해석
UI Backend: ui영역을 처리할 수있는 백엔드 영역

  1. HTML을 파싱해서 DOM tree로 건설한다.
  2. 렌더 트리를 만든다
  3. 렌더 트리를 기준으로 css를 합쳐서 화면을 어떻게 구성할지 정함
  4. 화면에 그림

렌더링 한다: 여러 이미지나 html css js 같은것들을 하나로 합쳐서 보여주는 작업

DOM Tree(Document Object Model)

마크업들이 위 그림과 같이 Tree 구조로 저장되어 브라우저가 처리(파싱: 토큰단위로 잘라서 의미를 해석한 후 실행)하게 되는데 이를 DOM Tree라고 한다.

5. 웹서버

웹서버란

보통 apache와 같은 소프트웨어를 말하지만 웹서버 소프트웨어가 동작하는 컴퓨터를 말하는경우도 있음 클라이언트가 요청하는 HTML문서나 각종 Resource를 전달하는 역할을 것이다.
웹브라우저또는 웹크롤러가 요청하는 리소스는 정적(이미지,html,css,js과 같이 컴퓨터에 저장되어있는 파일)이거나 동적(웹서버에 의해서 실행되는 프로그램을 통해 만들어진 결과물)일수있다.

*웹크롤러 : 다른 웹사이트정보를 읽어올때 사용하는 것(구글검색 ->네이버블로그)

6. WAS(Web Application Server)

DBMS

서버 형태로 서비스를 제공하기 때문에 이러한 DBMS에 접속해서 동작하는 클라이언트 프로그램이 한때 많이 만들어졌다. 클라이언트 프로그램이 커지고 로직이 많아진다는 문제점과 로직이 변경되면 재배포 되어야하는 문제점이 있었다.(보안 나쁘다) 그래서 미들웨어가 등장

미들웨어

클라이언트와 DBMS 사이에 또 다른 서버를 두는 것 이 서버가 미들웨어이다.
클라이언트는 단순히 요청만 중앙에있는 서버(=미들웨어)로 보내고
미들웨어에서 대부분의 로직을 수행한다. 이때 데이터를 조작할 일이 있으면 DBMS에게 부탁함 그결과를 클라이언트에게 보냄

WAS

동적인 컨텐츠(프로그램이 동작해서 얻은결과)를 제공하기 위해 만들어진 일종의 미들웨어로 웹클라이언트(보통 웹브라우저)의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하는 목적을 가진다.

역할
1. 프로그램 실행환경과 DB 접속 기능을 제공한다.
2. 여러개의 트랜잭션을 관리한다.
3. 업무를 처리하는 비즈니스 로직을 수행한다.

웹서버의 기능도 가지고 있다. 하지만 웹서버에서는 정적 컨텐츠만 처리하도록해서 WAS까지 가지않더라도 빠르게 보내줄수있게 해야하고 WAS에서 동적인 컨텐츠를 만들어서 제공해야한다. 대용량일때 WAS와 WEB SERVER를 구분해서 쓰면 좋다. (장애 극복 기능 : WAS에 문제가 생겼을때 일단 WAS앞단의 WEB서버가 WAS를 사용못하게 한다)

profile
남기고 싶은 개발자입니다 :>

0개의 댓글