3 Way-Handshake 란 전송 제어 프로토콜(TCP)에서 통신을 하는 장치간 서로 연결이 잘 되어있는지 확인하는 과정, 방법

TCP / IP Model의 Transport 계층에는 크게 TCP(Transmission Control Protocol) 와 UDP(User Datagram Protocol) 2가지 프로토콜이 있다.

• TCP

• 연결지향적*이며 오류제어, 흐름제어, 혼잡제어, 타이머재전송 등의 기능을 하며 연결지향이란말은 데이타를 전송하는 측과 데이타를 전송받는 측에서 전용의 데이타 전송 선로(Session)을 만든다는 의미이다. 데이타의 신뢰도가 중요하다고 판단될때 주로 사용된다.

• UDP

• 비연결지향*이며, 최소한의 오류제어 기능만 수행한다. 단순히 데이타를 받거나, 던져주기만 하는 프로토콜이다. UDP는 특히 실시간 멀티미디어 정보를 처리하기 위해서 주로 사용한다.

TCP에서 연결지향적인 특성을 갖게 해주는 과정, 방법이 바로 3 Way-Handshake 방식이다.

TCP의 3-way Handshaking 과정

step 1 (클라이언트 -> 서버)

A클라이언트는 B서버에 접속을 요청하는 SYN 패킷을 보낸다. 이때 A클라이언트는 SYN 을 보내고 SYN/ACK 응답을 기다리는SYN_SENT 상태 가 되는 것이다.

step 2 (서버 -> 클라이언트)

이때 서버는 Listen 상태로 포트 서비스가 가능한 상태여야 한다. (Closed :닫힌상태) B서버는 SYN요청을 받고 A클라이언트에게 요청을 수락한다는 ACK 와 SYN flag 가 설정된 패킷을 발송하고 A가 다시 ACK으로 응답하기를 기다린다. 이때 B서버는 SYN_RECEIVED 상태가 된다.

step 3 (클라이언트 -> 서버)

A클라이언트는 B서버에게 ACK을 보내고 이후로부터는 연결이 이루어지고 데이터가 오가게 되는것이다. 이때의 B서버 상태가 ESTABLISHED 이다.

1번에 seq넘버를 보내고 2번에 ack로 1번인 넘버에 1이 추가되었음을 알 수 있다.동시에 서버역시 seq넘버를 보낸다.3번 클라이언트의 ack도 서버가 보낸 seq넘버에 1이 더해졌다

이런식으로 랜덤한 숫자를보내고 잘받았다는 ack로 1을 더해주는 방식을 사용한다. 위 방식을 통해 TCP는 연결지향적인 특성과 자체적으로 오류를 처리하며 순서가 뒤바뀐 패킷을 교정해주는 기능이 더불어 주로 데이터의 신뢰도가 중요하다고 판단되어질 때 쓰인다.

신뢰도 확보가 중요하거나 용량이 큰 데이터를 전달해야 때, 실시간일 필요는 없을 때 활용 된다.

출처: https://sleepyeyes.tistory.com/4 https://mindnet.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-22%ED%8E%B8-TCP-3-WayHandshake-4-WayHandshake

처음에 웹서버에 요청할 때 데이터가 없는 문서를 반환한다. HTML 및 static파일들이 로드 되면서 데이터가 있다면, 데이터 또한 서버에 요청하고 그것이 화면상에 나타나게 된다.

Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라서 javascript를 통해 동적으로 Rendering한다. 필요에 따라 데이터를 서버에 요청해서 받아와 Rendring한다.

SSR

완전하게 만들어진 HTML파일을 받아오고 Rendering하게 된다.

웹서버에 요청할때 마다 Browser 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식.

SSR과 CSR 비교

1. 초기 View로딩 속도

• SSR의 경우 View를 서버에서 렌더링 하여 가져오기 때문에 첫 로딩이 매우 짧다.

• 물론 JS파일을 모두 다운로드하고 적용하기 전까지는 그 어떤 인터랙션에도 반응하지 않지만 사용자 입장에서는 로딩이 매우 빠르다고 느낄 수 있다.

• 반면 CSR의 경우 서버에서 View를 렌더하지 않고 HTML 다운 + JS파일 + 각종 리소스 다운을 받은 후 브라우져에서 렌더링을 하기 때문에 SSR보다는 초기 View 로딩 속도는 오래걸린다.

