경북대 FE_정지원 6주차 Step3~4

[Diwoni]

경북대 FE_정지원 6주차 Step3

백엔드 분들과 목요일 모각코 시간에 작성한 명세서를 가지고 포인트 기능을 msw 에서 구현했습니다.

1. 포인트를 사용하면 입력한 포인트 값을 서버에서 최종 결제 금액의 5% 만큼 포인트 적립해준다. (/api/orders 수정)
2. 포인트를 조회하여 마이페이지에서 보유 포인트를 확인할 수 있다. (/api/points) : GET
3. 마이페이지에서 포인트를 충전할 수 있다. (/api/points) : POST

실제로 백엔드 분들의 서버를 이용해서 배포하고 테스트하고자 했으나, OAuth 를 통한 인가 코드 발급을 하지 않으면 다른 API 들을 테스트할 수 없어 시간적으로 다 하지 못할 것 같아 msw로 명세만 맞추어보았습니다😢

[minsekim1]

안녕하세요 지원님!
6주동안 수고하셨습니다.
협업프로젝트 수행이 처음이셨을 수도 있는데 코드 내에서 타입스크립트와 테스트 코드, 스토리북을 잘 완성해주셨습니다.

전체 코드리뷰

배포 서비스에 접근할 수 없음

• 현재 https://hyunaeri.github.io/ 에서 404 에러가 뜨고 있습니다!
• 이게 찾아보니까 처음 진입할때는 되는데 새로고침하면 안되기도하고, 어쩔 때는 처음부터 아예 안될때가 있네요.
• 아마 빌드과정이나 api 요청과 연관되어있어서 터지거나 그것도 아니면 배포 과정에서 문제가 있는것으로 보입니다!

실 배포는 https로 하기

• 이건 백엔드 과제이긴한데, 같이 도메인을 하나 구해서 https로 직접 연결해보시면 좋을 것 같습니다.
• 네트워크에 대한 이해 역시 프/백 모두에게 필요합니다.

개발 테스트는 http로 테스트할 수 있게

• 개발 모드에서는 http와 https로 전환이 편하고, CI/CD를 구축하여 쉽게 배포할 수 있어야합니다. 즉각적인 대응역시 서비스에서 중요한 포인트거든요.
• 저희 사내에서는 프론트는 vercel로 git push 를 했을때 자동을 배포하게 만들었습니다.
• 그리고 백엔드에서는 SSH를 여러개를 연동한 쉘 스크립트를 활용하여 개별 모든 백엔드 API서버를 차례대로 업데이트합니다. 또한 PM2를 활용하여 그린/블루 방식으로 무중단 배포를 하였습니다.

README.md 퀴즈

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

• 평가: 다양한 호스팅 옵션을 제시한 점이 좋습니다. GitHub Pages, AWS S3 + CloudFront, Netlify를 통해 각각의 배포 방법을 명확히 설명하셨습니다. 특히 각 방법의 사용법과 특징을 잘 정리한 점이 인상적입니다.
• 추가 코멘트: 추가로 Firebase Hosting과 GitLab Pages를 고려할 수 있습니다. Firebase Hosting은 Google의 인프라를 활용해 빠르고 안전한 배포를 지원하며, GitLab Pages는 GitLab의 CI/CD 파이프라인을 활용하여 배포할 수 있습니다. 이러한 다양한 옵션을 통해 프로젝트의 특성에 맞는 최적의 배포 방법을 선택할 수 있습니다.

추가 배포 방법:
1. Firebase Hosting:
   - Google의 인프라를 사용해 빠르고 안전한 배포 가능
   - SSL 인증서 자동 제공, 사용자 인증 통합 지원
   - Firebase CLI를 사용해 간편하게 배포 가능
2. GitLab Pages:
   - GitLab의 CI/CD 파이프라인을 통해 정적 사이트 배포
   - `.gitlab-ci.yml` 파일을 통해 빌드 및 배포 프로세스 정의
   - 무료 SSL 인증서 제공

• 특히 github는 정적 페이지 배포용이라는것에 주의해주세요! react와는 잘 어울리진 않습니다.

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

• 평가: CSRF와 XSS 공격 방지 방법을 명확하게 설명하셨습니다. 특히 CSRF 방어 방법으로 Referer 체크, CSRF 토큰 사용, POST 요청 사용을 언급한 점과 XSS 방어 방법으로 입력 데이터 검증 및 인코딩, HTTPOnly 및 Secure 플래그 설정, CSP 설정을 제시한 점이 좋습니다.
• 추가 코멘트: 추가적으로 SameSite 쿠키 속성을 사용하면 CSRF 공격을 효과적으로 방지할 수 있습니다. XSS 방지 측면에서는 정기적인 보안 점검과 패치를 통해 보안 취약점을 사전에 예방하는 것도 중요합니다. 이러한 추가적인 보안 방법들을 통해 더욱 철저히 보안을 강화할 수 있습니다.

추가 보안 방법:
1. CSRF 방지 추가 방법:
   - SameSite 쿠키 속성: 쿠키에 SameSite 속성을 설정하여 CSRF 공격을 방지
   - 정기적인 보안 점검 및 테스트: 애플리케이션의 보안 상태를 주기적으로 점검하고 취약점을 테스트
2. XSS 방지 추가 방법:
   - 정기적인 보안 패치: 사용 중인 라이브러리와 프레임워크의 최신 보안 패치를 주기적으로 적용
   - 보안 강화된 프레임워크 사용: React와 같은 프레임워크는 기본적으로 XSS 공격을 방지하는 기능 제공

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

• 평가: 브라우저 렌더링 원리를 단계별로 잘 설명하셨습니다. 특히 HTML, CSS 파싱부터 자바스크립트 실행까지의 과정을 명확하게 이해하고 있는 점이 좋습니다.
• 추가 코멘트: 추가적으로, 각 단계에서 발생할 수 있는 성능 최적화 기법에 대해 언급하면 더욱 좋을 것 같습니다. 예를 들어, 레이아웃 계산과 페인팅 단계에서의 최적화 기법을 통해 렌더링 성능을 향상시킬 수 있습니다. 또한, 브라우저의 비동기 처리와 관련된 개념을 추가하면 더욱 완벽한 설명이 될 것입니다.

성능 최적화 기법:
1. 레이아웃 최적화:
   - 불필요한 레이아웃 재계산을 줄이기 위해 스타일 변경을 최소화
   - CSS 속성 변경 시, 가능한 트랜지션(transition)이나 애니메이션(animation) 사용
2. 페인팅 최적화:
   - 복잡한 그래픽이나 애니메이션은 CSS 대신 GPU 가속을 활용
   - 클립 경계 설정을 통해 페인팅 영역을 최소화
3. 비동기 처리:
   - 요청 및 응답의 비동기 처리를 통해 메인 스레드의 작업을 최소화
   - Web Worker를 사용하여 무거운 연산을 백그라운드에서 처리

마지막 코멘트

• 다음스텝, 또는 앞으로 협업에 가셔서도 기대가 되는 개발자가 될 것 같습니다!
• 다음 스텝까지 필요한 점수들은 모두 충족되셨습니다.
• 다음주차 또는 남은 시간에 백엔드와 https로 소통하여 프로젝트를 배포 완료, 실서비스처럼 한달정도 운영해보면 정말 큰 도움이 되실 겁니다.