세팅/오류 Tips
1.[Tips/Github] Github Pages(깃허브 페이지)로 배포하기(gh-pages)
무료 티어 사용자가 퍼블릭 레포지토리에서 무료로 호스팅을 이용할 수 있는 서비스 (Pro 티어 사용자는 private 레포지토리에서도 사용 가능)HTML/CSS/JavaScript로 구성된 파일을 구동하고 배포해 Static 웹 사이트를 호스팅 할 수 있게 해주는 서비
2.[Error/React] Invalid Hook Call Warning (유효하지 않은 Hook 요청)
React Invalid Hook Call Warning 에러 공식 문서잘못된 Hook 요청으로 인한 에러👇🏻 에러발생 추정 위치useDispatch()라는 훅을 dispatch변수에 저장하여 사용하려고 했는데, 잘못된 곳에 훅을 호출하면서 해당 에러가 발생되는 것
3.[Error/React] Module not found: Error: You attempted to import ...
import된 js파일의 경로 에러CRA(create-react-app)에서 컴파일은 src폴더 내부에서만 일어나기 때문에,src폴더 외부의 파일을 import할 때 발생하는 에러임. : public폴더 이용 (주로 img파일 저장) : public폴더는 컴파일
4.[Error/React] export 'Join' (imported as 'Join') was not found in './routes/Join.js' (possible exports: default) (컴파일 에러)
외부파일 컴포넌트 import/export 시 발생하는 에러보통 컴포넌트 import나 export의 문법을 잘못 작성하여 발생함
5.[Error/React] useRoutes() may be used only in the context of a <Router> component. : <BrowserRouter>추가하기
useRouter를 <Router>라는 컴포넌트에 감싸지 않았을 때 발생하는 에러react-router-dom 라이브러리를 사용할 때 index.js파일에 <BrowserRouter> 컴포넌트를 추가하는 걸 까먹으면 발생하는 에러👉🏻 설치방법 참고 : 내
6.[Error/React] img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text : 이미지 태그에 alt 속성 추가하기
React에서 <img />태그 사용 시 alt 속성을 추가하지 않으면 발생하는 에러 (eslint 에러)간단하다.<img />태그에 alt 속성을 추가하자이미지의 내용을 간결하게 표현한 문자열웹 표준 상 alt를 사용해주는 것이 규칙이지만 생략해도 무관함사
7.[Tips/React] React 절대경로 설정하기
React로 작업 시 프로젝트 규모가 점점 커지고 import할 파일이 많아지면 상대경로 지정이 어려워짐결론 : import component from "../../../component/component... 이렇게 쓰기 싫어서임.src폴더 말고 그냥 기본 폴더에 만
8.[Error/Nodejs] NPM (Node.js Package Manager) feat. npm Error: Class extends value undefined is not a constructor or null (정의되지 않은 클래스 확장 값이 생성자 또는 null이 아님)
Nodejs 버전충돌 (기존프로젝트에서 사용하던 버전 vs 새로 설치한 버전)무분별한 버전 업그레이드로 인한 에러타입스크립트를 공부하던 중 Nodejs버전을 최신버전으로 유지하고 싶어 개발환경에 별다른 조치없이 Nodejs 공식 홈페이지에서 LTS버전을 다운로드 했다가
9.[Error/TypeScript] TS2322: Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type 'boolean'. (setState는 'boolean'타입이 아님, React+TypeScript에서 setState props 전달하기)
TypeScript와 React로 개발하면서 setState를 props로 전달하는 도중 잘못된 타입을 정의해서 발생한 에러이다.나는 setState를 자식컴포넌트로 props로 전달하면서 다음과 같은 2가지 실수를 저질렀다.setState의 타입을 function t
10.[Error/TypeScript, Redux] useSelector.js:76 Selector unknown returned the root state when called. This can lead to unnecessary rerenders. (불필요한 렌더링 제거하기. useSelector 범위지정)
TypeScript와 Redux로 개발하면서 useSelector로 state를 가져오던 도중 이와 같은 경고가 발생했다.사실 에러를 해결하기 전에는 대체 어느부분의 useSelector가 문제였는지 종잡을 수가 없어 한참을 헤맸다.아무튼 이러한 경고창을 띄우기 싫다면
11.[Error/TypeScript, Redux] Warning: Cannot update a component (`A`) while rendering a different component (`B`). To locate the bad setState() call inside `B`, follow... (dispatch 사용 시 useEffect 사용하기)
이번 에러도 이 전 포스팅과 같이 TypeScript와 Redux로 개발하던 중 발생한 에러이다. 다시 한 번 느끼지만 TypeScript는 내가 모르고 지나쳤던 나의 실수들을 바로잡고 더 성장하는 데 큰 도움을 주는 것 같다. 우선 에러가 발생하면 에러내용을 잘 살