/react-deploy

Primary LanguageTypeScript

카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편

실행

  • 백엔드 팀원 API 사용 : yarn start
  • msw mock API 사용 : yarn start:mock

로그인 ID: test@test.com / PW: test1234

(2023.08.03) 심규민님 API는 대부분 정상작동하지만, 관심 기능의 경우 API path가 명세와 달라 수정 요청을 했지만 아직 반영되지 않은 것으로 보입니다. 김동현님 API는 현재 정상작동하지 않는 것으로 보입니다.

1단계 - API 명세 협의 & 반영

  • API 명세 결정
  • 회원가입, 로그인 확인
  • HOME 화면 카테고리 조회, 카테고리 목록 조회 확인
  • 상품 조회 확인
  • 주문 확인
  • 관심 기능 확인

2단계 - 배포하기

3단계 - 포인트

  • 포인트 조회 추가
  • 주문 시 포인트 사용 기능 추가

팀원들과 협의한 포인트 기능 명세

  • 주문 API에서 사용할 포인트를 입력받는다. (포인트는 물건 가격 이상으로 사용할 수 없다)
  • 포인트는 사용한 현금금액의 5%만큼 충전된다.

4단계 - 질문의 답변을 README에 작성

질문 1. SPA 페이지를 정적 배포를 하려고 할 때 Vercel을 사용하지 않고 한다면 어떻게 할 수 있을까요?

  • GitHub Pages
    • gh-pages 패키지를 사용하여 배포
    • 프로젝트 루트 디렉토리에서 gh-pages 브랜치를 생성하고, 배포할 정적 파일을 해당 브랜치에 push
  • AWS S3와 CloudFront:
    • AWS S3를 사용해 정적파일 저장, CloudFront를 통해 CDN으로 배포

질문 2. CSRF나 XSS 공격을 막는 방법은 무엇일까요?

  • CSRF 방지
    • CSRF 토큰: 서버에서 생성한 CSRF 토큰을 폼에 포함 → 서버에서 토큰을 검증해 요청의 유효성 확인
    • Referer 헤더 검증: 요청의 Referer 헤더를 검증해 요청이 올바른 출처에서 발생했는지 확인
  • XSS 방지
    • Content Security Policy (CSP): CSP를 사용하여 신뢰할 수 있는 출처에서만 콘텐츠를 로드
    • 라이브러리 및 프레임워크 사용: 보안이 강화된 라이브러리 및 프레임워크 사용으로 보안 취약점 줄임, React는 기본적으로 XSS 공격을 방지하는 기능 제공

질문 3. 브라우저 렌더링 원리에 대해 설명해주세요.

  1. HTML 파싱
    • HTML 문서 DOM(Document Object Model) 트리로 변환
    • DOM 트리는 페이지의 구조 정의, 각 HTML 요소는 DOM 노드로 표현됨
  2. CSS 파싱
    • CSS 파일을 파싱해 CSSOM (CSS Object Model) 트리 생성
    • CSSOM 트리는 스타일 규칙 정의, DOM 트리의 각 요소에 스타일 적용
  3. render 트리 구성
    • DOM 트리와 CSSOM 트리를 결합해 render 트리 생성
    • render 트리는 페이지의 레이아웃을 정의하며, 화면에 렌더링될 요소 포함
  4. 레이아웃 계산
    • 레이아웃 과정에서 각 요소의 정확한 위치와 크기 계산
  5. Painting
    • 요소의 스타일이 화면에 그려지는 단계
  6. 합성
    • Paining 된 요소들이 화면에 실제로 표시되는 단계
    • 레이어가 서로 결합되어 최종 화면 생성