[WEB] Background

1. Background : web

1) 웹 서비스, 프론트엔드와 백엔드

• 프론트엔드 : 이용자의 요청을 받는 부분
• 백엔드 : 요청을 처리하는 부분
• 웹 리소스 : 페이지가 보여주고 있는 정보들이 명시된 부분

2) 웹 리소스

• 웹 리소스란, 웹에 갖춰진 정보 자산을 의미
• 모든 웹 리소스는 고유의 URI를 가지며 식별됨

1. HTML : 웹 문서의 뼈와 살을 담당
2. CSS : 웹 문서의 생김새를 지정, 스타일 시트 및 글자 색상,모양 등 시각화
3. JS : 웹 문서의 동작을 정의, 버튼 클릭시 반응 및 전송위치 등 (client-side script)
4. 그 외 (문서, 이미지, 동영상 등)

2. Background : HTTP/HTTPS

1) 인코딩

• 아스키와 유니코드가 존재함
• 아스키 “1000001” 은 “A”로 해석됨 → 하지만, 글자가 — 등으로 출력되는 인코딩 호환 에러 발생
• 그래서, 유니코드라는 새로운 표준이 생성됨
  • 한글, 이모지, 한자 등 유니코드에 포함
• 유니코드로 인코딩된 데이터가 웹 서버를 통해 우리에게 전달

2) HTTP

• HTTP

  • 서버와 클라이언트의 데이터 교환을 요청과 응답 형식으로 정의한 프로토콜
  • TCP/80 또는 TCP/8080
  • 네트워크 포트와 서비스 포트가 존재하며,
    포트로 데이터를 교환하는 방식은 전송 계층의 프로토콜을 따름

• HTTP 메시지

  • HTTP헤드 : 필드와 값으로 구성되며 바디의 속성을 나타냄
  • HTTP바디 : 헤드의 끝을 나타내는 CRLF뒤 모든 줄을 말함. 데이터가 담김

• HTTP 요청

  • 메소드, 요청URI, HTTP버전으로 구성
    • GET 메소드 : 리소스를 가져오라는 메소드
    • POST 메소드 : 리소스로 데이터를 보내라는 메소드

• HTTP 응답

  • HTTP버전, 상태코드, 처리사유로 구성

  • 상태 코드 상세 설명

    응답코드	설명	상세 내역
    1xx	요청을 제대로 받았고, 처리가 진행 중임
    2xx	요청이 제대로 처리됨	200: 성공
    3xx	요청을 처리하려면, 클라이언트가 추가 동작을 취해야 함.	302: 다른 URL로 갈 것
    4xx	클라이언트가 잘못된 요청을 보내어 처리에 실패했습니다.	400: 요청이 문법에 맞지 않음 403: 리소스에 요청할 권한 없음 404: 리소스가 없음
    5xx	클라이언트의 요청은 유효하지만, 서버에 에러가 발생하여 처리에 실패했습니다.	500: 요청을 처리 중 에러 발생 503: 서버가 과부하로 인해 요청을 처리할 수 없음

3) HTTPS

• HTTPS는 TLS프로토콜을 도입하여 HTTP메시지를 암호화하여 문제점을 보완
• 결과적으로 HTTP 통신이 도청과 변조로부터 보호됨
• PORT 443 사용
  
  

---

3. Background: Web Browser

1) 웹 브라우저

• 웹 브라우저는 서버와 HTTP통신을 대신해주고, 리소스를 시각화해줌
• 이용자는 브라우저를 통해 정보 검색하지만 내부의 연산은 알지못함

2) URL

• URL은 웹에 있는 리소스의 위치를 표현하는 문자열, 이를 서버에 요청하여 리소스에 접근가능
• URL 구성 요소
  1. Scheme : 웹 서버와 어떤 프로토콜로 통신할지
  2. Host : Authority 일부로, 웹 서버의 주소에 대한 정보를 보유
  3. Path : 접근할 웹 서버의 리소스 경로 ‘/’로 구분
  4. Query : 웹 서버에 전달하는 파라미터이며 URL에서 ‘?’뒤에 위치
  5. Fragment : 메인 리소스에 존재하는 서브 리소스에 접근하기위한 식별 정보 ‘#’뒤에 위치

