공부하는 안씨의 기록

chapter 02. web의 동작 원리 본문

웹 프로그래밍/테킷 프론트엔드 온보딩 트랙(230710~230819)

chapter 02. web의 동작 원리

an씨 2023. 7. 17. 19:00

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며,

그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다.

 

 

| 목차

1. 강의 내용 학습

1.(1) web 의 등장

1.(2) 클라이언트(client)와 서버(server)

1.(3) HTTP와 URL

1.(4) 쿠키와 세션

1.(5) 네트워크란?

1.(6) IP와 IP address

1.(7) port와 DNS

2. 추가 학습 활동 

3. 학습 후기 


1. 강의 내용 학습

1.(1) web의 등장

*팀 버너스 리: 1989년에 World Wide Web의 하이퍼텍스 시스템을 고안

PC 통신 Web
폐쇄 개방
저속 고속
전화선/모뎀 광랜(FTTH)
  • Web 1.0
    • 1990년대 후반~ 2000년대
    • 어느 누구나 프로그램을 대중에게 공개할 수 있는 세상의 도래
    • 네이버, 다음, 야후, freechal, LYCOS, empas 등의 웹서비스 포털→ 고정 사용자 등장
    • 인터넷 쇼핑몰(오픈마켓): 옥션, 인터파크, g market, d&shop → 인터넷으로 구매
    • 메신저: msn, buddybuddy, nateon, cyworld
    • → 수많은 서비스의 탄생, 그러나 생존자는?
  • Web 2.0
    • 2010년대~현재
    • 일방향적으로 정보를 제공받던 사용자가 직접 정보를 생산하고 공유한다. (네이버 블로그, 위키피디아)
  • 아이폰의 등장(스마트폰)
    • real time, 실시간 공유
    • sns의 등장: 카카오톡, 페이스북, 트위터, 영상통화(줌)
  • Web 3.0
    • 데이터의 투명한 공개 → 블록체인(가상화폐, 비트코인…)
    • 블록체인은 완벽한 기술인가?
      • 모든 참여자에게 동기화 → 느린 네트워크 처리 속도
      • 오픈소스 형태로 책임자가 불분명하다는 문제!

 

1.(2) 클라이언트와 서버

  • 클라이언트(client): 브라우저를 통해서 요청(request)을 보내는 주체
  • 서버(server): 요청(request)에 대한 응답(response)을 받음.
  • 통신 시 규칙이 필요함.

 

1.(3) HTTP 와 URL

  • HTTP(HyperText Transfer Protocol): 웹 브라우저에서 ‘URL’이라는 주소 양식을 통해 클라이언트와 서버가 통신하는 규칙
    • hypertext: 다른 리소스로 이동할 수 있는 ‘링크’
    • protocol: 규약. 규칙
  • URL(Uniform Resource Locator): 인터넷 상의 위치에 있는 각종 자원의 주소 체계
  • https://www.google.com/search?q=techit
    • 프로토콜(protocol): 통신규칙 - http(https)
    • 호스트(host): 서버의 주소. goole.com을 호스트 네임이라 지칭
    • 경로(path): 호스트 내 서비스의 위치. 서비스 별로 분할(ex: 검색, 회원 등)
    • 쿼리 문자열(Query String): ? 기호로 시작, & 기호로 연결. 키/값 쌍으로 구성

