사전 요청 관련 질문

좋은 질문입니다. 두 가지로 나눠서 말씀 드려볼게요.1) GET과 POST 요청만 사용하는 것Preflight를 피하려고 HTTP 메소드를 제한하는 것은 권장드리지 않습니다. PUT, PATCH, DELETE는 각자 자원의 수정, 부분 수정, 삭제를 의미하는 대표 메서드에요. 모든 요청을 GET/PUT으로만 구현하면 API 의미가 불분명해지고 유지보수 면에서 불리할 수 있습니다.Preflight 요청은 브라우져의 필수 안전장치에요. 요청을 보내기 전에 서버가 허용하는 확인하기 위해 OPTIONS를 사용하는데요. 이 과정은 보안상의 이유로 안쓰는 것 보다는 잘 다루는 게 중요합니다.2) GET/POST만 사전요청을 안하는 것안전한 요청일 경우에 Preflight 요청을 보내지 않는다고 설명드렸는데요. 강의에서 다뤘던 조건 외에도 Content-Type 헤더의 값도 검사합니다.application/x-www-form-urlencoded multipart/form-data text/plainPOST 메소드를 사용하면 Content-Type: application/json 를 주로 사용하는데요. 이 경우에는 단순 요청이 아니기 때문에 Preflight 요청을 보냅니다.참고: https://developer.mozilla.org/ko/docs/Web/HTTP/Guides/CORS

rest api 에서의 csrf

질문 주셔서 감사합니다. REST API를 사용하는 경우는 두 가지로 생각할 수 있을 것 같아요.1) 쿠키 기반 인증을 사용하는 API: 브라우져가 서버에게 받은 쿠키를 요청 헤더에 실어 보내는 구조이기 때문에 CSRF 공격에 취약할수 있습니다. 이를 보완하기 위해 CSRF 토큰으로 예방합니다.2) 토큰 기반 인증을 사용하는 API: 브라우져에서 실행되는 자바스크립트 어플리케이션이 서버에게 받은 토큰 값을 요청 헤더에 '직접' 실어 보내는 구조라서 CSRF 공격에 덜 취약합니다.하지만 브라우져에서 관련한 보안 조치를 지원하고(실습에서는 브라우져 설정을 변경함), 서버에서 쿠키를 발급할 때 보안 정책을 적용하기 때문에 어느정도 공격에 안전하다고 볼 수 있습니다.

하이잭킹 관련 문의

쉽게 말씀드리면, 지금 웹 페이지가 "이 페이지에서는 이런 종류의 스크립트만 실행할 수 있어!" 하고 브라우저에게 규칙을 정해놓은 것과 같습니다. 폼에 입력하신 스크립트가 이 규칙에 맞지 않으면 브라우저가 차단하는 것이죠.이 때 Content-Security-Policy (CSP) 라는 것이 사용될 수 있습니다. 마치 웹 페이지의 보안 경비원 같은 역할을 해서, 어떤 외부 자원(스크립트, 스타일 시트, 이미지 등)을 불러올 수 있고 어떤 동작을 허용할지 등을 확인하고 위반하는 것은 차단하는 것이죠.말씀하신 Content-Security-Policy-Report-Only 라는 옵션은 조금 특별합니다. "만약 보안 정책에 위반되는 사항이 있으면 나한테 알려주기만 하고, 실제로 막지는 마" 라는 의미입니다. 그래서 이 옵션 때문에 스크립트 실행이 안 됐을 가능성은 낮습니다.아마 웹 서버 설정에서 Content-Security-Policy 헤더가 설정되어 있고, 그 정책 때문에 입력하신 스크립트가 실행되지 않는 것일 수 있습니다.혹시 웹 서버 설정이나 관련 코드를 확인해 보실 수 있을까요? 어떤 CSP 정책이 설정되어 있는지 알면 문제 해결에 더 도움이 될 거예요! 😊

