믹아의 개발일기

사용법은 간단하고 다른곳 문서, 설명도 많으니 여기선 생략 합니다.

---

next-nprogress-bar 로 로딩 이미지를 보여주고 있었는데 어느 순간 안되기 시작.

progressbar dom 은 추가되는데 스타일이 안먹는 것 보고 확인해봄

next-nprogress-bar 에서는 #nprogress 즉 id 를 이용해서 스타일을 먹이고 있음.

next-nprogress-bar 에서 사용중인 라이브러리 nprogress-v2 코드를 보러가자

엥 여기는 클래스 이름으로 nprogress 를 먹이고 있음. 근데 예전엔 잘 됐었는데? 싶어서 이전 버전을 보러감

1.0.4 버전이 다운로드수가 제일 많아서 그냥 바로 1.0.4 보러감

원래는 id 로 nprogress 를 주고 있었음...

버전 업데이트 하면서 id -> classname 으로 변경하면서 기존 라이브러리가 작동 안함

해결방법은 next-nprogress-bar 개발자가 해결해주거나 수정해서 MR 날리거나.. 그런데 이게 언제 고쳐질지 모른다

현재 사용중인 프로젝트에서 해결해보자

package.json

resolutions 필드에 "next-nprogress-bar/nprogress-v2" : "1.0.4" 를 추가해준다.

해당 라이브러리의 디펜던시의 버전을 오버라이드 할 수 있다.

다시 설치해봄

bun i

ㅋㅋ; bun 은 아직 중첩 resolutions 을 지원 안한다고 한다;

yarn install

yarn 으로 설치함

음 잘 뜬다

nextjs에서 useEffect가 아무리봐도 2번 실행시킬 코드가 아닌데 자꾸 2번 실행돼서 찾아봤다.

next.config.js 에서  reactStrictMode 를 false 로 변경하고 앱을 재실행하자.

[ Found a change in next.config.js. Restart the server to see the changes in effect. ]

const nextConfig = {
  reactStrictMode: false,
}

됐다

https://stackoverflow.com/questions/71835580/useeffect-being-called-twice-in-nextjs-typescript-app

Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

인풋창을 입력하는 순간 이런 에러가 뜨더라.. input value 로 undefined 가 들어가서 그런듯하다

const [ip, setip] = useState();
<input onChange={setip} value={ip} />

대략 내 상황..

const [ip, setip] = useState(''); // 해결방안 1 : 초기값을 '' 로 
<input onChange={setip} value={ip || ''} />  <!-- 해결방안 2 : 값이 undefined 일경우 value 를 ''로 --!>

이렇게 해결

이미 리액트 프로젝트, 리포지토리가 있다는 가정하에 진행한다.

gh-pages 를 설치한다

npm install gh-pages --save-dev

package.json 파일에

"homepage" 를 추가한다

http://[사용자 ID].github.io/[리포지토리 이름]  

//package.json 

//....
  "homepage": "https://mika0203.github.io/Pathfinding-Algorithm-js/"

package.json 파일에 script 부분에 predeploy, deploy 를 추가한다

// package.json

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

저장하고,

npm run deploy

이제 github로 가보자

제일 아래로

누른 후 세이브하고 위에서 homepage 에 입력한 주소로 들어가면 

해당 주소에서 실행되는 나의 리액트 프로젝트를 확인할 수 있다.