From 0be0b737190222cfa2d31110ec05895cf245c8b5 Mon Sep 17 00:00:00 2001
From: hojeong26 <134038335+hojeong26@users.noreply.github.com>
Date: Sun, 4 Aug 2024 11:49:22 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=84=EB=82=A8=EB=8C=80=20FE=5F=EA=B0=95?=
 =?UTF-8?q?=ED=98=B8=EC=A0=95=206=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C?=
 =?UTF-8?q?=20(#96)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: step4 질문에 대한 답변 작성

* docs: 질문에 대한 답 보충
---
 README.md | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3eaeec280..ef3be7375 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,35 @@
-# react-deploy
\ No newline at end of file
+# react-deploy
+
+### 질문의 답변 작성
+
+- 질문 1. SPA 페이지를 정적 배포를 하려고 할 때 Vercel을 사용하지 않고 한다면 어떻게 할 수 있을까요?
+
+  > **SPA** : 단일 페이지 애플리케이션,
+  > 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식
+
+  > **정적 배포** : 미리 생성된 파일을 서버에 업로드하여 배포하는 방식
+
+  github page사용한다.
+
+- 질문 2. CSRF나 XSS 공격을 막는 방법은 무엇일까요?
+
+  > **CSRF** : 사이트간 요청 위조(웹 보안 취약점)
+
+  1. Referer check : HTTP 요청 헤더 정보에서 Referrer정보 확인
+  2. CAPTCHA 도입
+  3. CSRF 토큰 사용 : 사용자 세션에 임의에 값을 저장하여 모든 요청마다 해당 값을 포함하여 전송하도록 함
+
+  > **XSS** : 웹 페이지에 악성 스크립트 삽입
+
+  1. 입력 값 제한 : 사용자의 입력값을 제한하여 스크립트를 삽입하지 못하도록 함
+  2. 입력 값 치환 : 위험한 문자 입력 시 필터링
+  3. 직접출력 금지
+
+- 질문 3. 브라우저 렌더링 원리에대해 설명해주세요.
+
+  1. 렌더링 엔진 : 웹 페이지의 요소들을 파싱
+  2. 렌더 트리 : 렌더링 엔진이 파싱한 웹 페이지 요소들을 이용하여 구성한 트리 구조 (_이 구조는 브라우저가 화면에 표시할 요소들을 정의_)
+  3. 레이아웃 : 렌더 트리를 이용하여 브라우저의 화면에 요소들을 배치하는 과정
+  4. 페인팅 : 레이아웃을 이용하여 계산된 위치에 요소들을 표시하는 과정
+
+  => 로더가 서버로부터 전달받은 리소스 스트림을 읽어오고 파서가 DOM Tree와 CSSOM Tree를 생성한다. 여기서 렌더링에 필요한 노드만 선택하여 페이지를 렌더링한다.