[ 개발 원리 ] Web Browser-WAS-DBMS 관계 & Web Browser , Web Server의 약속

📌 Web Browser and Web Server?

Web Browser ( 웹 브라우저 )	기본적으로 인터넷 검색 및 페이지 표시에 사용하는 소프트웨어.
Web Server ( 웹 서버 )	사용자가 웹 브라우저를 통해 요청한 문서를 사용자에게 제공하는 소프트웨어.

---

https://reinvite.tistory.com/86

식당으로 비유
주방장의 역할	WAS ( Web Application Server )
식당 주인의 역할	Web Server
손님의 역할	Web Browser , 웹 클라이언트

Web Browser으로부터 주문이 들어오면 Web Server가 주문 내역을 확인한 후 WAS에게 요리하도록 안내하고, 요리가 끝나면 Web Browser에게 음식을 가져다준다.

---

🤍 서버와 클라이언트

Server ( 서버 )	네트워크를 통해 클라이언트의 요청에 따라 정보를 제공하는 시스템. 클라이언트에게 응답을 하는 구조.
Client ( 클라이언트 )	네트워크를 통해 서버에게 정보를 제공 받는 응용 프로그램. 서버에게 요청을 하는 역할.

https://reinvite.tistory.com/84

하나의 서버에 여러 개의 클라이언트가 연결될 수 있다.

식당이라는 네트워크 공간에서 식당 주인과 손님이 만나기 때문에 손님은 여러 명이 될 수 있다.

---

🤍 웹 페이지의 동작

우리는 크롬, 사파리 등 웹 브라우저로 불리는 웹 클라이언트를 이용하여 다양한 웹 서버에 접속해서 원하는 정보를 얻는다.

웹 브라우저와 웹 서버 간 요청 & 응답

https://reinvite.tistory.com/84

ex ) 상황 예시

크롬에서 웹 사이트의 네이버 주소 (http://www.naver.com) 를 입력하면 네이버 메인 페이지가 나온다.

이때 네이버 웹 서버에서는 뉴스, 연예 등 다양한 정보를 전달해줄텐데, 웹 브라우저와 웹 서버가 보여주는 방식이 서로 약속되어있지 않았다면 어떻게 될까?

난리가 난다.

 

웹 브라우저, 웹 서버가 약속이 안되면 어떡해?

이를 위해 나타난 언어가 HTML ( Hyper Text Markup Language ) 이다.

HTML ( HyperText Markup Language )	웹 페이지에서 화면에 표시되는 제목,단락, 표 등과 같은 정보 구조뿐만 아니라 동영상, 링크 등의 정보 형식까지 표시하는 방법을 나타낸 언어. 데이터 구조 및 형식에 초점.
Web Browser ( 웹 브라우저 )	웹 서버가 전달해준 데이터 형식과 구조가 적힌 HTML 문서를 읽어 사용자가 볼 수 있게 표시해주는 것.

사용자들은 웹 페이지를 더 꾸미기 위해 HTML에 Tag가 많이 생기게 된다. 그리하여 따로 언어를 만들게 된다.

CSS ( Cascading Style Sheets )

마크업 언어인 HTML, XHTML, XML 에서 색상,폰트,크기,레이아웃 등으로 표시하는 방법을 나타낸 언어.

이렇게 때문에 CSS는 단독으로는 쓰일 수 없고, 반드시 마크업 언어인 HTML 등과 함께 사용을 해야한다.

 

이렇게 구성된 HTML은 웹 페이지만 이동할 수 있을 뿐, 웹 페이지에서 마우스 클릭을 하면 다른 이미지로 바뀔 수는 없다.

이것이 HTML 의 한계이다.

 

이를 위해 나타난 것이 자바스크립트이다. (JavaScript)

자바스크립트 ( JavaScript )

웹에서 동적 처리를 위해 사용되는 객체지향 기반의 스크립트 언어. ( JAVA와는 연관성이 없다. )

 

요약해줘

HTML ( HyperText Markup Language )	웹 정보의 구조 및 형식.
CSS ( Cascading Style Sheets )	웹 디자인 요소.
자바스크립트 ( JavaScript )	웹 동작 처리.

 

ex ) 상황예시

웹 브라우저가 웹 서버에게 "화면을 보여줘" 요청하면 HTML, CSS, JavaScript 로 짜여진 코드를 전달하여 웹 브라우저는 웹 페이지를 보여준다.

 

---

📌 JavaScript 라이브러리

jQuery	HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리.
AngularJS	구글에서 제작한 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크.
React	Facebook 에서 만든 프론트엔드용 오픈소스 프레임워크.
Node.js	확장성 있는 네트워크 에플리케이션 ( ex) 서버 사이드 ) 개발에 사용되는 소프트웨어 플랫폼
Express.js	Node.js를 위한 웹 애플리케이션 프레임워크. 주로 백엔드에서 사용.

---

DB	데이터 집합 또는 저장소
	종류 : MySQL, Oracle, MongoDB
WAS	DB 조회나 로직 처리 같은 동적인 콘텐츠를 처리하는 시스템.
	종류 : Tomcat, Jeus, JBoss 사용 언어 : PHP, JSP, ASP
Web Server ( 웹 서버 )	웹브라우저 ( 클라이언트 ) 의 요청을 받아, HTML, CSS 등으로 정적인 웹페이지를 처리하는 시스템.
	종류 : Apache, Nginx, IIS
Web Browser ( 웹 브라우저 )	웹 페이지 결과 노출.

---

📌 DB 테이블이 무엇인가?

ex ) 상황 예시

개발자에게 데이터 추출 요청이 있을 때, 오늘까지 되나요?

"해당 DB 테이블에 레코드가 많아서 쿼리하는데 시간이 걸립니다. 오늘 안에 추출은 됩니다."

DB 테이블	시스템에서 데이터가 저장되는 형태. 데이터의 종류와 형식을 확인 가능함.
	컬럼 ( Column ) : DB테이블의 열로 같은 종류로 묶인 항목 ( ex) 번호, 이름, 소속, 활동 국가 )
	레코드 ( Record ) : DB테이블의 행으로 항목이 1개씩 포함된 데이터 묶음 ( ex) Taka의 데이터 전체 )

가수 DB 테이블

번호	이름	소속	활동 국가
1	Taka	OneOkRock	Japan
2	Mark	NCT	Korea

쿼리와 SQL

쿼리 ( Query )	DB에 정보를 조회 요청하는 것.
SQL ( Structured Query Language )	관계형 DB에 정보를 관리 ( 등록/삭제/변경/조회 ) 하기 위한 언어.
	insert : 등록 update : 변경 delete : 삭제 select : 조회

쿼리는 DB에 정보 조회를 요구하는 행위이고, SQL을 이용하여 DB에서 select를 사용하여 DB 조회 명령을 할 수 있다.

---

- 웹 브라우저와 웹 서버의 차이 설명

https://byjus.com/

Difference Between Web Browser and Web Server

- Web Server, WAS, DB 설명

https://reinvite.tistory.com/

알아두면 좋은 개발용어 2 (Web Server, WAS, DB, DB테이블)

- 서버,클라이언트,HTML,CSS,JavaScript 설명

https://reinvite.tistory.com/

알아두면 좋은 개발용어 1 (서버, 클라이언트, HTML, CSS, JavaScript)