2. SEO 문제

• SEO(검색 엔진 최적화)의 문제가 존재한다. CSR방식으로 이루어진 사이트에서는 View를 생성하기위해 자바스크립트를 실행시켜야 한다. 하지만 대부분의 웹 크롤러 봇들은 자바스크립트 파일을 실행시키지 못한다.
• 때문에 HTML 에서만 콘텐츠를 수집하게 되고 CSR 페이지를 빈 페이지로 인식하게 된다.

3. 보안 문제

• SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 했다.

• 그러나 CSR일 경우 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다

Next js는 여러가지 유용한 기능을 기본 으로 제공

• Server Rendering
• Static Exporting
• Zero Configuration
• CSS in JS 등

SSR (Server Side Rendering)을 기본으로 사용

파일 시스템 기반의 라우팅 기능을 제공

Next js 모든 페이지 사전 렌더링 (Pre-rendering) 더 좋은 퍼포먼스 검색엔진 최적화(SEO)

1. 정적생성
2. Server Side Rendering (SSR, Dynamic Rendering)

차이점은 언제 html 파일을 생성하는가 [정적생성]

• 프로젝트가 빌드하는 시점에 html 파일들이 생성
• 모든 요청에 재사용
• 퍼포먼스 이유로, Nest js는 정적 생성을 권고
• 정적 생성된 페이지들은 CDN에 캐시
• getStaticProps / getStaticPaths

[서버사이드 렌더링]은 매 요청마다 html 을 생성

• 항상 최신 상태 유지
• getServerSideProps

when to use Static?

• 마케팅 페이지
• 블로그 게시물
• 제품 목록
• 도움말, 문서 (미리 만들어 두는 경우)

when to use Server-Side Rendering?

• 항상 최신 상태 유지
• 관리자 페이지
• 분석 차트

출처: https://www.youtube.com/watch?v=Ujjdn2wMIew&list=PLZKTXPmaJk8Lx3TqPlcEAzTL8zcpBz7NP&index=1 https://nextjs.org/ https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/

메모리

C에는 아래와 같은 여러 자료형이 있고, 각각의 자료형은 서로 다른 크기의 메모리를 차지 합니다.

bool: 불리언, 1바이트 char: 문자, 1바이트 int: 정수, 4바이트 float: 실수, 4바이트 long: (더 큰) 정수, 8바이트 double: (더 큰) 실수, 8바이트 string: 문자열, ?바이트

컴퓨터나 노트북, 스마트폰에는 아래 사진과 같은 RAM이라고 하는 물리적 칩이 메모리 역할을 합니다. 아래 사진에서 여러 개의 노란색 사각형이 메모리를 의미하고, 작은 사각형 하나가 1Byte를 의미합니다. 예를 들어 char 타입의 변수를 하나 생성하고, 그 값을 입력한다고 하면 위 사진에서 한 사각형 안에 그 변수의 값이 저장되는 것이다.

배열

아래와 같이 세 개의 점수를 저장하고 그 평균을 출력하는 프로그램이 있습니다.

만약 점수의 개수가 더 많아진다면 이 프로그램은 많은 부분을 수정해줘야 합니다. 이 때 활용할 수 있는 것이 배열의 개념입니다. 배열은 같은 자료형의 데이터를 메모리상에 연이어서 저장하고 이를 하나의 변수로 관리하기 위해 사용됩니다.

위 코드는 배열을 이용하면 아래와 같이 바꿀 수 있습니다. int scores[3]; 이라는 코드는 int 자료형을 가지는 크기 3의 배열을 scores 라는 이름으로 생성하겠다는 의미입니다.

배열의 인덱스는 0부터 시작하기 때문에, scores의 인덱스는 0, 1, 2 세 개가 있습니다. 이 인덱스를 변수명 뒤 대괄호 [ ] 사이에 입력하여 배열의 원하는 위치에 원하는 값을 저장하고 불러올 수 있습니다.

하지만 위와 같은 코드는 문제점이 있습니다.

1. 배열의 정적인 크기 (scores 배열의 크기 3으로 고정)
2. 배열의 크기와 평균을 구할때 나누는 갯수가 같다

=> 이러한 문제점이 복합적으로 적용된다면 추후에 유지보수시 문제점이 될 수 있습니다. => 이러한 문제점은 다음의 전역변수 및 배열의 동적 선언 및 저장으로 해결할 수 있습니다.

