count 값을 변경하기 위해서는 직접 count값을 변경하지 못하는 이유와,setCount에 아규먼츠로 count++ 이렇게 넘겨주었을때 에러나는 이유가 궁금합니다.

jwt 10분 유효기간 끝난 상황에서jwtAxios를 이용해서 products 를 호출하면 JWTCheckFilter를 걸쳐서 validateToken 메서드를 호출하고 거기서 Exired Exception 이 납니다. accessToken 이 유효시간(10분)이 경과하였으면refreshToken 으로 교체되는 걸로 강의내용을 인지했었는데요. 제가 어디서 놓친건지 잘 모르겠네요 ㅠ react쪽에서 beforeReq 쪽에서 결국 expired 처리가되고brforeRes 에서 뭔가 유효기간이 끝났으면/api/member/refresh 를 호출해야될 것 같은데  예제 소스 잘 따라한거 filter에서 먼저 유효기간이 만료되어 exception 부터 호출되어 더이상 진행이 안되네요. 어디가 정확히 문제인지 모르겠네요.jwtUtil.js 는 제공해주신 소스는 오타가 있을까봐 동일하게 ctrl+c , v 도 했습니다.  JWTUtil.java 일부분 public static Map<String, Object> validateToken(String token) { Map<String, Object> claim = null; try { SecretKey key = Keys.hmacShaKeyFor(JWTUtil.key.getBytes("UTF-8")); claim = Jwts.parserBuilder() .setSigningKey(key) .build() .parseClaimsJws(token) // 파싱 및 검증, 실패 시 에러 .getBody(); } catch (MalformedJwtException malformedJwtException) { throw new CustomJWTException("MalFormed"); } catch (ExpiredJwtException expiredJwtException) { throw new CustomJWTException("Expired"); } catch (InvalidClaimException invalidClaimException) { throw new CustomJWTException("Invalid"); } catch (JwtException jwtException) { throw new CustomJWTException("JWTError"); } catch (Exception e) { throw new CustomJWTException("Error"); } return claim; }

모달창이 안떠서 settimeout으로 처리 하니Modal에 result 값이 true로 적용됩니다코드는 깃으로 올리겠습니다 선생님 강의에 올라와있는 ch06 파일 코드 넣어서 해봐도모달창이 안뜨네요 ㅜㅜ https://github.com/hyeonbin03/webstromhub 

실습코드 부분이 빠르게 지나가는데,실습코드를 따로 받을수 있는 곳이 있을까요?

강의를 듣다가 의문이 생겨서 질문 드립니다.const OrderPage = () => ( <div className="OrderPage"> <Page header={<Title>주문내역</Title>} footer={<Navbar />}> <OrderStatusCard order={fakeOrder} /> <OrderPaymentCard order={fakeOrder} /> <OrderDeliveryCard order={fakeOrder} /> </Page> </div> );위 코드는 수업중 강사님이 작성하신 코드 입니다.제가 의문인 부분은 OrderStatusCard, OrderPaymentCard, OrderDeliveryCard 모두 같은 fakeOrder를 파라미터로 넘기는 점 입니다.fakeOrder는 Order가 발생될 때 생기는 모든 데이터를 저장하고 있습니다.이때 OrderStatusCard 관점에서 보면 Status와 상관 없는 데이터들도 fakeOrder를 받으면서 같이 파라미터로 넘어가게 됩니다.(예를 들어 deliveryPrice, discountPrice 등 배달에 관련 데이터가 같이 넘어갑니다.)해당 실습 예제 코드는 적은 데이터를 사용해서 문제가 없겠지만 만약 수 많은 데이터가 한번에 오고 갈때 성능적인 이슈가 발생하는 문제와 status와 상관없는 데이터들이 넘어가 컴포넌트들이 완벽하게 분리 되지 않는 느낌이 있습니다.제가 생각한 방법은 조금 귀찮더라도 Order정보를 가지고 있는 OrderPage에서 데이터를 분리해서 넘겨주는 것이 좋다고 생각합니다.아래는 제가 작성한 코드입니다.const OrderPage = () => ( <div className="OrderPage"> <Page header={<Title>주문내역</Title>} footer={<Navbar />}> <OrderStatusCard status={fakeOrder.status} orderDate={fakeOrder.orderDate} name={fakeOrder.name} id={fakeOrder.id} /> <OrderPaymentCard totalPrice={fakeOrder.totalPrice} paymentMethod={fakeOrder.paymentMethod} productPrice={fakeOrder.productPrice} deliveryPrice={fakeOrder.deliveryPrice} discountPrice={fakeOrder.discountPrice} /> <OrderDeliveryCard deliveryAddress={fakeOrder.deliveryAddress} deliveryContact={fakeOrder.deliveryContact} messageToRider={fakeOrder.messageToRider} messageToShop={fakeOrder.messageToShop} /> </Page> </div> );현업에서는 어떤 방식을 사용하는지 강사님의 의견을 듣고 싶습니다. 좋은 강의 잘 듣고 있습니다. 긴글 읽어주셔서 감사합니다 ㅎㅎ  

Module not found: Error: Can't resolve 'react-redux'... 이런 에러문구가 나오는데 계속 랜더링 오류가 납니다... 다음 추가 한일 1) npm i  2) node_modules 제거 후 다시 npm i   

tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?백엔드 서버의 경우 nodemon으로 자동으로 수정사항 발생 시 서버 재시작 해주던데, 리액트 서버의 경우 어떻게 하는게 좋은가요?

useState 쳤을 때 자동완성 되는 단축키 무엇인가요? extention 인가요?

리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이가 무엇인지 궁금합니다.

 8.5에서 업데이트 기능 구현 전, 오류를 없애기 위해서 readonly 속성을 적용시켰었는데, readonly를 지우지 않고도 onChange가 동작해서 여쭤봅니다.onchange가 값이 변경될 때 실행되는 걸로 알고 있는데, readonly인데 값이 변경될 수 있나요? 8.6) Update 입니다.

import { gql } from "@apollo/client"; export const FETCH_BOARDS = gql` query fetchBoards { fetchBoards { _id writer title createdAt } } `;import { useQuery } from "@apollo/client"; import { useRouter } from "next/router"; import BoardListUI from "./BoardList.presenter"; import { FETCH_BOARDS } from "./BoardList.queries"; export default function BoardList() { const { data } = useQuery(FETCH_BOARDS); //쿼리문을 실행하면 데이터에 값 넣어주기 return ( <BoardListUI data = {data} /> ); } 강사님 하고 똑같이 했는데 제것만 에러가 나네요 강사님껄로 하면 실행이 됩니다 _id 받질 못해서 안되는데 왜이럴까요 ㅠㅠ { "errors": [ { "message": "Cannot query field \"_id\" on type \"BoardReturn\".", "locations": [ { "line": 3, "column": 5 }

강의 초반, 스토리북 설치를 하는데 npx storybook@latest init 명령어를 치면 스토리북이 열리긴 하는데 로딩이 멈추질 않습니다. ㅠㅠ오류 메시지는 아래와 같이 나옵니다.열심히 구글링도 해봤지만 해결책을 찾지 못했습니다.

  안녕하세요 선생님강의 잘 듣고 있습니다! 다름이 아니라 선생님 강의 중 'JSX로 UI 표현하기' 편을 듣고 있는데import를 이용해서 CSS파일을 연결하는 부분에서 막혔습니다강의와 똑같이 작성했는데 스타일 적용이 안되는 이유가 뭘까요?화면에 오류 표시도 안뜨는데 코드에 문제가 있는지 궁금합니다 

안녕하세요 선생님 Count, PlusButton이 re render 되는 조건을 알고 싶습니다. 예전예시에서는 class Consumer extends React.Component { constructor(props) { super(props); this.state = { value: emitter.get(), }; this.setValue = this.setValue.bind(this); } setValue(nextValue) { this.setState({ value: nextValue }); } componentDidMount() { emitter.on(this.setValue); } componentWillUnmount() { emitter.off(this.setValue); } render() { return <>{this.props.children(this.state.value)}</>; } } Consumer가 state를 가지고 있음으로순서가Provider render -> Consumer render -> Consumer componentDidMount -> Provider componentDidMount (set 을 통해 빈 객체였던 것을 value, setValue로 바꿔줌)이때 Consumer state는 emitter.get()임으로 변경된 것을 감지 하고 re render 하는 것으로 이해했었습니다.헌데 이번예시에서는 function useContext(context) { console.log("userContext, context.emitter.get() = ", context.emitter.get()); const [value, setValue] = React.useState(context.emitter.get()); React.useEffect(() => { console.log("Consumer useEffect"); context.emitter.on(setValue); return () => { console.log("Consumer useEffect clean"); context.emitter.off(setValue); }; }, [context]); return value; } const Count = () => { console.log("Count render"); const { count } = MyReact.useContext(countContext); return <div>{count}</div>; };Provider render -> Count(Consumer) render -> Count's useEffect -> Provider's useEffect 을 통해emitter 값이 빈객체에서 count, setCount로 채워지는것은 이해하였습니다.이때 Count 가 다시 한번 re render되는데 왜 그런 것인가요?첫번째 예시처럼 state?같은게 존재하는건가요?다시 render되는 조건이 궁금합니다.

안녕하세요. 제로초님 좋은 강의 감사합니다. 해당 강의에서 fresh 상태일 때는 새로고침을 해도 서버에서 데이터를 가져오지 않고 캐시된 데이터를 사용한다고 하셨습니다. 그래서 fresh 상태일 때 새로고침을 하여 FollowRecommendSection를 트리거 하였고 해당 API가 요청이 되는지 보았습니다.export default function FollowRecommendSection() { const { data } = useQuery<User[]>({ queryKey: ['users', 'followRecommends'], queryFn: getFollowRecommends, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); return data?.map((user) => <FollowRecommend user={user} key={user.id} />); } export async function getFollowRecommends() { const res = await fetch(`http://localhost:9090/api/followRecommends`, { next: { tags: ['users', 'followRecommends'], }, cache: 'no-store', }); ... } 그런데 개발자도구 네트워크 탭에서는 밑에 사진과 같이해당 API가 다시 요청되는것을 확인할 수 있었습니다.fresh라 할지라도 API 요청은 항상 이루어지며 데이터만 캐시된 것을 ?? 가져오는 것인지 궁금합니다.  감사합니다. 

test("Prevent the -,+ button from being pressed when the on/off button is clicked",()=>{ render(<App />); const onOffButtonElement = screen.getByTestId("on/off-button"); // click onOffButtonElement button fireEvent.click(onOffButtonElement); const plusButtonElement = screen.getByTestId("plus-button"); expect(plusButtonElement).toBeDisabled(); })on/off버튼을 통해 플러스와 마이너스 버튼의 클릭시 disable속성을 추가하는 과정에서 app.test.js에 테스트항목에 마이너스에 대한 내용을 안적어도 무관한가요?플러스가 잘작동하면 마이너스도 잘 작동할 것이기 때문인가요?

안녕하세요 섹션 1 듣고 혼자 해보다가 궁금한 게 생겨서 질문드립니다.기존 사이트는 왜 "/login"으로 진입하면 "/i/flow/login"로 리다이렉트하게 했을까요?단순하게 생각하면 그냥 "/login", "/signup"에 페이지를 두던가 아니면 "/i/flow/login", "/i/flow/signup"만 사용하도록 하면 리다이렉트 로직 필요없이 더 깔끔할 것 같은데 말이죠.또 의아한 것은 기존 사이트에서 '/signup' url로 진입하면 '/i/flow/signup'으로 리다이렉트하는데 계정 만들기 버튼은 로그인과 다르게 href를 /i/flow/signup'으로 해두었네요. 실수인가..물론 제로초님은 기존 사이트를 최대한 그대로 구현하려고 하신 것 뿐이니까 당연히 정확한 의도를 알 수 없으시겠지만 현업자 입장에서 추측이 가는 부분이 있으신가 싶어 질문드립니다!

데이터패칭을 리액트쿼리로하고 데이터 공유를 zustand로 하는데요!만약 데이터 패칭을 해서 받아온 데이터를 전역으로 공유해서 사용하고싶으면 어떤식으로 처리되는게 가장 좋은 방법인가요??

현재 하고 있는 프로젝트에 테스트 코드를 연습하고 있는데 상태 기반 검증은 보통 "custom hook"과 같이 비즈니스 로직에 하고, 행위 검증은 컴포넌트의 이벤트 처리와 같은 상황에 하고 있는데 이렇게 진행하는게 맞는 건지에 대해서 궁금해서 질문을 남기게 되었습니다!vitest에서는 stub과 mock과 같은 테스트 더블을 완벽하게 구별짓지 않는다고 생각하고 있는데 맞을까요? 추가적으로 공부를 해보았을 때 상태 기반 검증은 stub, fake 행위 기반 검증은 mock, spy로 하는 것이라고 나누었는데 이것이 맞는 내용인가요?  

디펜던시 호환문제같은데 다른 게시글에서 본https://www.npmjs.com/package/react-custom-scrollbars-2여기 들어가서 npm i react-custom-scrollbars-2 설치하려고 해봐도 같은 에러가 뜹니다ㅠ