런타임노트

나에게 node 버전은 항상 말썽이다. npm 마다 맞는 버전이 있어서 업데이트 해주라는 에러가 떴다. node 버전을 그 때 그 때 다운로드 받아서 업데이트 해줄 수 있겠지만, 노드의 버전 관리를 해주는 nvm으로 하는 게 더 좋다. NVM 이란? Node Version Manager 여러버전의 node.js 설치 및 버전 변경을 관리해주는 도구 nvm 을 사용하면 상황에 맞게 node.js를 원하는 버전으로 설치, 변경할 수 있다. https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically writ..

원인 함수인데 함수로 써주지 않아서 생기는 원인 ex) function() 인데 function으로 작성할 경우 해결 함수인데 function 이라고 작성한 게 있다면 function()으로 수정한다. 참고 : https://heytech.tistory.com/428

원인 useRoutes는 로 감싸야 하는데, 감싸지 않고 사용해서 발생한 에러. 해결 index.js 에서 import { BrowserRouter } from 'react-router-dom'; 해주고, const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 이렇게 App.js 를 BrowserRouter로 감싸주니 해결됨. 참고 : https://itprogramming119.tistory.com/entry/Uncaught-Error-useRoutes-may-be-used-only-in-the-context-of-a-Router-component-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

Can't resolve '@mui/material/TextField' 라는 에러.. 리액트 너무 막 배우고 하려니까,, 기본도 모르겠는 이 기분,, mui 에 있는거 갖다 쓰고 싶은데 npm install 뭐해야 할지도 모르는,, 바보 # 👇️ with NPM npm install @mui/material @emotion/react @emotion/styled --force # 👇️ only if you use @mui/icons-material npm install @mui/icons-material --force # 👇️ only if you use @mui/lab npm install @mui/lab --force # --------------------------------------------..

react native🐥 npm run android를 했더니 validateSigningDebug 에러가 났다. 이것은 android/app 폴더 안에 debug.keystore 이 없어서 생기는 에러이다. 하나 만들어 준다! 안드로이드는 debug, release 모두 key가 필요하다. android/app 으로 이동하여 아래의 명령어를 입력해준다! keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000 예라고 입력해주면 debug.keystore 생성 완료! 출처 : https://velog.io..

react에서는 이나 \n을 써도 줄바꿈 되지 않았다. React에서 텍스트 줄바꿈? const text = "동해물과 백두산이\n 마르고 닳도록" 위 문장을 React에서 출력하려면 어떻게 해야할까요? 일반적으로 JSX에서는 개행 문자(‘\n’)가 동작하지 않아 아래와 같이 출력이 됩니다. 동해물과 백두산이 마르고 닳도록 그러면 아래와 같이 줄바꿈 태그인 을 사용하면 어떨까요? const text = "동해물과 백두산이 마르고 닳도록" 이 문자 그대로 출력됩니다. 동해물과 백두산이 마르고 닳도록 아니 그러면 어떻게 해결하나요? CSS 상에서 white-space:pre-wrap을 설정해주시면 됩니다. white-space: pre-wrap; 개행 문자(‘\n’)을 잘 인식하여 줄바꿈한 결과를 출력하게 ..

true && expression 항상 expression false && expression 항상 false 따라서 && 뒤의 element는 조건이 true일 때 출력된다. 조건이 false라면 react는 무시하고 건너 뜀. 출처 https://ko.reactjs.org/docs/conditional-rendering.html 조건부 렌더링 – React A JavaScript library for building user interfaces ko.reactjs.org

나는 리액트에서 렌더링 이야기만 나오면 지레 겁을 먹는다. 가장 어려운 부분이기 때문이다. [상황] 부모 - 자식 컴포넌트가 있으면 부모에서 버튼 클릭 시, 자식 컴포넌트가 바뀌어야 한다. 그런데 렌더링이 안되고 자식 컴포넌트가 바로 바뀌지 않음. 우리는 렌더링이 필요한 상황! 그런데 구글링 해보면 다 렌더링을 막는 글들 뿐이었다. 해결한 방법은 쉬운 방법. [해결] 보여줄 값이 바뀌었다는걸 자식 컴포넌트가 알 수 있도록 "값이 바뀜"을 state로 관리한다. // 부모가 자식에게 우리 변했어! 라고 알려줄 힌트 const [initPage, setInitPage] = useState(false); useLayoutEffect(() => { setInitPage(true); }); if(수정이 성공하면)..