하이잭킹 관련 문의

쉽게 말씀드리면, 지금 웹 페이지가 "이 페이지에서는 이런 종류의 스크립트만 실행할 수 있어!" 하고 브라우저에게 규칙을 정해놓은 것과 같습니다. 폼에 입력하신 스크립트가 이 규칙에 맞지 않으면 브라우저가 차단하는 것이죠.이 때 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 없이 해결하고 싶으신 걸까요? 기대하신 동작과 현재 발생하는 문제를 조금 더 설명해주시면 도움이 될 것 같아요.

에러 해결 공유드립니다

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

webpack 4 버전과 호환되는 플러그인 버전 공유드립니다

공유 감사합니다. package.json 파일을 참고하시면 전체 라이브러리의 버전을 확인하실 수 있어요. https://github.com/jeonghwan-kim/lecture-frontend-dev-env/blob/master/package.json

setValue 메서드를 바인딩 해야 하는 이유

this를 바인딩하는 건 자식 컴포넌트에게 함수를 전달하는 것 외에도 다양한 상황에서 사용됩니다. 가령 이벤트 핸들러를 전달하거나 특정 메서드를 호출할 때, 현재 클래스 인스턴스를 참조하도록 this를 고정하기 위해 바인딩이 필요합니다. 이는 자바스크립트의 this가 함수가 실행되는 환경(호출 주체)에 따라 참조하는 객체가 달라지기 때문입니다.화살표 함수를 사용하면 this를 현재 클래스 인스턴스로 고정할 수 있는데요. 이는 화살표 함수가 렉시컬 컨텍스트(함수가 선언된 위치의 컨텍스트)를 사용하기 때문입니다. 하지만 클래스 내부에서 화살표 함수를 정의하려면 일반적으로 클래스의 멤버 변수로 정의해야 합니다. 예를 들면 다음과 같습니다: class MyComponent extends React.Component { setValue = (value) => { this.setState({ value }); }; }이 방법은 편리하지만, 멤버 변수로 정의된 함수는 클래스의 프로토타입이 아닌 인스턴스에 직접 할당됩니다. 이는 메모리 측면에서 약간의 비용을 추가로 발생시킬 수 있으며, 대규모 애플리케이션에서는 성능에 영향을 미칠 가능성도 있습니다.또한, 멤버 변수는 언제든지 값이 변경될 수 있기 때문에 코드 유지보수 시 예기치 않은 동작이 발생하지 않도록 관리에 주의해야 합니다. 아래 인프런 AI 인턴 답변도 참고하시면 좋습니다.