전역 변수

아래 코드에서 scores 배열의 크기를 정해주는 N이라는 변수를 새로 선언하였습니다. 만약 N이 고정된 값(상수)이라면 그 값을 선언할 때 const를 앞에 붙여서 전역 변수, 즉 코드 전반에 거쳐 바뀌지 않는 값임을 지정해줄 수 있습니다.

배열의 동적 선언 및 저장

아래 코드에서와 같이 루프와 함수를 선언하여 좀 더 동적인 프로그램을 작성할 수 있습니다.

여기서는 배열의 크기를 사용자에게 직접 입력 받고, 배열의 크기만큼 루프를 돌면서 각 인덱스에 해당하는 값을 역시 사용자에게 동적으로 입력 받아 저장합니다. 그리고 average 라는 함수를 따로 선언하여 평균을 구합니다. average 함수는 length 와 array[], 즉 배열의 길이와 배열을 입력으로 받습니다. 함수 안에서는 배열의 길이만큼 루프를 돌면서 값의 합을 구하고 최종적으로 평균값을 반환합니다. 이와 같은 방법을 통해서 임의의 점수 개수와 점수 배열에 대해서 동적으로 평균값을 구하는 프로그램을 작성할 수 있습니다.

출처: https://www.edwith.org/boostcourse-cs-050/lecture/119014/ https://www.edwith.org/boostcourse-cs-050/lecture/119015/

컴파일은 소스코드를 오브젝트 코드로 변환 시키는 과정. 소스코드란 개발자가 C언어와 같은 프로그래밍 언어로 작성한 코드, 오브젝트 코드란 기계어 라고도 알려져 있는데,0과 1로 이루어져 있으며, 컴퓨터에게 프로그램이 어떻게 실행되어야 하는지 알려주는 코드

컴파일의 전체 과정은 4단계로 나누어 볼 수 있다.

예시 - C 코드

전처리(Precompile)

전처리는 전처리기에 의해 수행된다. 전처리기에게 실절적인 컴파일이 이루어지기 전에 무언가를 실행하라고 알려준다.

예를들어, #include는 전처리기에게 다른 파일의 내용을 포함시키라고 알려준다. 프로그램의 소스코드에 #include <stdio.h>와 같은 줄을 포함하면, 전처리기는 새로운 파일을 생성하는데, 이 파일은 여전히 C 소스코드 형태이며, stdio.h 파일의 내용이 #include 부분에 포함된다.

컴파일(Compile)

컴파일러라고 불리는 프로그램은 C 코드를 어셈블리어라는 저 수준 프로그래밍 언어로 컴파일 한다.

어셈블리는 여러 연산들이 함께 사용되면 C에서 할 수 있는 모든 것들을 수행할 수 있다. C코드를 어셈블리코드로 변환시켜줌으로써 컴파일러는 컴퓨터가 이해할 수 있는 언어와 치대한 가까운 프로그램으로 만들어 준다. 컴파일이라는 용어는 소스코드 => 오브젝트 코드로 변환하는 전체 과정을 통틀어 일컫기도 하는데, 구체적으로 전처리한 소스코드를 어셈블리 코드로 변환시키는 단계를 말하기도 한다.

어셈블(Assemble)

소스코드가 어셈블리 코드로 변환되면, 다음 단계인 어셈블 단계로 어셈블리 코드를 오브젝트 코드로 변환 시키는 것이다. 컴퓨터가 이해할 수 있는 명령어 형태인 연속된 0과 1들로 바꿔주는 작업. 이 변환 작업은 어셈블러라는 프로그램이 수행한다.

소스코드에서 오브젝트 코드로 컴파일 되어야 할 파일이 오직 한개라면, 컴파일 작업은 여기서 끝이 나지만 그렇지 않은 경우에 링크라 불리는 단계가 추가된다.

링크(Link)

만약 프로그램이 (cs50.h, math.h와 같은 라이브러리를 포함해)여러 개의 파일로 이루어져 있어 하나의 오브젝트 파일로 합쳐져야 한다면 링크라는 컴파일의 마지막 단계가 필요하다. 링커는 여러 개의 다른 오브젝트 코드 파일을 실행 가능한 하나의 오브젝트 코드 파일로 합쳐준다.

출처: https://www.edwith.org/boostcourse-cs-050/lecture/119011/