게시글
질문&답변
2024.05.17
[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.
네 가지 질문을 주셨는데요 먼저 …rest에 대해 먼저 이해하시면 좋을 것 같습니다. 전개 구문(Spread Syntax)이라는 문법인데요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax 배열이나 객체를 다룰 때 사용합니다. 객체에서 사용할 때는 const obj = {a: 1, b: 2, c: 3} const obj2 = { ...obj, d: 4} // 전개 구문으로 객체 합성. {a: 1, b: 2, c: 3, d: 4} (function func({a, ...rest}) { console.log(rest) // 전개 구문으로 a를 제외한 객체가 할당됨 {b: 2, c:3} })(obj) 기존 객체에 필드를 추가하거나 제거할 때 사용합니다. — 이제 질문을 하나씩 보시죠. 1. 어트리뷰트와 태그 안 두 가지 방식 모두 사용합니다. 어트리뷰트: styleType, onClick 태그안: children(‘주문하기’) 2. 아니오. onClick도 props 인자에 들어갑니다. createElement( Button, // 함수 { styleType: "brand", onClick: () => console.log("TODO: 주문하기 클릭") }, // props "주문하기 , 결제하기" // children ) 3. rest가 props 객체를 전개한 객체이기 때문에 props 객체의 일부입니다. 위에 전개 구문을 참고하시면 되겠습니다. 4. 이 코드는 의도하지 않은 결과가 나올겁니다. children 프롭을 명시하면서 태그안에는 빈 문자를 전달한 셈이에요. 실행해봐야 결과가 나올텐데요. 이렇게 작성하는 것보다는 아래 둘 중 하나를 사용하시는 것이 좋습니다. console.log("TODO: 주문하기 클릭")} children={"주문하기"} /> console.log("TODO: 주문하기 클릭")} >주문하기
- 1
- 2
- 84
질문&답변
2024.05.01
sort() 질문 드립니다.
지원님 안녕하세요? 자바스크립트 배열의 sort 함수를 사용하실때 양수,음수,0을 반환하는 비교함수를 사용하는 것이 맞습니다. 제가 정확한 동작을 모르고 부등호를 사용한 것인데요. 이것은 브라우져 별로 코드를 평가하는 차이가 있는 것 같습니다. 지원님께서 사용하신 것처럼 - 연산자를 사용해 주세요. 비슷한 질문이 있어서 참고하시면 좋겠습니다. https://www.inflearn.com/questions/222368/데이터-sort-적용-문의
- 1
- 2
- 91
질문&답변
2024.04.24
reset 시점에 searchResult 빈 배열로 update
이미 답을 찾으셨을 것 같은데요. 지적해 주신것처럼 배열도 초기화 해주는 것이 안전합니다. 영상에는 없지만 다음 브랜치(react/search-result-4)로 이동하면 해당 코드가 있을 거에요. 중요한 부분 놓치지 않고 말씀해 주셔서 감사합니다.
- 1
- 2
- 84
질문&답변
2024.03.28
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
둘은 다릅니다. handleClick1은 훅에 생성함수를 전달하는데 항상 undefined를 반환합니다. 의존성과 무관하게 항상 undefined를 메모이제이션하는거죠. handleClick1은 함수가 아니라 undefined라서 실행하면 TypeError가 발생할 겁니다. 한편 handleClick2는 생성함수를 전달하는데 postId를 인자로 받는 함수를 반환합니다. 의존성에 따라 다른 동작을 하는 함수를 메모이제이션합니다. 이 반환값을 할당받은 handleClick2은 함수로 실행할수 있습니다.
- 1
- 2
- 124
질문&답변
2024.03.28
[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.
새로운 배열이 의존성으로 들어가기 때문에 다른 값으로 인식합니다. 배열은 참조 값을 가지고 비교하기 때문입니다. 차근차근히 순서를 보시면요. Tag1을 클릭하면 tag 상태가 갱신되고 루트 컴포넌트가 리렌더됨 Board 컴포넌트를 다시 그리면서 새로운 배열을 posts 인자로 전달. (객체 리터럴을 사용하기 때문) Board 컴포넌트는 인자 posts를 MyReact.useMemo 의존성 인자로 전달 이전에 받은 배열과 참조 값이 다름. 아래 AI 도 제대로 답해주셨네요.
- 1
- 2
- 98
질문&답변
2024.03.25
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable
코드 맨 아래 플러그인 지정하는 부분에서 발생한 원인이네요. ...(process.env.NODE_ENV === "production" && [ new MiniCssExtractPlugin({ filename: "[name].css", }), ]), 첫 번째 표현식이 false 이기 때문에 전체 문장은 false가 될 겁니다. [...false] 로 평가되어 불리언 타입에 나머지 연산을 시도하다가 TypeError 가 발생했을 것 같아요. 삼항 연산자로 한 번 바꿔보시겠습니까? ...(mode === "production" ? [new MiniCssExtractPlugin({ filename: `[name].css` })] : [])
- 1
- 1
- 87
질문&답변
2024.03.25
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
웹팩 4 버전 시절에 만든 강의입니다. 지금은 5버전을 많이 사용해서 내용이 정확히 일치하지는 않는데요. 주요 개념와 api는 여전히 유효합니다. 라이브러리 업데이트에 따라 강의 업데이트 하려고하는데요. 아직 구체적인 일정은 정하지 못했습니다. 여전히 관심 갖어 주셔서 정말 고맙습니다.
- 1
- 1
- 108
질문&답변
2024.03.25
[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.
오타를 짚어 주셔서 고맙습니다. 다른 분들도 도움 되시라고 4.3.7 수업 본문에 적어 두었습니다. -- 어떤 부분이 궁금하신 건지 잘 모르겠습니다. 질문 내용을 여러번 읽어 보고 영상도 다시 확인했는데요. 혹시 실습 코드를 따라하시면서 캡쳐처럼 버그를 마주하신 게 아닌가 싶습니다. 어떤 코드였을 때 이런 현상이 있는지 알면 질문 내용을 파악하는 데 도움이 될것 같아요.
- 1
- 2
- 90
질문&답변
2024.03.21
[4.1장 레프 훅] useRef관련 질문이있습니다.
MyReact.useRef의 구현을 보시면 힌트가 되실 겁니다. 호출 될 때마다 커서를 증가 시키는데요. 매번 새로운 레프 객체를 만들기 때문에 { current: 1 } 값에 1을 더해 2가 로깅되는 현상입니다. 버튼 클릭 상태 갱신 컴포넌트 리랜더 훅 호출 MyReact.useRef: 이전 호출에서 증가된 커서로 memorizedStates 접근. 값이 없어서 새로 만듬. {current: 1} // 문제의 원인 이 현상을 해결하려면 컴포넌트 측에서 MyReact 커서를 초기화해야합니다. export default () => { // 커서를 초기화 합니다. MyReact.resetCursor(); const ref1 = MyReact.useRef(1); const [state, setState] = React.useState(0); if (state > 2) { ref1.current = ref1.current + 1; console.log("ref1", ref1); } 블로그에는 추가해 놓았는데 참고해주세요. https://jeonghwan-kim.github.io/2023/06/24/lecture-react-season2-part4-ch1#useref-직접-만들기 제가 영상을 만들 때 누락한 부분이었네요. 꼼꼼히 살펴봐 주셔서 실수를 바로 잡을 기회가 생겼습니다. 정말 고맙습니다.
- 1
- 1
- 97
질문&답변
2024.03.18
[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다
데이터를 전달하는 방식에 관해 궁금하신 것 같습니다. 컴포넌트도 클래스나 함수이기 때문에 문제를 더 일반적으로 정의하면 '함수(혹은 객체)에 메세지를 전달하는 방법' 정도가 될 수 있겠네요. 메세지를 인자로 전달하는 방식이 객체나 원시 타입인 경우가 있는데요. 둘 간의 성능적인 차이는 없다고 봅니다. 오히려 원시 타입 인자는 함수를 실행할 때마다 값을 복사하기 때문에 메모리를 더 쓰게 될 거에요. 물론 이것이 성능 저하에 의미있는 영향을 미치진 않고요. 저는 추상화 관점 으로 바라 봅니다. 객체나 함수에게 메세지를 전달할 때 추상화된 값을 전달하는 것이 원시타입을 전달하는 것 보다 사람이 이해하기 쉽기 있기 때문입니다. 아래 코드는 ' 컴포넌트에게 order 객체를 전달한다'라고 읽을 수 있어요. 한편 아래 코드는 좀 더 구체적이죠. 정답은 명확치 않습니다. 상황에 따라 달라요. 어플리케이션 안에서 주된 도메인 객체(order)가 있는 상황이라면 이걸 잘 활용하는 것이 코드 관리에 좋습니다. 객체 단위로 생각할 수 있기 때문이에요. 컴포넌트도 이 도메인 객체 단위로 설계해 order 인자를 전달한 것이고요. 컴포넌트가 도메인 정보를 알 필요가 없다면 두 번째가 더 합당할 거에요. 특정 인자에 도메인 냄새가 없어서 원시 타입의 값을 받도록 설계할 수 있기 때문입니다.
- 1
- 1
- 111