1.(4) 쿠키와 세션

  • 쿠키(cookie): 서버에서 클라이언트로 보내져 브라우저에 저장되는 작은 데이터(키/값 구조로, 유효기간이 있음.)
  • 클라이언트에서 서버로 로그인 요청→ 로그인 성공 쿠키 생성, 기억됨.
    • 쿠키의 필요성 및 작동 원리
      • →서버에서 로그인 처리 후 성공 메세지를 응답(성공 메세지 뿐만이 아니라, 쿠키 또한 받는다.) →로그인 성공 이후, 강의 장바구니 이동-개인정보 수정 페이지 이동-강의 시청 페이지 이동 등의 작업 수행 → 위와 같은 작업 수행이 가능한 이유: 로그인을 성공하였기 때문임. → 이때, https 통신: 이전의 작업을 기억하지 못함. 각각의 요청및 응답이 독립적으로 수행됨. 즉, 이러한 요청이 있었음을 남겨둘 필요가 있음! → stateless 하다는 특성이 있는 http protocol(보통 수많은 클라이언트들이 특정 서버에 동시에 연결되어있으므로 http의 stateless한 특성이 리소스 관리 측면에서 굉장히 효율적임.) → 즉 **로그인이 성공하였다는 ‘쿠키’**를 남겨 로그인이 유지되며, 강의 장바구니 및 마이페이지 확인이 가능한 것임.
      • 서버가 클라이언트를 식별할 수 있는 방법은 ‘쿠키’이므로 아래와 같은 방법으로 보완
        • httpOnly cookie
        • secure cookie
  • 세션(session): 쿠키의 한계점을 보완.
    • 서버에서 ‘session id’를 쿠키에 실어서 보내줌. 서버의 ‘세션 저장소’에 해당 쿠키를 보관. 클라이언트에서 불필요하게 많은 민감 정보를 담지 않고 서버에서 세션 아이디를 받은 후 세션 아이디에 해당하는 정보를 찾아서 사용하게 되는 것임!
    • 클라이언트가 재 로그인 시, 서버는, 세션 아이디에 매핑된 상태 데이터를 기반으로 클라이언트에게 응답을 주게 됨.
      • → 리소스 비용 절감, 민감정보가 노출되고 변조되는 것을 막는다.

 

1.(5) 네트워크란?

네트워크(Network) : 두 대 이상의 컴퓨터가 연결된 통신망 (꼭 인터넷만의 이야기가 아님)

  • 네트워크의 구성 요소
    • host(호스트): 연결된 개별 컴퓨터
    • switch(스위치): 연결의 매개체(묶어준다고 생각하자)
      • problem! 스위치는 다른 네트워크에 접속할 수 없음.
    • router(라우터): 스위치의 기능을 포함. but 서로 다른 네트워크 간의 통신이 가능. (=공유기)
  • 인터넷(Internet): 네트워크와 네트워크가 연결된 거대 통신망

 

1.(6) IP와 IP address

  • IP(Internet Protocol): 컴퓨터 간 데이터를 주고받는 네트워크 계층의 규약. 데이터 전달에 필요한 목적지 컴퓨터 정보가 필요.
  • IP 주소: 네트워크에서 컴퓨터가 부여 받는 고유한 주소
    • 송신자 — ( 수신자의 주소 ) — > 수신자
    • IPv4: 32비트 할당 가능
      • IP 주소 체계(IPv4 기준)
        • 11000000101010000000000000000011
        • ( 32비트 주소를 8비트씩 분할- 4개의 옥텟(octet) )
        • 11000000|10101000|00000000|00000011
        • (2진수를 10진수로 변환)
        • 192.168.0.3
        • →범위: 0.0.0.0~255.255.255.255
    • IPv6: 128 비트 할당 가능
  • 공인 IP , 사설 IP
    • 공인 IP: 전체 인터넷 망에서 고유하게 식별 가능한 주소(IPv4 체계에서 자원 부족)
      • ISP(인터넷 서비스 제공자: KT, LG U+, SK …): 우리가 사용하는 공유기에 공인 IP 할당
      • 하나의 공인 IP에서 수많은 사설 IP할당이 가능
    • 사설 IP: 가정의 LAN과 같은 네트워크에서 할당되는 주소, 컴퓨터에서 조회되는 IP
  • 127.0.0.1
    • localhost(컴퓨터 자기 자신을 의미)

 

1.(7) port와 DNS

  • Port(포트, 포트 넘버): 하나의 컴퓨터에서 실행되는 다양한 서비스를 구분하는 역할. 접근하려는 서비스의 목적지 포트를 정확하게 설정해야 함.
    • http: 80, https: 443, smtp(메일): 25, ftp(파일): 21
  • DNS(Domain Name Server): URL을 해석하여 ip 주소로 반환하는 서버
    • URL 입력→ DSN 서버에서 매칭되는 정보가 있는지 확인→URL과 맵핑된 IP주소를 브라우저로 전송→ 브라우저는 전달받은 IP주소를 통해 페이지 접속
    • DNS는 국가, 기업 등이 운영하며 전세계적으로 연결되어 있으므로, 장애 발생 시 막대한 피해 발생

 

 

2. 추가 학습 활동 

ㅇㅇㅇㅇ

 

3. 학습 후기 

ㅇㅇㅇㅇ