- (1) 반응형 웹, CSS
- (2) 프로토콜
- (3) 네트워크
- (4) 서버
-
(1) 반응형 웹, CSS
- 예전엔 데스크탑(1025*725) 기준으로 화면 구현
- 표준도 잡히지 않았기 때문에 IE 버전이나 서로 다른 브라우저 유형에 따라 구현한 화면이 제대로 보이지 않는 현상 발생
- 이를 보완하기 시작한 것이 반응형 웹
- 요즘은 반응형 웹을 네이티브 웹이라고 지칭
- HTML5, CSS3 의 영역
-
(2) 프로토콜
-
HTTP : Hyper Text Transfer Protocol
- HTTP 기본 포트는 80
- 크롬 브라우저에서 웹 서버로 요청을 보낼 때, 80번 입구쪽으로 보냄
- 이 요청을 받은 웹 서버는 크롬 브라우저에 HTML, JS, Data 담아서 응답을 보냄
- 요청과 응답은 헤더/바디 영역으로 구분
- (MDN HTTP 상태 코드 문서 참조)
- 위와 같은 텍스트 형태의 요청과 응답이 HTTP
-
HTTPS : Hyper Text Transfer Protocol Security
- 카드번호와 같은 민감한 정보가 텍스트 형태로 오가면 안되기 때문에, 요청과 응답을 암호화하여 보호하는 것이 HTTPS
- HTTPS 기본 포트는 443
-
FTP
-
노트북에서 웹 서버에 올리는 것 FTP(File Transfer Protocol)
-
FTPS(File Transfer Protocol Security)
-
이 밖에도 모든 장치에서 데이터 올릴 때 프로토콜 존재
- 키보드, 마우스에서 웹 서버에 데이터 올릴 때도 프로토콜이 있음
-
-
(3) 네트워크
-
IP
- 비유하자면 집주소
- 인터넷에 연결된 장치가 웹 서버와 통신하는데 사용
- 공인IP : 국제적으로 통용되는 IP. 중복되면 안됨
- 사설IP : 내부 네트워크망에서 IP 자동 할당
-
GateWay
- 인터넷망으로 통하기 위한 문
- IP주소로 통신하는 서버
- 네트워크망에 연결되어 있음
- 가정에서는 GateWay 역할을 하는게 모뎀
-
DNS
- Domain Name Service
- 전화번호부 역할
- DNS 주소가 브라우저에 들어오는 순간, 웹 브라우저는 각 DNS 서버에 해당하는 IP 주소를 인식해서 요청, 응답 처리를 하는 것
-
-
(4) 서버 (운영서버 기능)
-
이클립스, VSC, 인텔리J 로 개발한 소스코드를 톰캣으로 Run 하고, 크롬 브라우저에서 우리가 테스트하는 개발 화면을 봄. 이 때 톰캣이 웹 서버, WAS 역할을 같이 하고 있는 것
-
우리가 IDE 활용하여 로컬에서 개발을 열심히 하면, 웹 서버에 JSP, Vue 파일이 올라감
-
WAS 에는 Java(Class), XML 파일(컴파일된 class 파일, xml 파일)이 올라감
-
논리적인 개념으로 보면, 웹 서버와 WAS에 올리는 대상이 분리되어 있음
-
크롬이 웹 서버에 요청을 던지면, 웹 서버가 WAS 에, WAS 가 DB에 요청을 던지는 로직
-
예를 들어 크롬이 http:localhost/list.do 요청을 던지면, WAS 에서 Spring 프레임워크의 annotation (@RequestMapping) 으로 해당 요청에 대한 데이터를 조회하고 결과값을 리턴
-
WAS 는 DB에서 긁은 데이터 리턴, JSP 파일 리턴
-
-
HTTP 바디 영역에 데이터를 담아서 크롬에 던져줌
-
웹 서버는 HTML 만드는 역할, WAS 는 데이터 조회해서 리턴해주는 역할
-
만약 이 때 브라우저에 던지는 데이터가 JS 코드이고, JS 코드에 Ajax 가 포함되어 있다면 이를 실행하는 것도 크롬 브라우저기 때문에 크롬은 결론적으로(and 순간적으로) 2번 리퀘스트 던지는 셈
-
TMAX 사에서 상용 솔루션으로 만들고 판매중인 웹 서버와 WAS가 바로 Webtob, JEUS
- 반면 톰캣은 오픈 소스
- 운영서버 만들 때 톰캣 안 쓰고 TMAX꺼 쓰는 이유는 개발 과정에서 에러가 발생했을 때 책임 소재를 명확히 하고, 복구를 빨리 해야 하기 때문
- 따라서 개발할 때는 톰캣 쓰고, 운영서버 쓸 땐 TMAX 꺼 활용
-