Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

경북대 FE_정서현 6주차 과제 Step 3~4 #104

Open
wants to merge 38 commits into
base: hyunaeri
Choose a base branch
from

Conversation

hyunaeri
Copy link

@hyunaeri hyunaeri commented Aug 4, 2024

📌 6주차 질문

🤔 1. SPA 페이지를 정적 배포하려고 할 때 Vercel 을 사용하지 않는다면 어떤 방법이 있을까요?

  1. GitHub Pages
    : 깃헙 페이지는 깃헙 저장소를 통해 정적 웹사이트를 호스팅 할 수 있습니다.

  2. Netlify
    : Netlify 는 정적 웹사이트 및 JAMstack 애플리케이션을 호스팅 할 수 있습니다.

  3. Firebase Hosting
    : Firebase Hosting 은 구글의 서비스로 빠르고 안전하게 정적 웹사이트를 호스팅 할 수 있습니다.

  4. AWS S3 + CloudFront
    : Amazon S3 는 파일저장을 위한 서비스이며, CloudFront 는 CDN 서비스로 S3에 저장된 정적 파일을 전 세계에 빠르게 배포할 수 있습니다.

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

CSRF 공격은 악성 웹사이트가 사용자의 인증 정보를 이용해 사용자가 의도하지 않은 요청을 서버에 보내는 공격입니다.

이를 막기 위해서는 CSRF 토큰 을 사용할 수 있습니다. 사용자가 폼을 제출할 때마다 고유한 토큰을 함께 전송하는 방법인데, 서버는 이 토큰을 검증하여 요청이 신뢰할 수 있는 출처에서 왔는지 확인할 수 있습니다.

또는, Referer 검증 을 사용할 수 있습니다. 서버가 요청의 Referer 헤더를 검증하여 요청이 신뢰할 수 있는 출처에서 왔는지 확인할 수 있습니다.

XSS 공격은 공격자가 웹 페이지에 악성 스크립트를 삽입하여 사용자 정보를 탈취하거나 악성행동을 수행하는 공격입니다.

이를 막기 위해서는 입력 검증 (Input Validation) 을 사용할 수 있습니다.
사용자 입력을 철저히 검증하여 허용된 형식 외의 입력은 차단하여 XSS 공격을 막을 수 있습니다.

또, CSP(Content Security Policy) 를 설정하여 브라우저가 신뢰할 수 있는 콘텐츠 출처를 정의하여 악성 스크립트가 실행되지 않도록 할 수 있습니다.

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

  1. HTML 파싱 및 DOM 트리 생성: HTML 문서를 파싱하여 DOM 트리를 생성
  2. CSS 파싱 및 CSSOM 트리 생성: CSS 파일을 파싱하여 CSSOM 트리를 생성
  3. 렌더 트리 생성: DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성
  4. 레이아웃: 렌더 트리의 각 요소의 위치와 크기를 계산
  5. 페인팅: 렌더 트리의 각 요소를 실제 픽셀로 변환하여 화면에 드로우
  6. 컴포지팅: 여러 개의 레이어로 나누어 렌더링하고, 최종적으로 화면에 합성

6주차가 개인적으로 가장 어려웠던 것 같습니다.

실제 백엔드 분들이 배포해주신 API 들을 이용하여 제대로 한번 구현해보고자 했으나,


스크린샷 2024-08-04 17 49 23

image

스크린샷 2024-08-04 17 50 29

백엔드 쪽에선 이미 관련 설정을 다 해주셨다고 했는데, 어떤 이유인지 저는 CORS 문제나 상기 문제들이 계속 발생하여 실제로 동작하는지 확인 해 볼 수 가 없었습니다.

그래서 MSW 로만 관련 기능을 테스트 하였습니다 ㅠㅠ


계속 시도해본 결과 로그인과 회원가입 API 통신은 정상적으로 작동하도록 구현했습니다!

다른 API 도 손보고 커밋 올려보겠습니다.

hyunaeri added 30 commits July 30, 2024 22:54
Copy link

@sjoleee sjoleee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다~~
사실 대부분의 cors는 서버에서 해결해야하는 문제라... ㅋㅋㅋㅋ
앤드포인트를 주소창에 직접 입력했을때도 데이터가 전달되지 않는지 확인해 보시면 좋을 것 같아요~!

Comment on lines +47 to +52
try {
const response = await fetchInstance.post(`${BASE_URL}/api/orders`, orderData, {
headers: {
"Content-Type": "application/json",
},
});
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useMutation을 사용하지 않은 이유가 있을까요?

},
});

if (response.status === 200) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요 if문이 필요한 이유가 있을까요?

Comment on lines +24 to +31
const [totalPrice, setTotalPrice] = useState(initTotalPrice);
const { handleSubmit, getValues, register, watch } = useOrderFormContext();

const point = watch("point", 0);

useEffect(() => {
setTotalPrice(initTotalPrice - (point ?? 0)); // 포인트가 undefined일 경우 0으로 처리
}, [point, initTotalPrice]);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

totalPrice 상태와 useEffect는 제거할 수 있지 않을까요?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants