7주 4일차 - 네트워크 기초

7주 4일차 - 네트워크 기초

1. 배운 것

• 데일리코딩 11번
• 클라이언트, 서버, api
• HTTP 메서드
• HTTP 요청, 응답 메세지 내용

2. 내용 정리

데일리코딩 - 11번

• 이상, 이하로 조건을 주어 중복된 최대길이 또는 최소길이의 요소가 마지막에 오는 요소로 최댓값, 최솟값을 담은 변수에 재할당된다.
• 최댓값, 최솟값 요소의 index도 변수에 담아야 for문으로 새 배열에 요소들을 넣을 때 해당 index의 요소를 제외시킬 수 있다.

네트워크 기초

• 클라이언트: 손님
• 서버: 종업원
• API: 메뉴판
• 클라이언트는 서버가 이해할 수 있는 방식으로 서버에 요청을 보내야 서버에서 클라이언트가 요청한 자원을 제공해줄 수 있다. 이 클라이언트와 서버가 통신을 할 때 지켜야 하는 통신 규약을 프로토콜 이라고 한다. HTTP 가 대표적인 프로토콜이다.
• 클라이언트와 서버는 서로 HTTP 프로토콜을 사용하여 소통한다. 이 때 HTTP를 이용하여 주고받는 메세지를 HTTP 메세지라 한다.
• API는 서버가 가진 자원들을 클라이언트가 쉽게 파악하고 요청할 수 있도록 만든 인터페이스 이다. 즉 가게의 메뉴판과 같은 역할을 한다.
• HTTP 메서드
  • 조회: GET
  • 추가: POST
  • 갱신: PUT(또는 PATCH)
  • 삭제: DELETE

브라우저의 작동 원리 - 보이지 않는 곳

URL과 URI

• URL(Uniform Resource Locator): 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보.
• URI(Uniform Resource Identifier): 인터넷 상에서 특정 자원을 나타내는 “유일"한 주소. URL의 구성요소에 query, bookmark를 포함. 즉, URI 는 URL을 포함하는 상위개념이다. (타입스크립트와 자바스크립트의 관계)
• URL의 구성요소
  • scheme → 요청하는 프로토콜의 형식을 지정. (http, ftp, https 등등 7계층 프로토콜)
  • hosts → 도메인 주소 또는 ip 주소
  • url-path → 웹 서버에서 지정한 루트 디렉토리부터 파일이 위치한 곳 까지의 경로
• URI의 구성요소: url의 구성요소 3가지를 포함하며 아래 2가지가 추가됨.
  • query → 웹 서버에 전달하는 추가 질문
  • bookmark

IP와 포트

• IP(Internet Protocol): 인터넷상에서 사용하는 주소체계. 네 덩이의 숫자로 구분됨.
• IPv4(Internet Protocol version 4): IP 주소체계의 네 번째 버전. 각 덩어리마다 0부터 255까지 나타낼 수 있다.
• localhost, 127.0.0.1 : 현재 사용 중인 로컬 PC.
• 0.0.0.0, 255.255.255.255 : broadcast address, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소. 서버에서 접근 가능 IP 주소를 broadcast address 로 지정하면, 모든 기기에서 서버에 접근 가능.
• PORT: IP 주소가 가리키는 PC에 접속할 수 있는 통로. 포트 번호는 0~65535 까지 사용할 수 있다. 하지만 0 ~ 1024번 까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있다.
  • 22: SSH
  • 80: HTTP
  • 443: HTTPS

브라우저의 작동 원리 - 보이는 곳

AJAX(Asynchronous JavaScript And XMLHttpRequest)

• ajax: 서버와 통신할 수 있게(HTTP 메소드 사용) 도와주는 자바스크립트 문법. 브라우저가 서버에 요청을 보내고 응답을 받는 동안에도 계속해서 페이지를 사용할 수 있도록 fetch API로 비동기적으로 서버에서 데이터를 받아와 브라우저에 렌더링(받아온 데이터를 DOM에 적용)을 하는 기법을 말한다.
• ajax의 장점: 새로고침 없이 서버와 통신할 수 있다.
• ajax의 단점:
  • html 문서에 데이터가 없기 때문에 seo에 불리
  • 이전 상태를 기억하지 않기 때문에 뒤로가기 구현을 위해 별도 api 필요(History API)

SSR 과 CSR

• SSR(Server Side Rendering)
  • 서버의 데이터가 필요한 경우에 웹 페이지를 브라우저로 보내기 전에 **“서버”**에서 완전히 렌더링한다.
  • 사용자가 브라우저의 다른 경로로 이동하면 서버는 같은 작업을 다시 수행한다.
