Chapter1. 웹 애플리케이션 아키텍쳐
1.클라이언트-서버 아키텍처를 이해할 수 있다.
2.HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다.
3.API의 개념을 이해할 수 있다.
Chapter2. 브라우저의 작동 원리 (보이지 않는 곳)
4.보이지 않는 곳의 통신을 이해할 수 있다.
5.URL과 URI의 차이를 이해할 수 있다.
6.IP 주소와 PORT에 대해 이해할 수 있다.
7.DNS와 IP 주소의 관계를 설명할 수 있다.
8.크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다.
Chapter3. HTTP
9.HTTP의 동작 방식을 이해할 수 있다.
10.HTTP Messages의 구조를 설명할 수 있다.
11.HTTP Requests와 Responses를 구분할 수 있다.
12.HTTP의 응답 메시지를 찾아볼 수 있다.
Chapter4. 브라우저의 작동 원리 (보이는 곳)
13.보이는 곳의 통신을 이해할 수 있다.
14.AJAX의 개념을 이해할 수 있다.
15.SSR과 CSR의 차이를 이해할 수 있다.

1.이름은 거창한 것 같지만 서버와 클라이언트로 나눠져 있다는 뜻이다. 서버와 클라이언트는 특정한 규약(HTTP, API 등)으로 의사소통한다.

2.HTTP는 HyperText Transfer Protocol의 줄임말로 HTTP를 이용해 HTML과 같은 문서를 전송할 수 있다. 

3.API(Application Programming Interface)는 이름 그대로 프로그래밍이 가능한 앱의 인터페이스라고 볼 수 있다. 프로그래밍된 클라이언트에서는 API를 이용해 서버에 요청을 전송할 수 있다. 여기서 중요한 메서드는 GET, POST, PUT or PATCH, DELETE로 조회, 추가, 갱신, 삭제의 기능을 가지고 있다. 

4.보이지 않는 곳이지만 개발자도구의 network부분을 통해서 엿볼 수 있다.

5.URI가 사실 일반적으로 URL이라고 생각하는 부분이며 URI는 URL의 기본요소에  query, bookmark 기능을 포함하고 있어 URL의 상위요소입니다.

6.ip주소는 기존의 ipv4에서 ipv6으로 변경되고 있으며 기존의 43억개의 주소에서 340간(3.4*10^38)으로 대략 8양(7.9*10^28)배 더 많은 주소를 할당할 수 있다. PORT는 pc에 접속할 수 있는 통로를 의미하는데 한 프로그램이 특정 포트를 점유하고 있다면 다른 프로그램은 그 포트를 이용할 수 없으며 2^16개(0~65535)중 0~1024번 까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있다. 

7.DNS와 IP는 마치 데이터와 변수명의 관계처럼 필요한 IP를 정확하게 알기 어렵기 때문에 그 주소값을 DNS(변수, 상수처럼)에 기록한 후 DNS(변수)를 호출할 경우 기록된 주소를 찾아 IP(데이터의 주소)로 안내된다.

8.에러메세지에 대부분의 내용이 포함되어 있기 때문에 알 수 있으며 익숙하지 않은 메세지는 검색을 통해 바로 확인할 수 있다.

9.HTTP는 필요한 자료를 일정한 Protocol(규약)을 통해 안정적으로 주고받는 시스템이다.

10.Messages는 Requests와 Responses인 요청과 응답으로 나뉘며 아래와 같은 유사한 구조를 가지고 있다.
start line : start line에는 요청이나 응답의 상태를 나타냅니다. 항상 첫 번째 줄에 위치합니다. 응답에서는 status line이라고 부릅니다.
HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다.
empty line : 헤더와 본문을 구분하는 빈 줄이 있습니다.
body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용합니다.


11.requsets는 요청을 보내는 것이고 responses는 요청에 대한 응답을 받는 것이다. 하지만 요청에 대한 응답뿐 아니라 일방적으로 보내오는 메시지(카톡 알림, 페이지 alert 등)도 포함된다. 요청은 GET, POST, HEAD, OPTIONS 등의 method로 확인할 수 있으며 응답은 상태 코드를 포함시켜 요청의 결과를 나타낸다. (ex. 200, 302, 404 등)

12.개발자도구의 Network부분에서 확인할 수 있다.

13.보이는 부분은 AJAX를 이용해 실시간으로 랜더링을 해준다. 이전과의 차이점은 표준화된 방법으로 여러 브라우저에 공통적으로 사용할 수 있으며 필요한 부분만 요청하기 때문에 저 작은 대역폭에서 자료를 주고받을 수 있으며 더 빠르게 할 수 있다.

14.AJAX는  Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다.
이름과 같이 비동기적을 필요한 부분의 데이터만 받아올 수 있다.

15.SSR은 서버 사이드이며 CSR은 클라이언트 사이드 랜더링으로 클라이언드와 서버 중 어떤 부분에서 랜더링의 과부하?를 감당하는지가 구분된다고 생각된다. 느린 초기시작과 빠른 시행을 원한다면 클라이언트사이드 랜더링을 추천하지만 가벼운 무게와 어느정도 속도를 포기한다면 서버사이드에서 랜더링을 받아오는 것이 좋을 수 있다.

오늘은 회고 체크용 리스트가 너무 많은 것 같다.
동기분들에게 조언을 이것저것 들었는데 역시 css도 중요하지만 조금 더 흥미있는 코딩테스트를 골드까지 올리는 쪽이 더 적합한 것 같다.

'회고' 카테고리의 다른 글

학습(Three, css)  (0) 2022.06.11
[HTTP/네트워크] 실습  (0) 2022.06.10
[React] React State & Props-2  (0) 2022.06.08
[React] React State & Props  (0) 2022.06.07
예습 (React State & Props)  (0) 2022.06.06

+ Recent posts