missing in props validation 이라는 처음 보는 에러가 나타났다. eslint에서 일어나는 문제인 것 같다. props를 전달해주다가 나온 에러인데 내가 봤을 땐 코드에는 별다른 문제가 없는 것 같다. chatGPT를 잘 쓰지 않지만 이번 기회에 이 에러가 뭔지 한 번 물어보았다. 아래는 답변 내용. The error message "missing in props validation" indicates that there is a missing prop validation for the 'MainCarousel' component. In React, it is good practice to validate the props passed to a component to ensure th..
기존 배열(state)을 새 배열(action)로 교체해야 하는데 처음엔 아래 처럼 해보기도 하고 그냥 action.payload만도 넣어보고 [...action.payload] 이렇게도 넣어보고 했지만... 에러는 안 나지만 작동이 안 됐다. 결국 공식 사이트에서 해결 방법 찾음... 역시 모든 답은 공식 사이트에. 리액트에서는 불변성이 중요한데 배열을 사용할 때에는 카피본을 만들어서 수정해야한다 정도로 가볍게만 알고있다가 리덕스툴킷에서 제대로 당한거다. One of the primary rules of Redux is that our reducers are never allowed to mutate the original / current state values! -https://redux-toolk..
File 'X 'not found. The file is in the program because: Matched by include pattern './src' in the program because : ... 아무것도 건드리지 않았는데 tsconfig.json 파일의 첫 번째 줄 { 하나만 있는 부분에 에러가 났다. 인터넷을 찾아보니 vscode를 껐다 켜거나 src 폴더에 ts파일을 추가해보라고...(https://velog.io/@heony/tsconfig.json-input-error) 실제로 vscode를 껐다 켜니 바로 없어졌다... 조금 허무하지만(?) 나중에 다시 찾게 될 수도 있으니 적어놓는다.
모달로 뜨는 작은 검색창을 만들던 중 typescript를 사용해 set state를 보내려고 하니 에러가 났다. const [miniSearch, setMiniSearch] = useState(false); 보내려 한 것은 useState의 setMiniSearch 부분이다. 처음엔 props 받는 컴포넌트 파일에 아래와 같이 setMiniSearch 타입을 miniSearch와 똑같이 boolean으로 지정했더니 에러 문구가 바뀌었다. 'Dispatch'타입은 boolean에 할당할 수 없다고 친절하게 타입을 알려준다. 아래와 같이 props 받는쪽에서 타입을 Dispatch으로 바꾸면 에러 해결. Dispatch, SetStateAction은 import해와야 한다.
Type 'X' is not assignable to type... Property 'X' does not exist on type 'IntrinsicAttributes' 다른 컴포넌트로 props를 전달하려 하니 이런 에러가 떴다. 인터넷을 좀 뒤지면서 아래 사진처럼 props 전달 받는 부분을 이래저래 바꿔서 넣어보기도 하고 type지정을 따로 빼서 해주기도 했는데 아무리해도 소용이 없었다. 인터넷 뒤지길 그만두고 이전에 봤던 typescript관련 영상 중 관련 내용이 있을까 싶어 뒤지다가 해답을 찾았다. typescript를 사용할 때 컴포넌트를 리턴하는 경우에 React.FC 라는 타입을 지정해줄 수 있는데 이렇게 리액트 펑션 컴포넌트를 사용할 때에는 props를 전달 받을 때 제네릭 지정이 필..
개발을 하다가 서버에서 api를 받아와야 할 때가 있다. 이 때 브라우저의 주소와 api의 주소가 일치하지 않으면 데이터를 받아올 수가 없다. 이는 CORS를 설정해 해결해야 하는데 이런 문제가 발생하는 이유는 보안 때문이다. 소중한 라이브 데이터의 유출을 막기 위해 CORS로 허가되지 않은 도메인에서는 데이터를 받을 수가 없도록 되어있다. 이런 문제를 임시로 해결할 수 있는 방법이 proxy를 이용하는 것인데, 중요한 것은 proxy는 주소를 우회하여 데이터를 받아오는 방식이라 개발할 때에만 사용할 수 있고 배포 환경에서는 보안상의 이유 등으로 사용할 수 없다. 배포 시에는 결국 서버쪽 사람들과의 소통을 통해 해결해야 하는 것. proxy의 흐름은 이렇다. 브라우저에서 앱을 통해 데이터를 요청하고, 앱..