[네트워크기초이론]#11. 웹 서비스 3대 요소

문서를 가져와서 보여주고,, 문서 속 하이퍼링크를 통해서 이동하고,,

단방향 작용

TV보듯 서버에서 클라이언트로 정보가 흘러감

- 클라이언트는 주세요

- 서버는 받아라

- 문서를 계속 읽을 수 있는 단방향 형태

     - 도서관에서 책 빌려다 읽는 것 같은 것

 

CSS

문서를 꾸미고 싶음 → HTML의 성격이 많이 바뀜

HTML의 기능이 하나 추가되는데 화면에 예쁘게 보여주는 것

둘을 섞어 놓으면 유지보수하기 어려우니

화면에 보여지는 / 렌더링 부분만 따로 뗀다

그게 CSS

(HTML은 버전5, CSS는 버전3까지 나옴 -2022년)

 

CSS를 새로운 파일로 만들었고

이와 더불어 사진 같은 미디어 파일도 있음

- 문서 보내지는(날라가는) 순서도 중요!

- 파싱해서 구문 분석을 하고 렌더링을 css로 예쁘게 렌더링하고 거기 사용된 미디어도 가져다 문서를 풍부하게 만듦

HTML에서 명심할건 문서!!!!

(개발자들이 css배우면 멘붕?

머리에 좌표가 있음. 하지만 css에서 기술하는 건 좌표가 아님.)

 

-파일들이 저장되어 있다

     - 정적이다 (static)

 

문서를 가져올 수도 있지만

갱신해야될 수도 있고,,,

클라이언트 측에서 정보가 넘어가야하는 상황이 생길 수 있음

 

웹의 발전

로그인

- ID와 PWD를 입력하여 로그인함

- 로그인 버튼을 클릭하면 이는 사용자의 입력

     - 이벤트에 따라서 request가 간다

     - 이때는 POST가 날라간다

- ID를 tester라고 입력했으면 POST뒤에 관련 정보 옵션이 붙는다

tester 문자열 처리

- tester라는 문자열이 클라이언트로부터 날라옴

- 웹서버는 송수신 담당

     - 옛날에는 처리까지 담당했지만

- 이제는 처리 담당하는 구성요소가 웹에 추가된다.

     - 무언가 연산을 함

- tester문자열을 웹서버가 수신하자마자 처리 담당하는 곳으로 넘겨버린다

- 처리를 담당하는 곳에서는 문서 템플릿을 가지고 있다(~님 안녕하세요)

양방향 상호작용

- 이전 GET으로 READ만 할 때는 정보가 서버에서 클라이언트로 내려오기만 했다

- 이제는 정보가 클라이언트에서 서버로 올라가는 작업도 있다

- 이때부터 문맥(맥락)이 나오기 시작

     - 로그인 전 / 로그인 중 / 로그인 후

- 상태가 변함(전이)

- 상태가 변하는데 HTTP는 stateless

     - 프로토콜 설계 기준 상 상태 전이를 기록할 방법이 없다

- 무언가 달라졌으니 기억/기록해야한다

     - '어디까지 무얼 했더라?'

- 데이터를 어딘가에는 잔뜩 저장할 필요가 생김

DataBase

- 상태 전이 상황을 기억해야할 필요가 생김

- 그 필요를 서버쪽에서는 DB로 구현했다.

- 자료 담당

- 처리 주체와 연결되어있음

SQL

- 데이터베이스를 통제

- 검색하기 위해 SELECT .. FROM .. WHERE..을 통해 tester가 있는지 검색

- Found라면 문서 템플릿의 빈칸에 tester를 집어 넣어줌

- 이로 인해 새로운 문서 탄생 (tester님 안녕하세요)

     - 이 문서는 운영 간에 생성된 것 - 동적

     - 이 문서가 날라감

➡️ HTML 내용이 바뀜

 

Not Found의 경우

- 그에 맞는 HTML을 준비

- 해당 HTML을 전달

➡️ 경우라는 것이 등장했다

 

JavaScript

HTML이 복잡해지면서 제어라는 개념이 포함됨

그리고 렌더링을 했는데 화면이 정적..

여기에 움직임을 주자, 무언가 연산할 만한 것을 넣자

즉 제어 체계를 집어 넣자

브라우저에 새로운 기능 (연산 소프트웨어)를 넣는다

- 연산 엔진 소프트웨어를 집어 넣음

- 그걸 스크립트 언어로 만듦

- 초기에는 Mocha, 점점 발전해서 결국 JavaScript

- JavaScript의 태생은 Mocha, Live

 

JavaScript는 (클라이언트)브라우저에서 실행된다

- 나중에 보안까지 연결됨

 

클라이언트 웹 브라우저를 이루는 삼요소

1. 구문 분석 - Parser (DOM)

2. (그래픽) 렌더링 엔진

3. (연산 주체) 스크립트 엔진

 

 

클라이언트의 기억

- Cookie로 구현됨

- 속성[key + value]

- 속성 중 중요한 건 범위와 기간

➡️기록이라는 기억의 개념이 양쪽에서 다르게 구현된다