• CSR(Client Side Rendering)
  • 브라우저에서 페이지를 렌더링한다.
  • 사용자가 다른 경로를 요청할 때마다 새로고침 하지 않고 동적으로 라우팅을 관리한다.

종합퀴즈

• HTTP message “응답” 에서는 어떤 HTTP 메서드를 사용했는지는 알 수 없다. ”요청" 메세지의 startline에서만 확인 가능하다.

줌 세션 - 네트워크 기초

• 서버가 없다면 앱을 몇 초마다 새로 업데이트를 받아야 함!
• 프로토콜: 규약, 약속
• 클라이언트가 서버와 통신하기 위한 규약: http 프로토콜
• 1번의 요청에는 1번의 응답만 있다. 요청하지 않았는데 응답이 오는 경우: websocket으로 요청 없이 응답이 오게 구현.
• http 요청 메세지 첫 줄의 ‘/’ 는 url-path 자리이다.
• url은 쿼리와 북마크가 없기 때문에 url-path는 그 이전까지이다.
• restful 한 api 작성: 사용할 메서드를 굳이 url에 명시할 필요 없음. /users 가 /get-users 보다 나은 url디자인이다.
• 현대의 웹 주소는 url이 아닌 uri가 대부분임.
• 1 ~ 1000번 대의 포트는 이미 사용할 프로토콜이 정해져 있어 빈번히 사용되므로 이런 포트들은 url에서 생략이 되어 있음. 하지만 자주 사용하지 않는 포트로 url 디자인을 하려면 해당 포트를 명시해 주어야 함.
• fetch API와 DOM 이 합쳐진게 AJAX 라고 생각하면 됨.
  • 예시: 검색창 추천검색어 부분렌더링 시 AJAX 사용.

REST API 연습용 리액트 클론코딩

• string does not match the pattern of ~~~ : package.json 파일에 영문 대문자로 내용을 작성하면 문제가 생긴다. 소문자로만 작성한다. 띄어쓰기가 있을 경우 반드시 하이픈(-)으로 구분한다. 공식문서 링크
• Unhandled Runtime Error 해결이 안되는중.

선형 검색과 이진 검색

• 빅오 표기법에서 정수는 모두 제외시키고 나타낸다. 빅오 표기법은 항상 최악의 경우를 기준으로 함.
• 선형 검색(Linear Search): 한번에 하나씩 비교. 최악의 경우 모든 요소를 한번씩 비교해야 한다. 시간 복잡도는 O(n) 이다.
• 이진 검색(Binary Search): 전체 요소 중 정 가운데부터 비교하며 일치하지 않는 부분을 빠르게 제외시키고 나머지에서 또 정 가운데에서 비교. 시간 복잡도는 O(log n) 이다.

// 선형 검색 예시(indexOf 방식)
// 찾는 요소의 인덱스를 리턴
// 배열에 찾는 요소가 없는 경우 -1을 리턴

function linearSearch(arr, target) {
	for (let i = 0; i < arr.length; i++) {
		if (arr[i] === target) return i;
	}
	return -1; 
}

이진 검색

• 이진 검색은 반드시 정렬된 배열에 사용해야 한다!!
• 의사 코드
  1. 정렬된 배열을 인자로 받는 이진 검색 함수를 정의한다.
  2. 좌측 포인터와 우측 포인터, 중간값 3개의 변수를 선언한다.
  3. for문 선언: 좌측 포인터가 우측 포인터가 앞에 있는(더 작은 인덱스) 동안에만 반복문이 계속되게 해야 한다.
     1. 원하는 값을 찾으면 인덱스를 리턴.
     2. 값이 너무 작을 경우 좌측 포인터의 값을 중간 인덱스로 재할당.
     3. 값이 너무 클 경우 우측 포인터의 값을 중간 인덱스로 재할당.
     4. 원하는 값을 찾지 못할 경우 -1을 리턴.

// 이진 검색 알고리즘

function binarySearch(sortedArr, target) {
  let start = 0;
  let end = sortedArr.length - 1;
  let middle = Math.floor((start + end) / 2); // 올림 해도 상관없음.
  while (sortedArr[middle] !== target && start <= end) {
    // 찾는 수가 중간값보다 작거나 큰 경우의 좌, 우 포인터 재할당
    target < sortedArr[middle] ? (end = middle - 1) : (start = middle + 1);
    middle = Math.floor((start + end) / 2); // 중간값 재할당
  }
  return sortedArr[middle] === target ? middle : -1;
}