2022 제주코딩베이스캠프 DAY 1

* 인터넷 호출 방식

1. 웹브라우저는 사용자로부터 도메인(Domain)을 입력받습니다.
2. 웹 브라우저는 네임서버(DNS)에게 IP주소를 물어봅니다.
3. 네임서버(DNS)는 IP주소를 알려줍니다.
4. 웹 브라우저는 IP주소로 웹 서버에게 페이지를 요청합니다.
5. 웹 서버는 웹 브라우저가 요청한 페이지를 전송합니다.
6. 웹 브라우저는 웹 서버로부터 전달받은 정보를 화면에 표시합니다.

* 네트워크 기본 구조

1. 스위치(허브) : 네트워크 단위들을 연결하는 통신 장비

2. 라우터 : 패킷의 위치를 추출하여 그 위치에 대한 최상의 경로를 지정하며 이 경로를 따라 데이터 패킷을 다음 장치로 전향시키는 장비

3. DNS

 

리피터, 허브, 브릿지, 스위치, 라우터 정리

 

1.2 웹 서버의 IP 주소를 DNS 서버에 조회한다

* 추가적 네트워크 개념

• NAT

NAT(Network Address Translation)

  NAT는 사설 IP를 공인 IP로 변경에 필요한 주소 변환 서비스이다. 즉, 라우터(router) 등의 장비를 사용하여 다수의 사설(private IP)를 하나의 공인 IP(public IP) 주소로 변환하는 기술이다. 주로 기업이나 기관에서 내부망을 사용하는 PC에 사설 IP를 제공하고 외부 인터넷에 연결 시엔 공인 IP 하나를 같이 사용하는 형태로 운영한다.

 

* NAT Table

- 내부 네트워크에 위치한 호스트들의 사설 IP와 포트 번호에 대한 정보를 가지고 있음

- 외부로 나갈 때의 동일한 공인 IP와 각기 다른 포트 번호를 가지고 있음

- 목적지 주소의 공인 IP와 서비스에 사용된 동일한 서비스 포트 번호를 가지고 있음

 

* NAT는 왜 필요한가?

- 공인 IP 주소를 절약하는 것

- 보안의 목적

• Sniper DDX (DDoS 대응 보안장비)

스나이퍼 DDX는 다양하고 복합적으로 발생되는 지능화된  DDoS 공격을 차단하는 DDoS 대응시스템이다.

• IPS

침입 방지 시스템(IPS)는 네트워크에서 악의적인 활동을 지속적으로 모니터링하고 이러한 활동이 발생할 경우 보고, 차단, 제거 등의 예방 조치를 취하는 네트워크 보안도구(하드웨어 기기 또는 소프트웨어)이다.

• Firewall

 방화벽(Firewall)은 인터넷과 같은 외부 네트워크에 연결되어 있는 내부 네트워크의 중요한 정보 및 자원을 외부 네트워크를 통한 불법적인 침입으로부터 안전하게 보호하기 위한 시스템이다.

 방화벽 시스템은 외부로부터 내부 네트워크를 보호하기 위해 강력한 접근 제어를 제공하는데, 이를 위해 외부망과 내부망의 구성을 위한 별개의 네트워크를 갖고 있다. 이런 네트워크의 구성 떄문에 외부망 사용자가 내부망에서 제공하는 서비스를 사용하려면 반드시 방화벽 시스템을 통과해야만 한다.

* Server : AP 서버 vs Web 서버 vs WAS vs DB 서버

• AP 서버, Application Server

 Application Server = 서버 그 자체 / 네트워크가 연결되어있기만 하다면, 그 네트워크를 통해 서버와 Endpoint 간의 통신을 할 수 있는 Server / HTTP 뿐만 아니라 TCP, UDP 등 프로토콜을 전달받아 클라이언트에 다양한 서비스 제공

• 웹 서버, Web Server

HTTP 프로토콜을 주로 처리하는 서버(Application Server에 포함됨) / Static HTML, Image 또는 JSON 등을 이용 / JSP, 서블릿, ASP 등이 이용되어 요청에 대한 단순 응답을 반환하는 간단한 구조

• Apache = 정적 처리에 특화된 웹서버
• Tomcat = Servelet Container, 주로 동적인 데이터를 처리하는 Web Application Server

• WAS, Web application Server

