[네트워크] html/css/js, http 기본 개념

[TIL 1] - 기본 개념 (html, css, javascript)

백엔드와 cs 관련 내용을 공부하기 앞서, 웹을 구성하는 기본 요소이자 프론트엔드 내용인 html/css/js에 대해 정리했다. 생각해보니, 웹 퍼블리싱/디자인 등을 접하면서 다양한 툴을 접하고 html/css 등을 자주 작성하긴 했는데 막상 개념에 대해선 정리하는 시간을 가지지 못한 아쉬움이 항상 있었다.
이참에 한번 정리를 해보았다.

• html
  : hypertext/image 등의 요소들을 웹 브라우저에게 어떤식으로 출력하라고 지정(markup) 해주는 언어(language)
  : 때문에 각 요소에 고유 라벨을 부여하도록 되어있음
  : 그러면서 웹 페이지의 구조, 즉 뼈대를 만들어주는 언어

---

• css
  : cascading style sheets
  : 웹 문서의 스타일을 저장하는 스타일시트, 문서의 일관성을 유지해주면서 스타일 지정을 각각 해야 하는 번거로움 없애줌
  : 작성하는 방법은 크게 3가지인데,

  1) 직접 스타일 부여
  2) 내부 스타일시트 작성: head 안에 style 작성
  3) 외부 스타일시트 작성: index.css를 따로 만들어, html에 연동 -> 일괄 관리가 가장 용이
  index.css 파일을 만들어 스타일 작성 후, html head 안에 아래와 같이 작성

      <link href=“index.css” rel=“stylesheet” />
       (href: hypertext + reference /rel: relation 즉, 이 Link 태그는 styesheet와 관련된 것이고, 불러오는 파일은 index.css) 

---

• javascript의 역할은?
  : 결국, html은 뼈대이고 css는 내부 인테리어와 같다고 할 수 있는데,
  : javascript 는 특정 ‘이벤트’가 일어났을 때, 특정한 효과가(함수) 일어나도록 만들어주는 것
  : 예시1, 1+1 쓰면 html은 1+1로 출력하지만, js는 계산해서 2로 반환해줌
  : 예시2, 페이지 스크롤을 내렸을 때, 밑에 있던 사진이 위로 나타남
  : 예시3, 특정 버튼을 클릭하면, 경고창이 뜸

  아래 2가지 용어에 대해 좀 더 살펴 보자면,
  1) function(함수): 특정한 작업을 독립적으로 수행할 수 있는 단위 (e.g. alert(), setinterval(), etc.
  2) event(이벤트): 클릭할 때, 마우스 커서를 뺄 때, 스크롤을 내리는 등의 동작/행위
  3) event handler(이벤트 핸들러): 이벤트 발생 시, 그에 따른 반응을 하도록 하는 것
  (e.g. onLoad, onClick, onKeyDown, onMouseOut, onChange,
  onFocus, onMouseMove, etc.)

• 이벤트와 javascript 함수는 그럼 어떻게 연결되는가?
  : 사용자가 박스를 ‘클릭하면 ‘클릭하지 마시오’ 라는 경고창이 뜨도록 만들어보자

  이벤트: 박스를 클릭, onClick
  사용 함수: 경고창 팝업, alert(“클릭하지 마시오!”);
  <input type=“button” value=“일시 중지”, onClick=“alert(‘클릭하지 마시오!’)” >

• 어떻게 작성하는가?
  : head태그나 body태그 하단에 작성할 수 있는데, javascript는 위에서 아래로 읽으므로 html요소와의 관계를 고려해야
  : 만약 head태그 안에 작성하는 경우, script를 읽기 위해 중간에 html parsing을 멈추기 때문에, 로딩 등의 문제 발생
  : 위의 단점을 보완하기 위한 2가지 방법
  -> script태그에 async 추가
  . html parsing 중 script태그를 만나면, html parsing & script download 동시 진행
  . script 실행 동안에는 html parsing 중단
  . 결국 script를 실행시키는 동안 html parsing은 멈추므로, 완벽하다고 할 수 없음
  -> script태그에 defer 추가
  . html parsing 중 script 태그를 만나면, html parsing & script download 동시 진행
  script 실행은 html parsing이 다 끝나야 이뤄짐

  : 만약 body태그에 안에 작성하는 경우, html을 모두 읽고 script를 읽기 때문에 로딩 속도가 빨라짐
  하지만 javascript가 적용되지 않은 콘텐츠를 먼저 접하게 될 수도 있음

  : 혹은 별도의 .js 파일을 만들어 연동 가능
  : <script src=“별도의 파일.js” type=“text/javascript”> 작성해야 함 (type =“text/javascript”는 생략 가능, html5 부터)
  : 해당 .js 파일에는 script 태그를 별도로 작성하지 않음

---

이렇게 html/css/javascript 각 정의와 역할 등에 대해 정리를 했는데,
역시 공부하다보면 결국 http등 cs 내용을 알아야 더 이해를 잘 할 수 있음을 깨닫는다.
html이 hypertext를 다루는 건 알겠는데, 그럼 hypertext는 정확히 무엇인가?
http, https는? ip? tcp/ip? api? 등등

[TIL 2] - ABOUT HTTP

