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를 생성한다. 여기서 렌더링에 필요한 노드만 선택하여 페이지를 렌더링한다.