충남대 FE_김지안_6주차 과제

README.md

@@ -1 +1,38 @@
-# react-deploy
+# react-deploy
+FE 카카오 선물하기 6주차 과제: 배포 & 협업
+### 🌱 1단계 - API 명세 협의 & 반영
+작성한 API 문서를 기반으로 팀 내에서 지금까지 만든 API를 검토하고 통일하여 변경 사항을 반영
+- 팀 내에서 일관된 기준을 정하여 API 명세를 결정
+- 때로는 클라이언트의 편의를 위해 API 명세를 결정하는 것이 좋음
+<br/><br/>
+- [X] 팀 내에 배포될 API가 여러 개일 경우 상단 내비게이션 바에서 선택 가능
+  - 프론트엔드의 경우 사용자가 팀 내 여러 서버 중 하나를 선택하여 서비스를 이용
+    - [X] 팀 내 백엔드 엔지니어의 이름을 넣고, 이름을 선택하면 해당 엔지니어의 API로 API 통신을 하도록 구현
+    - [X] 기본 선택은 제일 첫 번째 이름
+- [X] 백엔드에서 협의된 API를 배포하기 전까지는 MSW로 동작 가능하도록 구현
+
+### 🌿 2단계 - 배포하기
+- github pages를 사용하여 배포
+
+### 🪴 3단계 - 포인트
+- 포인트 기능 구현
+- API 명세는 팀과 협의하여 결정하고 구현<br><br>
+
+  - **포인트 조회**<br>
+    해당하는 멤버의 포인트를 리턴<br>
+    **URL** : /api/member/point<br>
+    **Request** : Header: Authorization: Bearer {token}<br>
+    **Response** : 200 OK { "point": "number" }<br>
+
+### 🌳 4단계 - 질문에 대한 답변
+**질문 1.** SPA 페이지를 정적 배포를 하려고 할 때 Vercel을 사용하지 않고 한다면 어떻게 할 수 있을까요?
+
+> 리포지토리에 SPA 페이지를 업로드하고 GitHub Pages를 설정하는 방법이나, AWS S3에 프로젝트를 올리고 CloudFront을 CDN으로 사용하는 방법을 사용해 배포할 수 있습니다.
+
+**질문 2.** CSRF나 XSS 공격을 막는 방법은 무엇일까요?
+
+> CSRF는 서버에서 생성한 토큰을 사용해 요청을 검증하거나, 쿠키에 SameSite 속성을 설정해 동일 출처에서만 쿠키가 전송되도록 하여 방어할 수 있습니다. XSS는 CSP(콘텐츠 보안 정책)을 설정하거나, HTML 인코딩을 사용하여 <, >와 같은 문자를 안전한 형식으로 변환하는 등 사용자 데이터를 적절히 인코딩하여 방어할 수 있습니다.
+
+**질문 3.** 브라우저 렌더링 원리에 대해 설명해주세요.
+
+> 브라우저는 서버로부터 HTML 파일을 받아 파싱하여 DOM 트리를 생성하고, CSS 파일을 파싱하여 CSSOM 트리가 생성합니다. DOM 트리와 CSSOM 트리가 결합하여 렌더 트리가 형성됩니다. 이후 레이아웃과 페인팅 과정을 거치면서 각 요소의 위치와 크기가 정확한 좌표로 변환되고, 배경색, 이미지 등이 화면에 그려집니다. 여러 레이어가 겹쳐지는 경우 브라우저는 각 레이어를 별도로 페인팅하고 최종적으로 이를 합성하여 최종 이미지를 생성하여 화면에 표시합니다.