캐싱 관련 문의

네 맞습니다. 브라우져의 개발자도구에서 사용하는 옵션은 HTTP 헤더와 무관하게 개발자 도구가 열려있는 동안 캐시를 강제로 무시하게 만듭니다. 개발 시 디버깅 용도로 많이 사용하는 옵션이에요.

FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 중괄호 이유

안녕하세요, 수강해 주셔서 감사합니다. 좋은 질문을 주셨는데요, 핵심은 JSX 문법에서의 차이입니다.label="이름" 처럼 따옴표 안에 값을 넣으면 문자열 리터럴로 전달됩니다.htmlFor={"name"} 처럼 중괄호를 사용하면 자바스립트 표현식으로 전달됩니다.프롭 인자에 문자열만 전달하면 둘 다 사용할수 있습니다.한편, 표현식으로 문자열을 전달할 경우에는 중괄호를 사용하시면 좋습니다. 예: htmlFor={`${name}`}

dispatch 함수도 리렌더링 유발하지 않나요?

리액트에서 dispatch를 호출하면 상태가 즉시 변경되는 것이 아니라, 다음 렌더링에서 반영됩니다. 즉, dispatch 직후에 상태 값을 읽으면 여전히 이전 상태가 유지됩니다.리액트 공식 문서 내용 참고: https://react.dev/reference/react/useReducer"The dispatch function only updates the state variable for the next render. If you read the state variable after calling the dispatch function, you will still get the old value that was on the screen before your call." 이 코드에서 onSubmit() 함수가 실행될 때, 상태 값이 즉시 반영되지 않으므로 갱신된 상태를 직접 계산하기 위해 formReducer(state, { type: "VALIDATE", validate })를 사용한 것입니다. 이렇게 하면 현재 렌더링에서 사용할 상태를 미리 계산하여 onSubmit()에서 올바른 값을 전달할 수 있습니다.즉, dispatch를 여러 번 호출해도 각 상태 변경은 다음 렌더링에서 적용되기 때문에, 동일한 렌더링 내에서 즉시 변경된 값을 활용하려면 dispatch 후의 상태가 아닌, 직접 계산한 값을 사용해야 합니다.

객체가 함께 반환되는데 왜 그럴까요

안녕하세요? 질문을 등록해 주셨는데 본문에 로 남아있네요. 혹시 문제는 해결하셨을까요?

ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유

ProductItem.jsx에 onClick이 버튼에 사용되긴합니다. 2-advanced/09-popstate 브랜치에서 확인하실 수 있고요. {onClick && ( 주문하기 )} 혹시 수업을 따라오시면서 누락하신 게 아닌가 싶네요.

replaceState를 쓰지 않는 대안

올려주신 코드에서 어떤 동작을 기대하셨는지 조금 더 설명해주실 수 있을까요?replaceState를 사용하지 않고 event.currentTarget.document.location.pathname을 활용하는 방식이 정상적으로 작동하는 것처럼 보이지만, 일부 상황에서 의도치 않은 동작이 발생할 수 있을 것 같습니다.예를 들어, pushState로 새로운 경로를 추가하면 브라우저의 주소는 변경되지만, popstate 이벤트가 발생할 때 event.state 값이 비어 있을 수 있습니다. replaceState를 활용하면 초기 상태를 명확하게 설정할 수 있어 이러한 문제를 방지할 수 있습니다.혹시 특정한 이유로 replaceState 없이 해결하고 싶으신 걸까요? 기대하신 동작과 현재 발생하는 문제를 조금 더 설명해주시면 도움이 될 것 같아요.

에러 해결 공유드립니다

직접 문제를 해결하고 공유해 주신 덕분에, 같은 문제를 겪는 다른 분들께 큰 도움이 될 것 같습니다. 노드 버전 문제와 맥 실리콘 환경에서의 해결 방법까지 상세히 정리해 주셔서 정말 고맙습니다.