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 인턴 답변도 참고하시면 좋습니다.

강사님은 어떤 책으로 HTTP 를 공부하셨나요?

수업에서는 사용하는 블로그 글의 하단에 를 참고하시면 모든 참고자료를 확인하실 수 있습니다.https://jeonghwan-kim.github.io/posts/?series=HTTP책은 이 두 권입니다. 시부카와 요시키, 한빛미디어 데이빗 고울리, 인사이트 수업을 마치신 뒤에 이 자료를 참고해서 스스로 정리해 보시면 더 도움이 되겠네요.

3.1.3 14:00 정도부터 영상이 조금 이상합니다...!!

영상 편집 중에 잘못된 부분이 있었네요. 바로 수정했습니다. 제보해 주셔서 정말 고맙습니다. 다음 수업에도 이상한 점있으면 언제든 말씀 부탁드려요.

MyReact를 IIFE(즉시실행함수)로 설계하신 이유

함수 스코프 안에 관련 코드를 담으려고 즉시실행함수를 사용했습니다. 아래 ai 답변의 특징을 참고하시면 좋을 것 같습니다.하지만 프로젝트에서 웹팩을 사용하고 있어서 직접 ECMAScript 모듈 문법 시스템을 활용해도 될것 같습니다.// MyReact.js export function createContext() {} // 혹은 const MyReact = { createContext } export default MyReact

[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교

맞습니다. 수업에서는 JSX문법을 사용하기 때문에 프롭 인자 전달 값이 잘 보이지 않는데요. 자바스크립트로 바뀌면 이런 코드가 됩니다.// React.createElement(FilteredPosts, {posts: filterdPosts} )함수를 호출할 때마다 { posts: filteredPosts } 란 리터덜 표현식에 의해 새로운 값이 생성되는데요. 이 때문에 캐시한 프롭 객체와 다른 값으로 판단하는 것입니다.

class와 constructor를 이용한 객체 지향 프로그래밍

일종의 추상화 입니다. 우리가 어떤 사물이나 현상을 언급할 때 때 특성과 동작을 모두 설명할 수 있는데요. 간단히 이름을 사용해 표현할 수 있습니다. 가령 "코가 길고 귀가 크고 덩치가 큰 네 발 달린 초식 동물" 보다는 "코끼리"라는 이름을 사용하는 것처럼 말이죠. 리셋 버튼을 표시하고 사용자 입력을 처리하는 것을 SearchFormView라는 클래스로 추상화했습니다. 이러한 역할을 사용할 때 매번 해당 코드를 직접 작성하는 것보다는 이 역할을 담당하는 객체를 사용하면 훨씬 효율적입니다. 사람은 구현된 코드 보다는 추상화된 이름을 사용할수 있어서 좀 더 큰 규모의 로직을 다룰 수 있는 이점이 생깁니다.관련되서는 절차지향 프로그래밍과 객체지향 프로그래밍에 대해 공부하시면 도움이 되실 겁니다.