3) Domain Name

• Host는 Domain Name과 ip address를 가지는데, ip 는 식별하기 위해 사용되는 주소
• 브라우저는 DNS에 Domain Name을 질의하고 DNS가 응답한 ip 를 사용함
• ex) naver 에 접속할 때 DNS에 질의해 얻은 naver의 ip와 통신함

4) 웹 렌더링

• 서버에서 받은 리소스(html,css,js 등)를 이용자에게 시각화하는 행위
• 브라우저는 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여줌
• 웹 렌더링 엔진(사파리-웹킷, 크롬-블링크, 파이어폭스-개코)에 따라 과정과 순서의 차이는 있지만 시각화하여 보여주는것은 동일함

4. Tools: Browser DevTools

1) 개발자 도구

• 개발자 도구 레이아웃
  • Elements: 페이지를 구성하는 HTML 검사
  • Network: 서버와 오가는 데이터를 확인할 수 있음
  • Application: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인할 수 있음

1. 요소 검사
   • 요소 검사를 원하는 요소에 클릭하면, 해당 부분과 관련된 HTML코드가 하이라이팅됨
2. 디바이스 툴바
   • 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경 가능
3. Elements
   • 코드를 선택하여 수정 가능
4. Console
   • 프론트엔드의 js코드에서 발생한 메시지를 출력하고, 이용자가 입력한 js코드도 실행해주는 도구
   • 코드를 작성하면서 어떤 변수의 값을 중간에 출력해보고 싶다면, console.log 사용 가능
   • console 사용한 js 실행 코드

     // "hello" 문자열을 출력하는 alert 함수를 실행합니다.
     alert("hello");
     // prompt는 popup box로 이용자 입력을 받는 함수입니다.
     // 이용자가 입력한 데이터는 return value로 설정됩니다.
     var value = prompt('input')
     // confirm 는 확인/취소(yes/no)를 확인하는 이용자로부터 입력 받는 함수입니다.
     // 이용자의 선택에 따라 Boolean(true/false)타입의 return value를 가집니다.
     var true_false = confirm('yes or no ?');
     // document.body를 변경합니다.
     document.body.innerHTML = '<h1>Refresh!</h1>';
     // document.body에 새로운 html 코드를 추가합니다.
     document.body.innerHTML += '<h1>HI!</h1>';

5. Sources
   • 현재 페이지를 구성하는 웹 리소스 확인 가능
   • Debug
     • 자바스크립트를 디버깅 가능
     • 원하는 라인에 브레이크 포인트를 설정하고, scope에서 변수 확인 및 값 변경 가능
6. Network
   • 서버와 오가는 데이터를 확인 가능
   • 로깅 및 네트워크 로그 확인 가능
   • 요청 및 응답 데이터 확인 가능
   • Copy
     • 로그를 우클릭 > copy as fatch를 통해 console에 붙여 넣으면,
       동일한 요청을 서버에 재전송 할 수 있음
7. Application
   • 쿠키, 캐시, 이미지, 폰트 등 애플리케이션과 관련된 리소스 조회 가능
   • 브라우저에 저장된 쿠키 확인하고 수정 가능
8. Console Drawer
   • 개발자 도구에 새로운 콘솔창을 열어 효율 높임
   • 네트워크 패널과 콘솔 패널을 동시에 사용 가능

2) 기타 브라우저 기능

• 페이지 소스 보기 : 모든 페이지 소스 확인 가능 (ctrl + U)
• 시크릿 브라우징 모드 : 시크릿 모드 탭은 쿠키를 공유하지 않음 (ctrl + shift + N)