CS 프로세스와 스레드/ 쿠키 세션

CS.md

@@ -3,3 +3,211 @@
 ## Computer Science
 
 <b>프론트엔드 기술 면접을 위한 핸드북 만들기</b>
+
+기본적으로 제가 이전에 공부했던 내용을 정리하지만,
+
+더 쉽고 이해가 되는 방향의 양질의 자료가 있을 경우 해당 자료를 대신 넣기도 합니다
+
+제가 모르는 부분인데 정리가 필요한 부분은 주로 [Interview_Question_for_Beginner 🔥](#https://github.com/JaeYeopHan/Interview_Question_for_Beginner) 를 참고합니다!
+
+정말 두고두고 보기 좋은 자료가 많으며 기업에 대한 [역 질문 리스트 📌](https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/Reverse_Interview) 또한 존재합니다
+
+## 목차
+
+- [프로세스와 스레드 🔥](#프로세스와-스레드)
+
+  - 프로세스가 뭔가요?
+  - 스레드가 뭔가요?
+  - 프로세스와 스레드는 어떤 차이가 있나요?
+
+- [HTTP 🔥](#HTTP)
+- [쿠키 세션 🔥](#쿠키-세션)
+
+  - 쿠키, 세션을 왜 쓰나요?
+  - 쿠키가 뭔가요?
+  - 세션이 뭔가요?
+  - 쿠키와 세션의 차이는 어떤 점이 있을까요?
+
+- [CORS 🔥](#CORS)
+- [웹팩 🔥](#웹팩)
+
+## 프로세스와 스레드
+
+### `프로세스가 뭔가요?`
+
+**프로세스는 운영체제로부터 자원을 할당받은 작업의 단위이다**
+
+### `스레드가 뭔가요?`
+
+**스레드는 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위이다**
+
+<details>
+<summary>프로그램 > 프로세스 > 스레드 </summary>
+
+<br/>
+
+출처: [velog, 프로세스와 스레드의 차이 🔥](https://velog.io/@raejoonee/%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4%EC%99%80-%EC%8A%A4%EB%A0%88%EB%93%9C%EC%9D%98-%EC%B0%A8%EC%9D%B4)
+
+### 프로그램 > 프로세스 🔥
+
+먼저 프로세스와 스레드에 대해 본격적으로 설명하기 전에 프로그램에 대해서 설명하고 가야 한다.
+
+프로그램이란, **파일이 저장 장치에 저장되어 있지만 메모리에는 올라가지 않은 정적인 상태** 를 말한다.
+
+1. **메모리에 올라가 있지 않은** : 아직 운영체제가 프로그램에게 독립적인 메모리 공간을 할당해주지 않았다는 뜻이다.
+   모든 프로그램은 운영체제가 실행되기 위한 메모리 공간을 할당해 줘야 실행될 수 있다.
+
+2. **정적인 상태** : 정적이라는 단어 그대로, 아직 실행되지 않고 가만히 있다는 뜻이다.
+
+프로그램이라는 단어는 아직 실행되지 않은 파일 그 자체를 가리키는 말이다. **그냥 코드 덩어리다.**
+
+프로그램에게 의미를 부여하기 위해 프로그램을 실행해 보자.
+
+프로그램을 실행하는 순간 해당 파일은 컴퓨터 메모리에 올라가게 되고, 이 상태를 동적인 상태라고 하며 이 상태의 프로그램을 **프로세스** 라고 한다.
+
+따라서 위키피디아에서는 프로세스에 대해 정의를 내릴 때 그냥 **실행되고 있는 컴퓨터 프로그램** 이라고 정의를 내리고 있으며, 스케줄링 단계에서의 **"작업"** 과 같은 단어라고 봐도 무방하다고 하고 있다.
+
+#### 한 줄 요약: 프로그램은 코드 덩어리 파일, 그 프로그램을 실행한 게 프로세스
+
+### 프로세스 > 스레드 🔥
+
+과거에는 프로그램을 실행할 때 실행 시작부터 실행 끝까지 프로세스 하나만을 사용해서 진행했다고 한다. 하지만 시간이 흐를수록 프로그램이 복잡해지고 프로세스 하나만을 사용해서 프로그램을 실행하기는 벅차게 되었다. 실제로 이제는 프로그램 하나가 단순히 한 가지 작업만을 하는 경우는 없다. 그러면 이제 어떻게 해야할까?
+
+쉽게 떠오르는 방법은, **"한 프로그램을 처리하기 위한 프로세스를 여러 개 만들면 되지 않을까?"** 생각이 들지만 이는 불가능한 일이었다. 왜냐하면 운영체제는 안전성을 위해서 프로세스마다 자신에게 할당된 메모리 내의 정보에만 접근할 수 있도록 제약을 두고 있고, 이를 벗어나는 정보에 접근하려면 오류가 발생하기 때문이다.
+
+아무튼 프로세스와는 다른 더 작은 실행 단위 개념이 필요하게 되었고, 이 개념이 바로 **스레드** 다.
+
+스레드는 프로세스와 다르게 스레드 간 메모리를 공유하며 작동한다.
+
+스레드끼리 프로세스의 자원을 공유하면서 프로세스 실행 흐름의 일부가 되는 것이다.
+
+아까 프로그램이 코드 덩어리라고 했는데, 스레드도 코드에 비유하자면 스레드는 코드 내에 선언된 함수들이 되고 따라서 function Add(){} 또한 일종의 스레드라고 볼 수 있게 되는 것이다.
+
+<img src="./cs_images/1.png" alt="스레드">
+
+### 프로세스와 스레드의 작동 방식에 대한 더 자세한 설명
+
+운영체제는 프로세스가 메모리에 올라갈 때, 프로세스마다 각각 독립된 메모리 영역을, Code/Data/Stack/Heap의 형식으로 할당해 준다.
+
+각각의 독립된 메모리 영역을 할당해 주기 때문에 프로세스는 다른 프로세스의 변수나 자료에 접근할 수 없다.
+
+<img src="./cs_images/2.png" alt="프로세스와 OS">
+
+이와 다르게 스레드는 같은 프로세스 내의 메모리를 서로 공유할 수 있다.
+
+프로세스가 할당받은 메모리 영역 내에서 Stack 형식으로 할당된 메모리 영역을 따로 할당받고, 나머지 Code/Data/Head 형식으로 할당된 메모리 영역을 공유한다.
+
+따라서 각각의 스레드는 별도의 스택을 가지고있지만 힙 메모리는 서로 읽고 쓸 수 있게 된다.
+
+<img src="./cs_images/3.png" alt="스레드">
+
+</details>
+
+### `프로세스와 스레드는 어떤 차이가 있나요?`
+
+그냥 면접관이 프로세스와 스레드의 차이가 궁금해서 물어볼까?
+
+아니다. 기본적인 이유는 본문 맨 위에서 언급했듯 지원자가 프로그램, 프로세스, 스레드에 대한 기본 개념에 대해 잘 이해하고 있는지 확인하기 위함이다.
+
+<br/>
+
+프로세스와 스레드는 개념의 범위부터 다르다. 스레드는 프로세스 안에 포함되어 있기 때문이다.
+
+프로세스는 프로그램을 실행하는 순간 해당 파일이 컴퓨터 메모리에 올라가게 되고, 이 동적인 상태의 프로그램을 프로세스라고 한다.
+
+스레드는 프로세스를 구성하는 더 작은 실행 단위의 개념이다.
+
+프로세스는 메모리에 올라갈 때 운영체제로부터 독자적인 시스템 자원을 할당 받는 반면, 스레드는 프로세스 내부에서 다른 메모리 영역을 같은 프로세스 내 다른 스레드와 공유한다.
+
+## HTTP
+
+## 쿠키 세션
+
+### 쿠키, 세션을 왜 쓰나요?
+
+HTTP는 항상 연결되어있는 것이 아닌 필요할 때마다 요청을 보내고 응답을 반는 비연결성이라는 특징을 가지고 있다.
+
+이는 클라이언트가 응답을 받으면 서버는 접속을 끊는다는 것인데, 연결이 끝나면 상태 정보가 유지되지 않는 특성이 있다.
+
+```
+로그인을 한 뒤, 다른 도메인으로 이동했다 기존 사이트로 돌아오면 로그인 정보가 유지되지 않는다는 것
+```
+
+이렇게 유지되지 않는 로그인 정보를 유지하기 위한 방법이 쿠키와 세션이다.
+
+### 쿠키가 뭔가요?
+
+HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다.
+
+HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다.
+
+#### 쿠키의 특징
+
+- 이름, 값, 만료일(저장 기간 설정), 경로 정보로 구성되어 있다.
+- 클라이언트에 총 300개의 쿠키를 저장할 수 있다.
+- 하나의 도메인 당 20개의 쿠키를 가질 수 있다
+- 하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다.
+
+#### 쿠키의 동작 순서4
+
+<img src="./cs_images/4.jpg" alt="cookie">
+
+1. 클라이언트가 페이지를 요청한다 (사용자가 웹사이트 접근) 웹 서버는 쿠키를 생성한다
+2. 생성한 쿠키에 정보를 담아 HTTP 화면을 돌려줄 때, 같이 클라이언트에게 돌려준다
+3. 넘겨 받은 쿠키는 클라이언트가 가지고 있다가(로컬 PC에 저장) 다시 서버에 요청할 때 요청과 함께 쿠키를 전송한다
+4. 동일 사이트 재방문시 클라이언트의 PC에 해당 쿠키가 있는 경우, 요청 페이지와 함께 쿠키를 전송한다
+
+#### 사용 예시
+
+1. 방문했던 사이트에 다시 방문 하였을 때 아이디와 비밀번호 자동 입력
+2. 팝업창을 통해 "오늘 이 창을 다시 보지 않기" 체크
+
+#### 쿠키의 약점
+
+1. 쿠키의 특징으로는 클라이언트(브라우저)단에 저장된다는 것이다
+2. 즉 보안에 약할 수 있다
+3. 쿠키를 훔쳐서 계정 접근 권한 등을 탈취하여 유저의 정보를 악용할 수 있다
+
+### 세션이 뭔가요?
+
+HTTP 세션이란 **클라이이언트가 웹서버에 연결된 순간부터 웹 브라우저를 닫아 서버와의 HTTP 통신을 끝낼 때 까지의 기간** 이다.
+
+하지만 보통 세션이라고 말할 때에는 **서버에 세션에 대한 정보(세션 상태, 클라이언트 상태, 세션 데이터 등)를 저장해 놓고 세션 쿠키( 고유한 세션 ID 값 )를 클라이언트에게 주어 서버가 클라이언트를 식별할 수 있도록 하는 방식자체를 의미하는 경우** 가 많다.
+
+#### 세션의 특징
+
+- 따로 용량의 제한이 없다 (서버의 능력에 따라 다를 수 있다)
+- 서버에 세션 객체를 생성하며 각 클라이언트 마다 고유한 세션 ID 값을 부여한다
+- 쿠키를 사용하여 세션 ID 값을 클라이언트에 보낸다
+- 웹 브라우저가 종료되면 세션 쿠키는 삭제된다
+
+#### 세션의 동작 방식
+
+<img src="./cs_images/5.jpg" alt="세션">
+
+1. 클라이언트 페이지가 요청한다
+2. 서버가 클라이언트마다 개별의 세션 ID를 부여한다
+3. 클라이언트는 요청할 때마다 세션 ID를 서버에 전달한다
+4. 서버는 받은 세션 ID로 클라이언트 정보를 가져와 활용한다
+
+### 쿠키와 세션의 차이는 어떤 점이 있을까요?
+
+1. 저장 위치
+   쿠키: 클라이언트에 파일로 저장되어 있다
+   세션: 서버에 저장되어 있다
+
+2. 보안
+   쿠키: 클라이언트의 브라우저 로컬에 저장되기 때문에 변질되거나 HTTP request 요청 시에 이를 갈취당할 수 있어서 보안에 취약하다
+   세션: 쿠키를 이용해서 세션id만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 비교적으로 안전하다
+
+3. 라이프 사이클
+   쿠키: 만료시간은 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아있다. 만료기간에 따라 상대적으로 넉넉하게 쿠키를 삭제할 때까지 유지된다
+   세션: 만료기간을 정할 수는 있지만 브라우저가 종료되면 그에 상관없이 삭제된다
+
+4. 속도
+   쿠키: 쿠키에 정보가 있기 때문에 서버에 요청시 속도가 빠르다
+   세션: 정보가 서버에 있기 때문에 처리가 요구되어 비교적으로 느리다
+
+## CORS
+
+## 웹팩

README.md

@@ -16,6 +16,23 @@
 
 ## <a href="./CS.md">① Computer Science</a>
 
+- `프로세스와 스레드 🔥`
+
+  - 프로세스가 뭔가요?
+  - 스레드가 뭔가요?
+  - 프로세스와 스레드는 어떤 차이가 있나요?
+
+- `HTTP 🔥`
+- `쿠키 세션 🔥`
+
+  - 쿠키, 세션을 왜 쓰나요?
+  - 쿠키가 뭔가요?
+  - 세션이 뭔가요?
+  - 쿠키와 세션의 차이는 어떤 점이 있을까요?
+
+- `CORS 🔥`
+- `웹팩 🔥`
+
 ## <a href="./HTML_CSS.md">② HTML/ CSS</a>
 
 ## <a href="./JS.md">③ JavaScript</a>
@@ -218,3 +235,8 @@
 - `모듈 🔥`
 
   - 모듈이 뭔가요?
+
+## 레퍼런스
+
+- [프론트 엔드 개발자 면접 질문 정리 🔥](https://sunnykim91.tistory.com/121)
+- [Interview_Question_for_Beginner 🔥](https://github.com/JaeYeopHan/Interview_Question_for_Beginner)