🤔 어떤 에러가 발생하였을까? 이전 글을 참고하면 좋다. https://programmerplum.tistory.com/199 [React 18] A component suspended while responding to synchronous input. (1) 🤔 어떤 에러가 발생하였을까? SignUpPC라는 부모 컴포넌트 안에 SignUpButton라는 자식 컴포넌트가 있다. 회원가입 버튼 클릭 시, SignUpButton 컴포넌트 안에서 Naver maps Geocoding을 통한 경도, 위도 정보 programmerplum.tistory.com 이전 글에서 { naver } = window; 위처럼 전역 변수로 네이버 객체를 가져오는 것 대신, const navermap = useNavermaps..

🤔 어떤 에러가 발생하였을까? SignUpPC라는 부모 컴포넌트 안에 SignUpButton라는 자식 컴포넌트가 있다. 회원가입 버튼 클릭 시, SignUpButton 컴포넌트 안에서 Naver maps Geocoding을 통한 경도, 위도 정보 가져오는 기능을 구현하던 도중, 다음과 같은 에러가 발생하였다. 에러 메시지 Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. at thro..

마이그레이션 하는 방법 dependencies 설치 아래의 라이브러리를 설치하자. Vite @vitejs/plugin-react vite-tsconfig-paths vite-plugin-svgr npm install --save-dev vite @vitejs/plugin-react vite-tsconfig-paths vite-plugin-svgr vite-tsconfig-paths 설치하는 이유 Vite에 tsconfig 파일에서 절대 경로를 해결하는 방법을 알려주기 위해 vite-tsconfig-paths가 필요하다. 이렇게 하면 다음과 같이 모듈을 가져올 수 있다. // before import MyButton from '../../../components' // after import MyButto..

1. 내 remote repo 싱크 맞추기 2. 내 local main에 싱크 맞춘 repo pull하기 3. pull 할 때 충돌 발생, vs code에서 수정 4. 수정 후 해결 mark 하고 commit & push 5. pr 생성하면 resolve 되어 merge 가능..!!! 참고사이트 https://irontech.tistory.com/25 Git & Sourcetree - Branch 충돌 해결하기 목표 충돌이란 무엇이고, 어떻게 해결하고, 어떻게 효율적으로 충돌을 피할 수 있고, 예방적인 차원에서 충돌이 덜 일어나게 할 수 있는가에 대해 알아보도록합니다. 브랜치를 나누었을 때, 각 irontech.tistory.com

노마드코더 영화 웹 서비스를 만들다가 리액트 렌더링이 두 번씩 발생하는 것을 발견하였다. 렌더링이 두 번 발생하는 이유는 React.StrictMode 때문입니다. npx create-react-app 으로 생성하면 자동 설정이 되있습니다. 따라서 index.js 에서 이 Wrapper를 제거해주면 컴포넌트가 두번씩 호출되지 않습니다. ReactDOM.render( ); StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. 리액트 공식문서 StrictMode는 아래와 같은 부분에..

제로베이스 예제 코드를 복사해서 npm start를 했을 때, 아래와 같은 오류가 발생했다. 이런 오류를 해결하는 방법을 포스팅 하려고 한다. 문제점 package.json 을 살펴보면 다음과 같은 예시의 스크립트를 볼 수 있는데, 이때문에 react-scripts 명령어가 실행되는걸 볼 수 있다. package.json npm "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 해결 방법 1) 제 프로젝트에 react-scripts 설치하기 - npm npm install -save react-script..

리액트 18에서 ReactDOM.render 함수를 사용하고 npm start를 했는데, 다음과 같은 에러 메시지가 콘솔창이 띄워졌다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot How to Upgrade to React 18 – React Blog As we shared in the release post, React 18 introduces fe..

제로베이스 JavaScript 05)기본문제풀이 - 무한뺄셈.js 알고리즘을 풀다가 이 에러가 나타났다. 처음 보는 에러여서 구글링을 했고 나와 같은 오류를 발생한 stackoverflow 사용자를 찾았다. 아직 내 오류를 해결하지 못했지만, 이 사람의 게시글을 번역하며 이 에러에 대해 이해해보려고 한다. 질문 : The code consists of making an array from a range of numbers and / as well having a third argument / in which it indicates the steps from the numbers, / if it has a step of 2 well for example it goes from [1,3,5] the code..