오류 | props.children type(ft. react, typescript)
2022. 9. 16. 00:05
공부/오류
'{}' 형식에 'children' 속성이 없습니다. '{ children: Element; }' 유형에 'IntrinsicAttributes' 유형과 공통적인 속성이 없습니다. ❓상황 props.children type을 지정하기 위해, React.FC ( = FunctionComponent)을 사용할 때 발생한 오류 🔎 원인 파악 React.FC ( = FunctionComponent) 에 children type을 가지고 있지 않아서 발생한 오류 ✨ 해결 방법 PropsWithChildren을 type으로 사용한다.
오류 | mySQL load data infile 오류
2022. 8. 23. 13:18
공부/오류
Error Code: 1290. The MySQL server is running with the --secure-file-priv option so it cannot execute this statement ❓상황 mySQL workbench에서 load data infile 쿼리를 실행했을때 발생한 오류 🔎 원인 파악 mySQL에서는 기본적으로 파일을 로드할때, 지정된 경로에서만 로드되도록 설정되어 있다. mySQL 8.0 Command line Client 를 실행하고, show variables like 'secure_file_priv'를 입력하면 경로를 확인 할 수 있다. 내 .CSV 파일은 해당 경로가 아닌, 다른 경로에 있고 이를 mySQL에서 load해서 에러가 발생한 것이다. ✨ 해결 방..
공부 | Redux Toolkit 정리
2022. 8. 12. 03:18
공부/프론트엔드
상태관리 라이브러리 ❓상황 가장 많이 쓰이는 상태관리 라이브러리인 Redux의 최신버전인 Redux Toolkit을 정리하기 위함 📖 Redux Toolkit 이란? 상태를 저장하는 파일을 따로 분리하여 관리할 수 있다. 여러 컴포넌트를 거치지 않아도, 상태가 필요한 컴포넌트에 곧바로 상태를 줄 수 있다. Redux Toolkit 패키지는 Redux 로직을 작성하는 표준 방법이 되도록 고안되었습니다. 원래 reducour에 대한 세 가지 일반적인 우려를 해결하기 위해 만들어졌다. "Redux 스토어 구성이 너무 복잡합니다." "Redux가 유용한 작업을 수행하기 위해서는 많은 패키지를 추가해야 합니다." "리듀스에는 너무 많은 보일러 플레이트 코드가 필요합니다." 🐸 설치 CRA + Redux # Red..
공부 | swr 정리(ft. react)
2022. 8. 4. 02:03
공부/프론트엔드
리액트 데이터 패칭 라이브러리 ❓상황 Next.js CSR에서의 데이터 패칭하는 방법을 배우기 위해, swr를 학습하고 정리함. 📖 swr 이란? "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환하여 UI를 만들고, 데이터 fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져와 UI에 표시하는 전략입니다. 네트워크 재연결되거나, 뷰포트가 클릭되면 다시 데이터 패치가 발생합니다. 쉽게 말하자면, 사용자의 노트북이 대기상태에서 깨어나거나, 브라우저 탭을 전환할 때 자동으로 데이터 패치가 발생합니다. 🐸 설치 yarn add swr 🚀 빠른 시작! ..
오류 | props를 객체의 key로 사용할때 발생한 오류(ft. react, typescript )
2022. 8. 2. 02:21
공부/오류
Error: Component selectors can only be used in conjucntion with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform ❓상황 부모 컴포넌트로부터 props로 넘겨받은 prop을 객체의 key로 사용할 때 발생한 오류 🔎 원인 파악 key로 사용하는 값의 type을 지정해주지 않아서 발생한 문제 ✨ 해결 방법 key로 사용한 값의 type을 지정해준다.