react6 [React] Github Pages (github.io)를 이용해 리액트 프로젝트 배포하기 깃허브에서 제공하는 웹 호스팅 서비스인 Github Pages를 이용해 리액트 프로젝트를 배포하는 방법을 포스팅해보겠습니다. 항상 localhost, 서버 ip로 된 웹서버에만 접속했었는데, 도메인으로 된 웹페이지를 다룰 수 있게 되었네요. 프로젝트를 개인 도메인에 배포해보고 싶다면 포스트를 참고해보시길 바랍니다! 1. React 프로젝트 생성 1-1. 리액트 프로젝트를 생성하기 npx create-react-app deploy-ghpages npx create-react-app {프로젝트 이름} 명령으로 프로젝트를 생성합니다. 1-2. gh-pages 패키지 설치하기 프로젝트가 성공적으로 생성되었다면, 해당 디렉터리로 이동하여 gh-pages 패키지를 설치해줍니다. yarn add gh-pages --.. 2021. 6. 27. [React] EPERM: operation not permitted 에러 리액트 개발 중 모듈을 설치하기 위해 yarn add 명령을 사용하다 발생한 에러이다. 찾아보니 리눅스에서는 발생하지 않으나 윈도우에서 종종 발생하는 에러라고 한다. 에러 요인은 모르겠으나, 해결은 했으니... 리액트가 실행중이라면, 서버를 중지하고 다시 설치를 시도해보기 바란다. 간단하게 해결되었다! 2021. 6. 26. [React] Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 에러 리액트 작업 중 input의 onChange 이벤트를 처리하는 과정에서 매게변수를 전달하려다 에러가 발생하였다. 해당 에러는 onChange, onClick 등에서 발생하는 듯 하다. 와 같이 this.handleToggleLoop()로 작성하게 되면 함수를 반복해서 호출하게 된다. 또는 this.handleToggleLoop()} /> 형태로 사용하면 원하는대로 동작하게 된다. 2021. 5. 12. [React] Uncaught (in promise) TypeError: Cannot read property 'push' of undefined 리액트 작업 중 로그인 후 페이지 대시보드로 넘기는 기능을 개발하는 중에 발생한 에러이다. 간단하게 props.history.push('/') 만으로 페이지가 넘어갈 줄 알았는데, 전혀 기능을 하지 않았다. 이를 해결하기 위해서는 react-router-dom 의 withRouter를 import하고, export 시 withRouter로 감싸주어야 한다. import { withRouter } from 'react-router-dom' ... export default withRouter(SamplePage) 2021. 5. 3. [React] TypeError Cannot read property 'setState' of undefined 에러 리액트 작업 중 this.setState 함수로 상태를 변경하고자 할 때 발생하였다. 발생한 원인은 호출하는 함수를 bind 하지 않았기 때문이었다. 해결 방법은 두 가지이다. 1. Constructor에 함수 바인딩 this.onChange = this.onChange.bind(this) 2. Arrow function으로 구현 onChange = () => {} 2021. 5. 3. port 8080 already in use 에러 스프링, 리액트 등을 재실행할 때 발생한 에러이다. 8080포트가 이미 실행중이라 이를 제거해야 한다. // 윈도우 netstat -ano | findstr 8080 // 리눅스 netstat -ano | grep 8080 명령으로 8080 포트가 실행중임을 확인하고, pid를 확인한다. taskkill /pid pid번호 /f 또는 kill [pid 번호] 명령으로 해당 pid를 삭제한다. 이후 다시 실행하면 정상 작동함을 확인할 수 있다. netstat 명령으로 검색 시 pid 번호가 나타나지 않는다면 lsof 명령을 사용해 확인할 수 있다. lsof -i:8080 만약 lsof not found 에러가 발생할 경우 lsof를 설치해준다 centOS sudo yum install lsof Ubuntu.. 2021. 4. 7. 이전 1 다음