• HTTP
  : Hypertext Transfor Protocol
  : 즉, 웹 브라우저와 웹 서버 사이에 hypertext 문서를 전송하기 위한 통신 규약
  : 인터넷 주소를 지정할 때, http://… 로 시작하는 것은, 입력된 인터넷 주소에서 이뤄지는 모든 hypertext 문서 교환을
  http 규약에 맞게 처리한다는 뜻

  hypertext: 연결 정보가 나타나 있는 텍스트 (다른 정보로 연결되어 있는 텍스트)
  hyperlink: hypertext에 포함된 연결 정보 (클릭하면 다른 정보로 넘어가게 함)

---

• TCP/IP
  1) IP
  : 컴퓨터 간 데이터를 주고 받을 때, 매우 복잡한 인터넷 망을 거쳐서 교환됨
  이 때 필요한 것이 internet protocol (인터넷에 연결된 각 컴퓨터가 갖는 고유 주소)
  : 컴퓨터/스마트폰뿐 아니라, 세탁기/냉장고/전자레인지 등 인터넷을 사용하는 기기는 모두 IP주소를 갖게 되어 있음
  : IP 패킷 단위로 전달함 (출발지 IP, 목적지 IP 등의 정보가 포함)
  -> 그런데 문제는, 단순히 서버에 IP 패킷만 보낼 경우 여러 문제가 발생할 수 있음
  -> 받을 대상이 없어도 던지고 보거나, 같은 IP에서 사용하는 서버에서 통신 중인 어플이 여러 개일 수도
  -> 혹은 데이터 순서가 잘못 갈 수도 (e.g. hello world 가 아니라, world hello)
  2) TCP
  : tranmission control protocol, IP를 보완해주는 역할
  : 출발지 PORT, 목적지 PORT, 전송 제어, 순서, 검증 정보 등의 정보까지 포함해줌
  -> 일단 연결을 먼저 하고 (즉 받을 대상을 먼저 확인한단 뜻), 3-way handshake
  -> 데이터 전달과 순서를 보장해줌

  3-way handshake: 1) client, “syn” -> 2) server, “syn” + “ack” -> 3) client, “ack”
  PORT: IP 패킷에서, 어플리케이션을 구분해주는 정보 (IP가 아파트라면, port는 동/호 정보)

  결론적으로, 이 모든 정보를 포함하면 TCP/IP 패킷이 되는 것
  
  
  3) UDP
  : user datagram protocol, 기능 없는 하얀 도화지 같은 프로토콜
  : IP와 다를 바가 없는데, port 정보가 추가됨
  : tcp는 다 좋은데 3-way handshake를 하는 과정에서 시간이 소요되고 개발자가 손댈 수 없는 영역
  -> 그래서 udp를 추가해서 추가 최적화 작업하는데 쓰이고, 최근에 유용하게 쓰이는 편

---

• DNS(domain name system)/domain name/host name
  : 항상 정의가 모호했던 부분인데, 아래와 같이 정리했음 (처음 내용을 찾아 볼 때, 책이나 사이트마다 사용 용어/내용 등이 애매하게 혼동되어 의외로 이해하는데 애먹었다)

  • IP는 각 컴퓨터가 할당 받는 고유 주소이나, 32bit (IPv4 기준) 형태고 변동성이 있어 기억하기 어려움
  • DNS는 각 IP 주소를 가독성이 좋은 영어/숫자로 구성된 domain name으로 1:1 대응
  • 그럼 domain name과 host name의 차이점은?
    : domain name은 흔히 '인터넷 주소'라고 불리는 것으로, host name/domain 등으로 구성됨
    : https://www.google.com 에서 www는 host name, google은 domain, .com은 최상위 domain
    : host name은 한 대의 서버/PC를 말함
    : domain은 최상위 domain(.com, .net, .org, .gov 등)과 차상위 domain(.co, .go 등)이 있음
  • domain name은 FQDN, PQDN으로 나뉨
    : FQDN (fully qualified domain name)
    : PQDN (partially qualified domain name), 부분 도메인만으로 식별 가능

[TIL 3] - URI

• URI
  : uniform resource identifier, 모든 resource를 통일된 방식으로 식별하는 방법
  : URL 과 URN은 이 안에 포함되는 개념임
  : (220128 update) URN만으로 리소스를 찾을 수 있는 방법은 쉽지 않아, URL이 가장 많이 쓰임
  : (220403 update) 결국 url(리소스 위치) + urn(자원명)을 합친 것. 그런데 통상적으로 uri = url의 의미로 사용되는 경우도 많은 듯 하다

  URL: uniform resource locator (e.g. 나의 주소)
  URN: uniform resource name (e.g. 나의 이름)

(220403 update) 이미지 출처: https://programming119.tistory.com/194

• URL 분석
  : e.g.) https://www.google.com:443/search?q=hello&hl=ko
  : http나 https를 앞에서 사용하면 PORT는 일반적으로 생략
  : (220128 update) 'search'는 path, path는 계층적 구조를 사용함 (e.g. home/file1/jpg)
  : query는 ?로 시작하고, &로 정보 추가 가능 (key = value 형태)

내용 출처: 모든 개발자를 위한 HTTP웹 기본 지식, 김영한