이 글은 널널한 개발자 TV 님의 강의영상을 보고 작성한 글입니다.
1. TCP/IP 연결 하고
2. Request 요청하고
3. 문서 읽고, 문서 가져오고
4. 구문 분석하고
5. 랜더링 해서 화면에 출력
약간 TV 보는 것처럼, 채널 돌리면 바로 화면에 출력해 주는 것처럼
서버에서 클라이언트로 정보가 흘러간다.
이런 작용은 "단방향 작용"이다.
1. CSS 등장
문서라는 것은, 약간 색깔도 들어가고,
제목 같은 경우는 크기도 커야하고,
중요한 내용은 밑줄도 쳐야하고
이런 것들이 필요하다.
예쁘게 꾸미는 것이 필요하다.
여기서 나온 것이 CSS -> UI를 꾸미려고 만들어짐
2. HTML, CSS
정리를 하자면,
문서(HTML)의 내용을 분석하는 것 OK(구문 분석, DOM(자료구조)형성)
하지만, 화면 꾸미고 싶어짐 -> CSS 등장 + 컨텐츠(like 사진)
이것들, HTML, CSS 같은 리소스들은
서버에 저장되어 있다. -> 이런것을 "정적(Static)이다" 라고 한다.
3. 요청 방식의 변화
단순히 클라이언트에서 서버에 "문서 보여줘"라고 요청하고,
서버에서 단방향 작용 으로 문서를 보여주는 것만 아니라,
시간이 지남에 따라, 요청하는 방식이 바뀜.
즉, 클라이언트에서도 웹 서버에 요청을 하는 방식을 바꿨음.
예를 들어, 로그인(ID, Passwd필요) 할 경우.
"ID, Passwd" 넣고, 로그인 버튼을 "클릭"한다.
이렇게 로그인이 완료가 될 때, 서버에서 문서를 넘겨 줄 수 있게 된다.
(로그인 실패면, 서버에서 다음 문서를 안줌)
이처럼 로그인을 할 때, 서버는 문서를 갱신 시켜야 할 수도 있다.
즉, 클라이언트에서 서버에 데이터(ID, passwd 등)를 서버에 보내서 다음 요청을 기다려야 한다.
어? 클라이언트에서 서버에 뭔가를 보내면서 "요청"을 하고
서버에서는 뭔가를 받으면서 어떻게 반응할지 고민하고, 이에 따른 "응답"을 한다.
이런 것을 "양방향 상호작용"이라고 한다.
4. 데이터 처리
그리고 다시 로그인 하는 예를 보면,
클라이언트에서 로그인을 할 때 ID: "Hello World", Passwd: "1234", 이렇게 했다고 치자.
그렇다면, 이제 서버에서는 이런 ID, Passwd 같은 데이터를 "처리"를 한다.
원래 서버는 송/수신 담당을 한다.(정보를 주고 받고)
그리고 예전엔, "처리"도 서버에서 다 진행을 했는데,
"처리"만 하는 구성요소가 추가가 된다.
5. 양방향 상호작용
그림 다시 가져와서 보자.
이렇게 "양방향 상호작용"이 되어 버리면,
이때부터, 뭔가 "문맥"이 나오기 시작한다.
예를 들어, "로그인 전", "로그인 중", "로그인 후", 이런 "상태"가 있고
이런 "상태" 에서는 뭔가를 "전이"한다.(상태가 변한다.)
상태가 있고, 전이 (변화) 한다.
그런데 HTTP는 그림 보면 State less이다.
그래서 프로토콜의 설계 기준상
이 "상태"의 "변화"를 "기억"하거나 "기록"을 해놔야 한다.
6. 기억(DB 등장)
다시 말하면, 프로토콜(http)는 상태를 저장(기억,기록)할 방법이 없다.
뭐 예를 들면,
우리가 회원가입을 하면, 회원가입 정보들이 http에서는 이런 것을 저장(기억, 기록)할 방법이 없다.
그래서 이런 데이터(회원가입 정보 등)를 "기억" 혹은 "기록"할 필요하게 되었는데,
여기서, 등장 하는 것이 DB(데이터 베이스)가 생겨난 것이다.
7. 처리와 기억의 연결 방식
로그인 할 때, ID와 Passwd 입력한다.
서버에 요청이되고, ID와 Passwd를 처리(연산을 하고)
"처리"된 데이터를 "데이터 베이스(기억하는 곳)"에 물어 본다.
그 전에, "처리하는 곳"과 "데이터 베이스(기억하는 곳)"이 연결되어 있는데,
연결 방법은 엄청 다양하다.
뭐, 일단 어떤 방법이든 간에 연결이 되어있다고 하면,
데이터 베이스를 통제를 할 때는 "SQL(Structure Query Language)"를 사용한다.
다시 돌아와서, 데이터가 DB에 있는지 물어보고,
있다면, Found하고, "~님 Hi" 라는 문서에서, "Hello World님 Hi" 라는 문서를 "생성"을 한다.
그리고 이것을 클라이언트한테 보내주고, 클라이언트는 이를 화면으로 본다.
없다면, Not Found 하고, 그에 대한 문서를 보내준다.
8. 제어
3요소를 다시 보자.
자료구조? HTML 문서로 화면에 뭐가 나타남.
UI? CSS 로 예쁘장하게 꾸밈
이렇게 랜더링되어서 화면에 뭔가 나타나는 건 좋은데,
뭐 블로그나 카페같은거, 네이버 이런거 생각해보면
로그인 하면, 화면 전환 샥샥 되고, 게시판에 글 쓰고 뭐 다양하게 하고 싶은데,
어떻게 하지?
제어!!!!! 를 살펴보자.
이 제어는 뭔가? 갑자기?
뭔가 동작하고, 움직이고 이런거를 추가하려고 이 "제어"를 하는 것이다.
단순히, 화면에 뭐 출력하고, 색깔 입히고 이런 것이 아닌,
움직이게 하고 싶은데,
아 그러면 "연산"이 필요하겠구나.
다시 말해, 브라우저에 이제, 자료구조(HTML), UI(CSS)의 개념에 이어서 새로운 개념을 추가를 한다.
바로 연산을 하자!
즉, S/W를 하나 넣게 된다.
이런 연산을 해 줄 수 있는 엔진을 하나 만드는데,
이 엔진을 Script 언어로 만드는데, 처음은 Mocha이다.
근데, Live 로 바뀌고
마지막으로, 나온 것이 "JAVA Script"이다!!!!!!
중요!!!!
(자바 스크립트는 일단 브라우저에서 실행이된다.)
(실행은 클라이언트 브라우저에서 한다.)
즉, 정적이고 재미도 없던 HTML,CSS에서
뭐 로그인하는 기능도 생기고, 게시판에 글도 쓸 수 있고 하는 등등
이런 기능들을 추가했는데, 연산 기능이다.
연산 기능을 수행하는 엔진이 지금의 "Java Script"이다.
그래서 위에서 브라우저에서 로그인 요청하고,
그에 따라서 처리하는 곳 갔다가, DB 갔다가 이렇게 되는거다.
이렇게, 재미없던, HTML과 CSS , 정적인 것에서
JavaScript를 입혀서 동적인 것으로 만든다.
9. Cookie
Server에서는 "기억"을 Database로 구현을 했다.
그렇다면 Client에서는 "기억"을 Cookie로 구현을 한다.
Cookie = key + value + [온갖 속성(like 범위+기간(시간)]
번외
브라우저 입장에서의 실행되는 순서
1. 구문 분석 -> DOM (자료구조) 형성
2. 랜더링 -> CSS(UI) + 컨텐츠 자료(사진 같은 것)
3. S/W 연산 -> JS
Reference
https://www.youtube.com/@nullnull_not_eq_null (널널한 개발자님 URL)
https://www.youtube.com/watch?v=byR3BcrChT8&list=PLXvgR_grOs1BFH-TuqFsfHqbh-gpMbFoy&index=11 (강의 영상)
보안 공부를 하는 학생입니다.