[web] 웹 기본 상식

1.웹

 

WEB

인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스

웹 서버 : 정보를 제공하는 주체

웹 클라이언트 : 정보를 받는 이용자

 

프론트엔드 : 이용자의 요청을 받는 부분

백엔드 : 요청을 처리하는 부분

 

웹리소스

웹에 갖춰진 정보자산.

모든 웹 리소스는 고유의 URI(Uniform Resource Indicator)를 가지며 이로 식별됨

이용자에게 직접 보여지는 부분으로 프론트엔드 전반

HTML(Hyper Text Markup Language)	태그와 속성을 통한 구조화된 웹 문서 작성 지원
CSS (Cascading Style Sheets)	웹 리소스들의 시각화 방법을 기재한 스타일시트.
JS (JavaScript)	웹 문서의 동작을 정의. 이용자의 브라우저에서 실행되는데, 클라이언트가 실행되는 코드라고 하여 Client-Side Script라고도 함

 

웹 클라이언트와 서버의 통신

1. (클라이언트) 이용자가 브라우저를 이용해 웹 서버 접속
2. (클라이언트) 브라우저는 이용자의 요청을 해석해 http 형식으로 웹 서버에 리소스 요청
3. (서버) http로 전달된 이용자 요청 해석
4. (서버) 해석한 요청에 따라 동작. 리소스를 요청한다면 이를 탐색하고 연산처리
5. (서버) 이용자에게 전달할 리소스를 http형식으로 이용자에게 전달
6. (클라이언트) 브라우저는 서버에게 응답받은 웹 리소스를 시각화하여 이용자에게 보여줌

 

2.HTTP / HTTPS

 

인코딩

0과1로 문자를 표현하는 것

아스키 코드와 아스키 코드의 문제점을 해결한 유니코드

 

통신 프로토콜

요청(Request) : 클라이언트가 웹에게 특정 리소스를 지정하여 제공해달라고 요청하는 행위

응답(Response) : 서버가 해당 요청을 이해하고 대응되는 동작을 통해 클라이언트에 리소스를 반환하는 행위

프로토콜(Protocol)

위와 같이 규격화된 상호작용에 적용되는 약속.

통신오류를 줄이기 위해 문법(syntax)을 포함하며, 이에 어긋나면 메시지를 잘못 전송된 것으로 취급하여 무시

 

HTTP(Hyper Text Transfer Protocol)

서버와 클라이언트의 데이터 교환을 요청과 응답 형식으로 정의한 프로토콜.

클라이언트가 서버에게 요청하면, 서버가 응답하는 매커니즘.

웹 서버는 HTTP 서버를 HTTP 서비스 포트(TCP/80 또는 TCP/8080)에 대기

 

HTTP 메시지

클라이언트가 전송하는 HTTP 요청과 서버가 반환하는 HTTP 응답이 있다.

HTTP 헤드 : HTTP 헤드의 각줄은 CRLF로 구분되며 첫줄은 시작줄, 나머지 줄은 헤더라고 부름.

  - 시작줄 : 요청과 응답에서의 큰 차이

  - 헤더 : 필드와 값으로 구성되며 HTTP 메시지 또는 바디의 속성을 나타냄. 하나의 HTTP 메시지에는 0개 이상의 헤더가 있을 수 있음

HTTP 바디 : 헤드의 끝을 나타내는 CRLF뒤 모든 줄. 클라이언트나 서버에게 전송하려는 데이터.

HTTP 요청

서버에게 특정 동작을 요구하는 메시지.

시작줄

메소드 : URI가 가리키는 리소스 대상으로 서바가 수행하길 바라는 동작. 대표적으로 GET, POST.

  -GET : 리소스를 가져오라는 메소드

  -POST : 리소스로 데이터를 보내라는 메소드. 전송한 데이터는 보통 HTTP 바디에 포함

요청 URI: : 메소드의 대상

HTTP 버전 : 클라이언트가 사용하는 HTTP 프로토콜의 버전

헤더와 바디 : 위와 동일

 

HTTP 응답

HTTP 요청에 대한 결과를 반환하는 메시지

시작줄

HTTP 비전 : 서버에서 사용하는 HTTP 프로토콜의 비전.

상태 코드 : 요청에 대한 처리 결과를 세자리수로 나타냄

처리 사유 : 상태코드가 발생한 이유

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

 

HTTPS(HTTP over Source socket layer)

TLS(Transport Layer Security) 프로토콜을 도입하여 HTTP의 보안 문제점 보완.

TLS는 서버와 클라이언트 사이에 오가는 모든 HTTP 메시지를 암호화함.

 

 

3. 웹 브라우저(Web Browser)

 

웹 브라우저

서버와 http 통신을 대신해주고 수신한 리소스를 시각화해주는 소프트웨어.

뛰어난 이용자 경험(UX)을 제공

 

URL(Uniform Resource Locator)

웹에 있는 리소스의 위치를 표현하는 문자열

url 요소

Scheme	웹 서버와 어떤 프로토콜로 통신할지
Host	Authority의 일부로, 접속할 웹 서버의 주소에 대한 정보
Port	Authority의 일부로, 접속할 웹 서버의 포트에 대한 정보
Path	접근할 웹 서버의 리소스 경로로 '/'로 구분
Query	웹 서버에 전달하는 파라미터이며 URL에서 '?' 뒤에 위치
Fragment	메인 리소스에 존재하는 서브 리소스를 접근할 때 이를 식별하기 위한 정보. '#' 문자 뒤에 위치

 

Domain Name

url 구성 요소 중 host는 domain name, ip address의 값을 가질 수 있음.

ip address는 네트워크 상에서 통신이 이루어질 때 장치를 식별하기 위해 사용하는 주소.

이를 외우긴 어려우므로 도메인의 특성을 담은 이름을 ip 대신 사용

domain name을 host 값으로 사용할 때 브라우저는 Domain Name Server(DNS)에서 응답한 IP 주소를 사용함

 

웹 렌더링(Web Rendering)

서버로부터 받은 리소스를 이용자에게 시각화하는 행위

서버의 응답을 받은 웹 브라우저는 리소스 타입을 확인, 적절한 방식으로 이용자에게 전달

사파리 - 웹킷 / 크롬 - 블링크 / 파이폭스 - 개코

 

 

4. Browser DevTools

 

개발자 도구

브라우저를 열고 f12를 누르면 개발자 도구창이 브라우저에 나타남

 

요소 검사 : 특정 요소의 개괄적인 정보 파악, 이와 관련된 코드를 쉽게 찾을 수 있음

디바이스 툴바(device toolbar): 현재 브라우저의 화면 비율 및 user-agent를 원하는 값으로 변경 가능

elements : 현재 구성하는 html의 코드를 읽을 수 있으며 수정도 가능

콘솔(console): 프론트엔드의 자바스크립트 코드에서 발생한 각종 메시지를 출력하고 이용자가 입력한 자바스크립트 코드를 실행해주는 도구

sources : 현재 페이지를 구성하는 웹 리소스들을 확인할 수 있음

   - debug : 원하는 자바스크립트를 디버깅할 수 있음

Network : 서버와 오가는 데이터를 확인

application : 쿠키, 캐시, 이미지, 노트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회

console drawer : 개발자 도구에 새로운 콘솔창을 열어 가시성과 효율성을 높임

 

기타 브라우저 기능

페이지 소스 보기 : 페이지 관련 소스코드 확인

Secret Browsing mode : 새 브라우저 세션이 생성되며 브라우저 종료 시 방문 기록이나 쿠키 등의 항목이 저장되지 않음