본문 바로가기

개발/react 생태계

[React] useSelector가 Promise를 리턴? useSelector로 값을 찍어보는데 Promise를 리턴했다. 뭐지????? 갑자기??? 미들웨어로 thunk를 써서 그런가? 싶었는데.....응 아니야.... 20분 삽질했나.... 혹시 몰라 리듀서 메소드 앞에 async가 있는걸 지워밨는데.... 정상작동 됐다. 다른 분이 작업한 내용을 수정했는데, 이런 사이드 이펙트가..... 리듀서 메소드 앞 async는 조심하자! 이상입니다 *코드 깨지면 아래 참고해주세요 https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/react-useselector%EA%B0%80-promise%EB%A5%BC-%EB%A6%AC%ED%84%B4-7a34523656d3 더보기
[VsCode] 여러 커서 작업 prettier사용시 들여쓰기대신 스페이스바로 일일히 작업해야할때가 있습니다. 이 단축키를 알기전까지 손수 이태리 장인처럼 해줬는데요. 저는 시티보이여서 더이상 못참고 단축키를 쓰기 시작했습니다. mac에서는 아래 명령어로 여러 줄에 대해 커서를 적용할수 있습니다. ⌘(command) + ⌥(option) + ↑ or ↓ 이상입니다 더보기
[React] prettier converter 개발시 prettier을 갑자기 도입하게 되면, 이전에 작성된 코드에 대해 엄청난 에러가 발생합니다. 이럴때 명령어 하나로 전코드 양식을 바꿔주는 방식이 있으면 좋을텐데요. prettier --write . 위 명령어를 바꾸고자 하는 디렉토리 맨 상단에서 실행하시면 됩니다. 그럼 대부분 약속된 방식으로 코드들이 전부 수정됩니다. *바뀌지 않은 일부에 대해선, 직접 수정하시면 됩니다 더보기
[React] newtork pending 화면 작업시 api 서버 응답이 매우 늦어질때가 있습니다. host를 탭에 직접 찍으면 문제 없는데, 비동기 요청을 하면 응답이 매우 늦어질때가 있습니다. 이는 이전부터 발생해온 이슈인데요. 제가 찾은 해결책은 두개이고, 두번째가 가장 확실한듯 합니다. 1)개발자 도구 > 설정(톱니바퀴) > 소스맵 사용 끄기 2)React.StrictMode 렌더링이 두번되 주석처리했던 'React.StrictMode '을 다시 살렸더니, 속도 이슈가 해결됐습니다. 이상입니다 더보기
[React] redux devTools in toolkit redux-toolkit에서 redux devtool을 사용하는 방법은 다음과 같습니다 1) chrome 확장자 설치 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 7f673317f on 5/31/2022. chrome.google.com 2) configureStore에 option 추가 const store = configureStore({ reducer: { user: userRe.. 더보기
[React] Newline required at end of file but not found prettier사용시 발생하는 에러입니다. 해결방법은 매우 간단합니다. 파일 맨 마지막을 빈 라인으로 둬야합니다. 즉, 현재 에러가 발생한 파일의 마지막에서 엔터를 한번 눌러주면 됩니다 더보기
[React] Expected blank line before this statement prettier에서 위 에러가 뜨면, 위 코드와 한칸 띄어 달라는 의미입니다 더보기
[React] Line 4:8: Replace `REACT_APP_API_ENTERPRISE_HOST` with `·REACT_APP_API_ENTERPRISE_HOST·` prettier사용시 뜨는 에러입니다. .env 키값에 대한 에러인데요 어떤 의미를 가지고 있을까요? export default가 아닌 export된 모듈들은 아래와 같은 방식으로 import합니다 import {REACT_APP_API_ENTERPRISE_HOST} from 'test' 위 에러는 괄호와 식별자 사이 간격을 띄우라는 얘기입니다. import { REACT_APP_API_ENTERPRISE_HOST } from 'test' 이상입니다 더보기