Web dev
-
GitHub / React gh-pages 배포 빌드 후 빈화면 / BrowserRouter 라우팅 문제해결Web dev/Git&Github 2022. 4. 11. 16:48
리엑트로 만든 프로젝트를 gh-pages 를 통해 배포했다. 근데 흰화면으로 아무것도 보이지 않는다..이게뭐징.. CRA로 새로만들어 테스트 할땐 잘되었는데 뭐지.. 알고보니 react-router-dom 의 BrowserRouter가 문제였다. 라우팅설정은 꼭 하기 때문에 처음이라면 이경험은 한번씩 다 하는것 같다. 해결방법은 베이스 URL을 설정해주면 된다. 하지만 해결하고 나니 나는BrowserRouter 대신 ConnectRouter를 사용하고 있었다..ㅋㅋ 두개는 패키지가 다르다..일단 react-router-dom 의 BrowserRouter 해결방법이다. BrowserRouter 해결방법은 두가지다. 나는 1번만 해보고 2번은 해보지 않았다. 1. BrowserRouter에 basename을..
-
Error / React-Dom.render 에러 / react-dom.development.js:86 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:Web dev/Error 2022. 4. 11. 16:32
깃헙페이지 때문에 테스트겸 새로 CRA로 리엑트 프로젝트를 만들었는데 이러한 에러메시지가 떴다. 이유는 리엑트 18부터는 조금 다르게 쓴다. 'react-dom.development.js:86 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:' 1. /src/index.js를 수정해주면된다. 2.import { createRoot } from 'react-dom/client'; 를 불러와 root에 담아 준다. 3.React.DOM이 아..
-
GitHub / React 배포 / gh-pages 사용하기Web dev/Git&Github 2022. 4. 11. 13:44
기존에 리엑트로 작업중인것을 깃헙페이지에 배포를 했는데 자꾸 흰화면만 뜨는것이다. 그래서 CRA를 새로 만들어 배포 했다. 기존 프로젝트에서 흰 화면만 뜨는것은 라우팅 설정 때문이였다. 라우팅 해결방법은 다음 포스팅에 적어볼 예정이다. gh-pages 사용하여 react github에 배포하기 1. 깃헙 레포지터리 만들기 2. 프로젝트 업로드 vscode 프로젝트열고 터미널에 실행 git init 깃설치 git add * 스테이트 올리기 git commit -m 'first commit' 커밋메시지 git remote add origin https://github.com/drrd100/test.git 저장소연결 git push -u origin master 마스터로 푸쉬 업로드 확인 3. 프로젝트에 gh..
-
Github / github 배포하기 / 레포지터리 생성Web dev/Git&Github 2022. 4. 11. 12:58
포트폴리오 올리려고 무료호스팅 사이트를 찾다가 깃헙페이지로 배포하기로 결정했다. 예전에 닷홈에서 무료호스팅을 썼지만 기간이 지나면 돈을 내야한다 ㅠ3ㅠ 어차피 깃헙 관리도 해야하니 1석2조라고 생각했다. 이번 포스팅에서는 기본 배포방법을 알아보고 다음번에는 리엑트프로젝트 배포를 해볼것이다. 1. 깃헙아이디를 만들어준다 > 레포지터리 이동 후 new를 눌러 생성해준다. 2. 레포지터리를 생성해준다. 퍼블릭으로 해야한다. > readme,gitignore 등등은 나중에 만들어도 된다. 3. 파일 업로드 > 그냥 따라하면된다. readme파일 체크안했더니 리드미 만들라고도 생겼다. 나는 vscode를 쓴다. 올릴 파일을 열고 터미널을 열어 그대로 따라해준다. 업로드가 된것을 확인 해준다. 이전에 올린 레포지터..
-
Error / React getElementByClassName() / Uncaught TypeError: Cannot read properties of undefined (reading 'add') 해결Web dev/Error 2022. 3. 30. 18:48
리엑트로 퍼블리싱중 .. Aside를 구현하는 중 버튼을 누르면 클래스를 주려했다. 처음엔 이렇게 구현을 했다. const handleAide = (e) =>{ const asideWrap = document.getElementsByClassName(aside.aside_wrap); const deemed = document.getElementsByClassName(aside.deemed); console.log(asideWrap) document.body.classList.add(aside.stop) asideWrap.classList.add(aside.aside_actve) deemed.classList.add(aside.on) } 'Uncaught TypeError: Cannot read prope..
-
React / 아코디언 메뉴 만들기Web dev/React 2022. 3. 30. 18:22
리엑트로 퍼블리싱중 사이드바를 구현하면서 아코디언을 구현해봤다. 제이쿼리를 쓰면 편하겠지만 제이쿼리를 안쓰려고 노력중이다. 처음엔 tab을 만들어본적이 있어서 useState를 사용해 구현해보려햇는데 젠장 다같이 동작해서 망했다 그렇다고 각메뉴에 useState를 사용하면 오히려 더 지저분해질것 같아서 그냥 구현해보았다. w3school를 참조했다. 1. for문을 돌려 각 리스트에 번호를 메긴뒤 그것이 클릭되면 이벤트를 주었다. 제이쿼리에 길들여져 그냥 구현하라 했으면 못했을것같다. 코린이는 웁니다... 여기서 문제는 예제는 this로 셀렉을 하던데 나는 이상하게 못가져오는것이다.. 자바스크립트 this는 어려워.. e.target으로 하니까 잘가져온다. useEffect로 로드 되었을때 한번 동작시켜..
-
React / window.location 이용해 특정페이지 header에 클래스 부여하기Web dev/React 2022. 3. 30. 17:49
리엑트로 퍼블리싱중에 header를 투명하게 디자인했다. 근데 만들다 보니 서브페이지에서는 바탕이 흰색이라 보이지가 않았다... 평소같았으면 서브헤더를 하나 더 만들었을텐데 리엑트는 SPA로 라우팅설정이 되어 있어 헤더를 두개 만들면 안될것 같아서 URL에 따라 클래스를 부여해줬다. 1. window.loaction 으로 URL을 가져와 조건문으로 클래스를 부여해줬다. 하지만 상품 디테일페이지라 파라미터를 받아 데이터를 뿌려주기 때문에 고민하다가 정규표현식으로 파라미터 숫자를 없애버렸다 ㅋㅋ 클래스네임을 가져올때는 module.css라서 저렇게 넣어줘야 css를 불러온다. 클래스네임을 가져올때 배열로 가져오기 때문에 지정해주거나 .item()으로 한번더 셀렉을 해줘야 된다 useEffect(() =>{ ..
-
Error / Error: listen EADDRINUSE: address already in use :::5000 노드종료하기Web dev/Error 2022. 3. 27. 12:41
dotenv 적용중에 환경변수를 수정하고 서버를 재시작해도 적용이 안되어 한참 버벅였다. 터미널에서 control + c 로 서버종료를 하는데 리엑트서버는 종료되고 노드서버는 종료가 안되었던것이다! 생각해보니 npm start를 하면 자꾸 이런 에러메시지가 콘솔에 찍혔었다. 이유는 노드서버는 종료가 안되었던 것.. 이미 5000포트는 사용중이라고 에러가 뜬다. [0] events.js:292 [0] throw er; // Unhandled 'error' event [0] ^ [0] [0] Error: listen EADDRINUSE: address already in use :::5000 1. 터미널에 명령어를 입력하면 현재 네트워크 상태가 뜬다. netstat -an 명령어를 입력하면 이거저것 많이나온..