티스토리

개발새발 민다니
검색하기

블로그 홈

개발새발 민다니

404minda.tistory.com/m

밍동망동 님의 블로그입니다.

구독자
1
방명록 방문하기
공지 Profile 모두보기

주요 글 목록

  • useEffect 안 먹어요! index는 바뀌는데 왜 useEffect는 꿈쩍도 안 해요?🤯 회고 성격이 가득한 글로즉각적인 문제 해결을 원하시는 분은해결 방법으로 넘어가주세요. 우당탕탕 에러 고치기🔨  이번에 신규 프로젝트로 퀴즈 앱 비슷한 걸 만들고 있다. 리액트로 클론 코딩을 여러 번 해보긴 했지만,완전히 내 힘으로 진행하는 창작 프로젝트는 처음이라헤매는 부분도 많고 생각보다 손도 많이 간다. 기능은 주간 스프린트로 하나씩 구현하고 있는데,지난 주는 정말... 미치도록 안 되던 문제가 하나 있었다. useEffect가 안 먹힌다! index는 바뀌는데 왜 반응이 없는거야🤯 문제 번호엔 quizIndex가 바뀔 때마다카드를 자동으로 다시 앞면으로 돌리는 기능을 구현하고 있었다. 그래서 아래처럼 useEffect를 사용했다.useEffect(() => { setFlipped(false);.. 공감수 1 댓글수 0 2025. 4. 7.
  • [React] useLocation을 사용했는데 state가 자꾸 null로 반환됐다. import { useLocation } from 'react-router-dom';function Detail() { const location = useLocation(); console.log(location); // 전달된 상태 출력 return hello;}export default Detail; 자꾸 null로 반환되어 미칠 뻔하면서 헤딩했는데 useNavigate v6.23.1 | React Router reactrouter.com공식 문서까지 가게 됐다. 요즘 공식 문서 등한시하던 젊은 코더,여기서 패배하다.  그 결과 Link to 부분을 수정하여 해결했다.   Thanks To [문제] useNavigate()의 state값이 null인 경우[문제] useNavigate()의 st.. 공감수 0 댓글수 0 2024. 5. 25.
  • [React] Warning: Each child in a list should have a unique "key" prop. 해결 방법 아 이미지 삽입만 남겨두고 포스팅 전부 날아가서 너무 화가난다. 이 에러는 재사용된 컴포넌트를 식별할 수 없기 때문에 나타난다. 본래의 데이터에 id를 추가하고,컴포넌트에 key props를 연결해주어야 한다. 원래 데이터const food = [ { name: 'Kimchi', image: 'https://cdn.pixabay.com/photo/2022/06/13/05/14/kimchi-7259268_1280.jpg', }, // ...생략]; 수정한 데이터const food = [ { id: 1, name: 'Kimchi', image: 'https://cdn.pixabay.com/photo/2022/06/13/05/14/kimchi-7259268_1.. 공감수 0 댓글수 0 2024. 5. 24.
  • 깃허브 기본 브랜치 변경 방법 (feat. master와 main의 차이) 요새 도서관에 있는 자바스크립트 관련 책을 보고 있는데 2020년 이전 책에는git push -u origin master 이런 식으로 써있는데,내가 전과(2023년)했을 당시에는git push -u origin main 이런 식으로만 학습했어서 두 개의 차이가 궁금했다.   1. master와 main 브랜치의 차이결론적으로, 전통적으로 Git의 기본 브랜치는 master였다.그래서 비교적 옛날 책들에는 master로 표기된 경우가 많지만master라는 단어 어감 자체에서 오는 인종적 이슈 때문에 main으로 변경되고 있다. 정확히, GitHub가 2020년부터 새로운 리포지토리의 기본 브랜치 이름을main으로 설정하기 시작하면서 널리 퍼지고 있는 것이다. 부끄럽지만, 아직 깃과 깃허브에 대한 전문적인.. 공감수 1 댓글수 0 2024. 5. 23.
  • install npx 시도할 때 code EEXIST 에러 npm install npx -g 터미널에서 해당 명령어를 기입하면 에러가 난다. Node.js 8.2.0 버전 이후로별도의 설치 필요 없이 npm이 설치되면 npx도 같이 설치되기 때문이다. 따로 install 해줄 필요가 없다. 공감수 0 댓글수 0 2024. 5. 22.
  • [React] ERROR in Plugin "react" was conflicted between and "BaseConfig" [React] ERROR in Plugin 'react' was conflicted between 에러 아니 취업하고 싶은데 리액트 깔면서 에러가 계속 생긴다. 진로탐색학점제 때문에 진도를 나가려고 이것저것 챙겨갔는데 저번주엔 그냥 오류만 해결하다 한 주를 보냈다. 이번에 나온 에러는, 404minda.tistory.com 최근에 리액트 개발환경 구현을 다시 하면서 또 다시 이 문구를 맞닥뜨렸다. 다른 점이 있다면 이번 에러는 조금 더 길었다는 것 처음에는 앞 주절이 같아서 위의 링크와 같은 방식을 취했다. eslint-config-react-app을 재설치했는데 해결이 되지 않았다. 다시 에러 문장을 자세히 봤는데 다음 키워드가 보였다. and 대충 앞 뒤로 비슷한 경로가 있고 두 파일 사이에서 충돌이.. 공감수 0 댓글수 0 2023. 5. 19.
  • [React] Would you like to run the app on another port instead? 에러 하....ㅋ 개발자들이 왜 개발환경 설정에 한주씩이나 소요하는지 알겠다 ㅋㅋㅋㅋㅋ 내가 뭔가를 같이 실행하고 있는거같은데 도저히 그걸 해결할 방법이 없었다. 다행히 이건 react 만의 에러는 아닌지라 해결방법을 금세 알아낼 수 있었다. 터미널에서 ctrl+c를 통해 빠져나오기도 하고 다른 프로그램을 꺼보기도 했지만 포트 에러가 뜨길래...ㅎ 그냥 포트를 죽여버렸다. lsof -i :3000 터미널에 치면 현재 사용 중인 포트 번호가 뜬다. PID 줄에 있는게 포트번호다. 대충 지금 사용하고 있는 개발툴과 관련있어보이는 것부터 죽이면 된다. 나는 실행파일 다 끄고 vscode 실행창에 쳐서 애초에 PID 번호 하나만 나왔다. kill -9 2430 2430 부분이 내 PID다. 문제해결 공감수 0 댓글수 0 2023. 3. 19.
  • [React] ERROR in Plugin 'react' was conflicted between 에러 아니 취업하고 싶은데 리액트 깔면서 에러가 계속 생긴다. 진로탐색학점제 때문에 진도를 나가려고 이것저것 챙겨갔는데 저번주엔 그냥 오류만 해결하다 한 주를 보냈다. 이번에 나온 에러는, 리액트 플러그인이 package.json과 리액트 사이에서 충돌이 일어난다고... 전에도 그러더니 package.json이 말썽이다. 이 에러는 여러가지 문제에 의해 발생하는거같다. 가장 보편적으로, 누구에게나 적용되는 해결책은 파일을 저장하고 확인할 때마다 package.json도 같이 저장해주는 것이다. 원인이 여러가지인데, package.json을 저장하는 방법은 모두에게나 해결책이 될 수 있을거같으니 정 원인을 못 찾겠으면 임시방편으로 사용해도 될듯. 구글링해보면 디렉토리 이름을 제대로 기입해야한다고 확인해보랬는데,.. 공감수 0 댓글수 0 2023. 3. 19.
  • [React] Usage Error: The nearest package directory 에러 트러블슈팅 시스템 안의 문제를 분석하여 해결하는 것 react 학습을 위해 개발환경 설정을 하고 있었다. yarn을 통해 install 하고있다. 참고로 필자는 react를 처음 사용해보기 때문에 그냥 싹 다 지우고 다시 깔아도 문제가 발생하지 않는 상황이었다. 본래 create react를 설치하고 yarn install을 하면 Compiled successfully! webpack compiled successfully 이런 문구가 나오는게 정상인데, 나 같은 경우는 다음과 같은 오류 메세지가 떴다. Usage Error: The nearest package directory (/Users/ak47/toy/react/test) doesn't seem to be part of the project de.. 공감수 0 댓글수 0 2023. 3. 19.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.