|
1 | | -<기반기술> |
| 1 | +# ✅ [5/23] 기반기술 |
2 | 2 |
|
| 3 | +> - (1) 반응형 웹, CSS |
| 4 | +> - (2) 프로토콜 |
| 5 | +> - (3) 네트워크 |
| 6 | +> - (4) 서버 |
3 | 7 |
|
4 | 8 |
|
5 | | -1. 반응형 웹, CSS |
6 | 9 |
|
7 | | -요즘은 반응형 웹을 네이티브 웹이라고 지칭. 이 부분을 설명하려면 HTML5, CSS3 설명해야 함. |
| 10 | +- (1) 반응형 웹, CSS |
| 11 | + - 예전엔 데스크탑(1025*725) 기준으로 화면 구현 |
| 12 | + - 표준도 잡히지 않았기 때문에 IE 버전이나 서로 다른 브라우저 유형에 따라 구현한 화면이 제대로 보이지 않는 현상 발생 |
| 13 | + - 이를 보완하기 시작한 것이 반응형 웹 |
| 14 | + - 요즘은 반응형 웹을 네이티브 웹이라고 지칭 |
| 15 | + - HTML5, CSS3 의 영역 |
8 | 16 |
|
9 | | -예전엔 데스크탑(1025*725) 기준으로 화면 구현. 표준도 잡히지 않았기 때문에 IE 버전이나 서로 다른 브라우저 유형에 따라 구현한 화면이 제대로 보이지 않는 현상 발생. 이 때 인기 좋았던 직업이 웹 퍼블리셔. |
10 | 17 |
|
11 | 18 |
|
| 19 | +- (2) 프로토콜 |
12 | 20 |
|
13 | | -2. 프로토콜 |
| 21 | + - HTTP : Hyper Text Transfer Protocol |
| 22 | + - HTTP 기본 포트는 80 |
| 23 | + - 크롬 브라우저에서 웹 서버로 요청을 보낼 때, 80번 입구쪽으로 보냄 |
| 24 | + - 이 요청을 받은 웹 서버는 크롬 브라우저에 HTML, JS, Data 담아서 응답을 보냄 |
| 25 | + - 요청과 응답은 헤더/바디 영역으로 구분 |
| 26 | + - (MDN HTTP 상태 코드 문서 참조) |
| 27 | + - 위와 같은 텍스트 형태의 요청과 응답이 HTTP |
| 28 | + - HTTPS : Hyper Text Transfer Protocol Security |
| 29 | + - 카드번호와 같은 민감한 정보가 텍스트 형태로 오가면 안되기 때문에, 요청과 응답을 암호화하여 보호하는 것이 HTTPS |
| 30 | + - HTTPS 기본 포트는 443 |
14 | 31 |
|
15 | | -HTTP : Hyper Text Transfer Protocol |
| 32 | + - FTP |
| 33 | + - 노트북에서 웹 서버에 올리는 것 FTP(File Transfer Protocol) |
| 34 | + - FTPS(File Transfer Protocol Security) |
| 35 | + - 이 밖에도 모든 장치에서 데이터 올릴 때 프로토콜 존재 |
| 36 | + - 키보드, 마우스에서 웹 서버에 데이터 올릴 때도 프로토콜이 있음 |
16 | 37 |
|
17 | | -HTTPS : Hyper Text Transfer Protocol Security |
18 | 38 |
|
19 | | -80포트 : HTTP 기본 포트. 크롬 브라우저에서 웹 서버로 요청을 보낼 때, 80번 입구쪽으로 보냄 |
20 | 39 |
|
21 | | -이 요청을 받은 웹 서버는 크롬 브라우저에 HTML, JS, Data 담아서 응답을 보냄 |
| 40 | +- (3) 네트워크 |
22 | 41 |
|
23 | | -요청과 응답은 헤더/바디 영역으로 구분 |
| 42 | + - IP |
| 43 | + - 비유하자면 집주소 |
| 44 | + - 인터넷에 연결된 장치가 웹 서버와 통신하는데 사용 |
| 45 | + - 공인IP : 국제적으로 통용되는 IP. 중복되면 안됨 |
| 46 | + - 사설IP : 내부 네트워크망에서 IP 자동 할당 |
24 | 47 |
|
25 | | -(MDN HTTP 상태 코드 문서 참조) |
| 48 | + - GateWay |
| 49 | + - 인터넷망으로 통하기 위한 문 |
| 50 | + - IP주소로 통신하는 서버 |
| 51 | + - 네트워크망에 연결되어 있음 |
| 52 | + - 가정에서는 GateWay 역할을 하는게 모뎀 |
26 | 53 |
|
27 | | -위와 같은 텍스트 형태의 요청과 응답이 HTTP |
28 | | - |
29 | | -카드번호와 같은 민감한 정보가 텍스트 형태로 오가면 안되기 때문에, 요청과 응답을 암호화하여보호하는 것이 HTTPS |
30 | | - |
31 | | -참고로 HTTPS 기본 포트는 443임! |
32 | | - |
33 | | -노트북에서 웹 서버에 올리는 것 FTP(File Transfer Protocol) |
34 | | - |
35 | | -FTPS(File Transfer Protocol Security) |
36 | | - |
37 | | -키보드, 마우스에서 웹 서버에 데이터 올릴 때도 프로토콜이 있다! 모든 장치에서 데이터 올릴 때 프로토콜 존재한다! |
38 | | - |
39 | | - |
40 | | - |
41 | | -3. 네트워크 |
42 | | - |
43 | | -[IP] 비유하자면 집주소. 인터넷에 연결된 장치가 웹 서버와 통신하는데 사용. |
44 | | - |
45 | | -공인IP : 국제적으로 통용되는 IP. 중복되면 안됨. |
46 | | - |
47 | | -사설IP : 내부 네트워크망에서 IP 자동 할당. |
48 | | - |
49 | | -[GateWay] 인터넷망으로 통하기 위한 문. IP주소로 통신하는 서버. 네트워크망에 연결되어 있음. 가정에서는 GateWay 역할을 하는게 모뎀. |
50 | | - |
51 | | -[DNS] |
52 | | - |
53 | | -Domain Name Service. 전화번호부 역할. |
54 | | - |
55 | | -DNS 주소가 브라우저에 들어오는 순간, 웹 브라우저는 각 DNS 서버에 해당하는 IP 주소를 인식해서 요청, 응답 처리를 하는 것 |
| 54 | + - DNS |
| 55 | + - Domain Name Service |
| 56 | + - 전화번호부 역할 |
| 57 | + - DNS 주소가 브라우저에 들어오는 순간, 웹 브라우저는 각 DNS 서버에 해당하는 IP 주소를 인식해서 요청, 응답 처리를 하는 것 |
56 | 58 |
|
57 | 59 |
|
58 | 60 |
|
59 | | -4. Server 구조 (운영서버 기능) |
60 | | - |
61 | | -이클립스, VSC, 인텔리J 로 개발한 소스코드를 갖고 톰캣을 Run 하고, 크롬 브라우저에서 우리가 테스트하는 개발 화면을 봄. 이 때 톰캣이 웹 서버, WAS 역할을 같이 하고 있는 것. |
| 61 | +- (4) 서버 (운영서버 기능) |
62 | 62 |
|
63 | | -우리가 IDE 활용하여 로컬에서 개발을 열심히 하면, 웹 서버에 JSP, Vue 파일이 올라감 |
| 63 | + - 이클립스, VSC, 인텔리J 로 개발한 소스코드를 톰캣으로 Run 하고, 크롬 브라우저에서 우리가 테스트하는 개발 화면을 봄. 이 때 톰캣이 웹 서버, WAS 역할을 같이 하고 있는 것 |
64 | 64 |
|
65 | | -WAS 에는 Java(Class), XML 파일(컴파일된 class 파일, xml 파일)이 올라감 |
| 65 | + - 우리가 IDE 활용하여 로컬에서 개발을 열심히 하면, 웹 서버에 JSP, Vue 파일이 올라감 |
66 | 66 |
|
67 | | -논리적인 개념으로 보면, 웹 서버와 WAS에 올리는 대상이 분리되어 있음 |
| 67 | + - WAS 에는 Java(Class), XML 파일(컴파일된 class 파일, xml 파일)이 올라감 |
68 | 68 |
|
69 | | -크롬이 웹 서버에 요청을 던지면, 웹 서버가 WAS 에, WAS 가 DB에 요청을 던지는 로직. |
| 69 | + - 논리적인 개념으로 보면, 웹 서버와 WAS에 올리는 대상이 분리되어 있음 |
70 | 70 |
|
71 | | -예를 들어 크롬이 http:localhost/list.do 요청을 던지면, WAS 에서 Spring 프레임워크의 annotation (@RequestMapping) 으로 해당 요청에 대한 데이터를 조회하고 결과값을 리턴 |
| 71 | + - 크롬이 웹 서버에 요청을 던지면, 웹 서버가 WAS 에, WAS 가 DB에 요청을 던지는 로직 |
72 | 72 |
|
73 | | -WAS 는 DB에서 긁은 데이터 리턴, JSP 파일 리턴 |
| 73 | + - 예를 들어 크롬이 http:localhost/list.do 요청을 던지면, WAS 에서 Spring 프레임워크의 annotation (@RequestMapping) 으로 해당 요청에 대한 데이터를 조회하고 결과값을 리턴 |
74 | 74 |
|
75 | | -http 바디 영역에 데이터를 담아서 크롬에 던져주는 것 |
| 75 | + - WAS 는 DB에서 긁은 데이터 리턴, JSP 파일 리턴 |
76 | 76 |
|
77 | | -웹 서버는 HTML 만들고, WAS 는 데이터 조회해서 리턴해주는 역할! 이렇게 분리됨 |
| 77 | + - HTTP 바디 영역에 데이터를 담아서 크롬에 던져줌 |
78 | 78 |
|
79 | | -만약 이 때 브라우저에 던지는 데이터가 JS 코드이고, JS 코드에 Ajax 가 포함되어 있다면 이를 실행하는 것도 크롬 브라우저기 때문에 크롬은 결론적으로(and 순간적으로) 2번 리퀘스트 던지는 셈 |
| 79 | + - 웹 서버는 HTML 만드는 역할, WAS 는 데이터 조회해서 리턴해주는 역할 |
80 | 80 |
|
81 | | -TMAX 사에서 상용 솔루션으로 만들고 판매중인 웹 서버와 WAS가 바로 Webtob, JEUS |
| 81 | + - 만약 이 때 브라우저에 던지는 데이터가 JS 코드이고, JS 코드에 Ajax 가 포함되어 있다면 이를 실행하는 것도 크롬 브라우저기 때문에 크롬은 결론적으로(and 순간적으로) 2번 리퀘스트 던지는 셈 |
82 | 82 |
|
83 | | -반면 톰캣은 오픈 소스. 운영서버 만들 때 톰캣 안쓰고 TMAX꺼 쓰는 이유는 개발 과정에서 에러가 발생했을 때 책임 소재를 명확히 하고, 복구를 빨리 해야하기 때문. 따라서 개발할 때는 톰캣쓰고, 운영서버 쓸 땐 TMAX 꺼 활용 |
| 83 | + - TMAX 사에서 상용 솔루션으로 만들고 판매중인 웹 서버와 WAS가 바로 Webtob, JEUS |
| 84 | + - 반면 톰캣은 오픈 소스 |
| 85 | + - 운영서버 만들 때 톰캣 안 쓰고 TMAX꺼 쓰는 이유는 개발 과정에서 에러가 발생했을 때 책임 소재를 명확히 하고, 복구를 빨리 해야 하기 때문 |
| 86 | + - 따라서 개발할 때는 톰캣 쓰고, 운영서버 쓸 땐 TMAX 꺼 활용 |
0 commit comments