정적인 HTTP 데이터 처리에 특화된 Web server에 동적인 데이터를 이용하게끔 하는 Container를 엮으면 WAS가 됨.

미세한 차이 떄문에 일반적으로 Static Server의 경우 Web Server 혹은 Static Server라는 표현을 쓰고, HTTP 프로토콜을 사용하지 않는 TCP 서버 등은 WAS가 아닌 App Server 혹은 Application Server로 표현한다.

• DB 서버

데이터베이스 저장만을 담당하는 서버

* WAS와 데이터베이스 서버 분리는 언제 필요한가?
- WAS(Web Application Server)에서 처리할 부분이 DB 서버에 비해 상대적으로 많은 경우

- 메모리에 대한 의존도가 높은 DB

 

 

---

html 태그 정리

• h1: 검색엔진이 h1위주로 찾기 때문에 페이지에 하나만 쓰는 것이 좋음
• wbr: 한줄로 두고 싶은데 자리가 부족할때에 여기서 한 줄 띄었으면 좋겠어, 주로 웹앱에서 사용
• ul: unordered list
• ol: ordered list
• dl>dt>dd : 속성 정의를 한 후, 속성을 설명하는 테그, 디자인은 들여쓰기로 표현됨.
  • 본래 같은 레벨이 있어서 css 디자인을 해주기 어려웠다. 따라서 실무서 종종 div>dt>dd로 스타일링함.
• a 태그의 속성 _blank는 새창으로 설정한 링크를 연다.
• strong: 강하게 강조, em: 약하게 강조
  • css 상으로 강조를 할 때, 의미적으로 중요한 것인지 디자인상으로 중요한 것인지 구분하는 것이 필요하다. 검색엔진 노출 등등을 고려해야함
• div와 span의 차이 : span은 인라인 태그(글자) / div는 박스처리(레이아웃)
• figure : 이미지와 비디오를 감싸는 용도
• figcaption : 문단태그 p태그로 이미지에 대한 설명을 사용할 수 있지만 구조상으로는 이것이 깔끔하다.
• video : 속성 muted와 autoplay 속성은 거의 세트이다. 사용자들이 의도적이지 않게 깜짝 놀랄만한 것은 지양하는 것. 트레픽 문제가 발생할 수 있어서 가끔 유튜브 동영상을 올리고 버튼을 손보는 꼼수를 부리기도 한다. 이 꼼수로 서버비용 세이브 가능함. iframe으로 유튜브 동영상 올림 가능

레이아웃을 구성하는 태그들

1. article : 어디에 퍼갔을 때 단독으로 보기에 좋은 것들. 글 전체를 묶기도 한다.
   • ex) 라면 끓이기, 만드는 순서: O, 라면 재료 : X
2. header : 로고, 검색창정도가 많이 들어감. 컨텐츠의 시작부분
   • 부제는 h태그를 이용하지 않는 것이 좋다. 꼭 쓰고 싶으면 hgroup으로 감싸줘서 의미적으로 레벨링을 해준다.
   • h1이 존재하고 section > h1가 존재하면 틀린 것은 아님. 레벨링을 통해 h1 단독을 우선으로 행한다. 하지만 충분히 별로로 보임
3. aside : 페이지의 내용과 상관없는 것
   • 따라서 논문의 각주같은 것은 옆에 있다고 해서 aside가 아님. 각주는 논문의 연장선임
4. div : 디자인을 위해서 3섹션이 같은 레벨인데 따로따로 디자인을 해야한다면 각각을 div로 묶어 설정해준다.
5. main: 현재 보이는 가장 중요한 주제 1개 가능(권장)

---

후기 : 도망친 곳에 낙원은 없다고 안그래도 운영체제 강의들으면서 나 큰일났네 싶던게 더 확실해지는 순간이었다.... 네트워크 너무 어렵고 힘들고 재미없고..... pycharm 사용하면서 나름의 단축키를 알았다고 생각했는데 돌이켜생각해보니 그건그냥 윈도우 단축키였고 pycharm이 되었든 vscode가 되었든 단축키를 좀 익혀야겠다는 생각을 했다. 어떻게 보면 이 캠프를 신청했던 이유 중 하나가 django 실강을 듣기 위함도 있지만 놓치고 있던 개념이나 실전에서 쓰이는 개념을 복습하기 위함이었다. 첫 날부터 나의 구멍난 지식과 편협한 사고가 틔이는 기분이라 뿌듯했다.