- 백엔드 팀원 API 사용 :
yarn start
- msw mock API 사용 :
yarn start:mock
로그인 ID: test@test.com / PW: test1234
(2023.08.03) 심규민님 API는 대부분 정상작동하지만, 관심 기능의 경우 API path가 명세와 달라 수정 요청을 했지만 아직 반영되지 않은 것으로 보입니다. 김동현님 API는 현재 정상작동하지 않는 것으로 보입니다.
- API 명세 결정
- 회원가입, 로그인 확인
- HOME 화면 카테고리 조회, 카테고리 목록 조회 확인
- 상품 조회 확인
- 주문 확인
- 관심 기능 확인
- 포인트 조회 추가
- 주문 시 포인트 사용 기능 추가
- 주문 API에서 사용할 포인트를 입력받는다. (포인트는 물건 가격 이상으로 사용할 수 없다)
- 포인트는 사용한 현금금액의 5%만큼 충전된다.
- GitHub Pages
- gh-pages 패키지를 사용하여 배포
- 프로젝트 루트 디렉토리에서 gh-pages 브랜치를 생성하고, 배포할 정적 파일을 해당 브랜치에 push
- AWS S3와 CloudFront:
- AWS S3를 사용해 정적파일 저장, CloudFront를 통해 CDN으로 배포
- CSRF 방지
- CSRF 토큰: 서버에서 생성한 CSRF 토큰을 폼에 포함 → 서버에서 토큰을 검증해 요청의 유효성 확인
- Referer 헤더 검증: 요청의 Referer 헤더를 검증해 요청이 올바른 출처에서 발생했는지 확인
- XSS 방지
- Content Security Policy (CSP): CSP를 사용하여 신뢰할 수 있는 출처에서만 콘텐츠를 로드
- 라이브러리 및 프레임워크 사용: 보안이 강화된 라이브러리 및 프레임워크 사용으로 보안 취약점 줄임, React는 기본적으로 XSS 공격을 방지하는 기능 제공
- HTML 파싱
- HTML 문서 DOM(Document Object Model) 트리로 변환
- DOM 트리는 페이지의 구조 정의, 각 HTML 요소는 DOM 노드로 표현됨
- CSS 파싱
- CSS 파일을 파싱해 CSSOM (CSS Object Model) 트리 생성
- CSSOM 트리는 스타일 규칙 정의, DOM 트리의 각 요소에 스타일 적용
- render 트리 구성
- DOM 트리와 CSSOM 트리를 결합해 render 트리 생성
- render 트리는 페이지의 레이아웃을 정의하며, 화면에 렌더링될 요소 포함
- 레이아웃 계산
- 레이아웃 과정에서 각 요소의 정확한 위치와 크기 계산
- Painting
- 요소의 스타일이 화면에 그려지는 단계
- 합성
- Paining 된 요소들이 화면에 실제로 표시되는 단계
- 레이어가 서로 결합되어 최종 화면 생성