전체 글
-
React / heroku 에 json-server 배포하기 React deployWeb dev/React 2022. 4. 16. 14:19
저번에 AWS EC2에서 react 와 express 로만든 프로젝트를 배포해보았다. 그리고 이번에는 json-server로 api를 만들어 프로젝트를 베포해봤다. 물론 React는 CRA로 만들었다. webpack이니 뭐니 아직 초보라 잘모르겠다..공부할것이 많다. 1. json-server 셋팅 프로젝트 최상위 루트에 서버폴더를 만든 후 api와 index.js를 만들어 서버를 만들것이다. 리엑트 빌드까지 할 것이다. 2.헤로쿠 프로젝트올리기 회원가입 후 프로젝트를 git으로 push할 것이다. 물론 처음해본거지만 깃헙과 비슷한것 같다. 깃헙과 연동도 되어 깃헙에 푸쉬하면 자동으로 업데이트된다 ㅋㅋ 1. json-server 셋팅 json-server 설치 npm i json-server server..
-
React / json-server 로 쉽고 빠르게 API , server 만들기Web dev/React 2022. 4. 16. 13:28
프론트엔드 개발연습을 할 때에 백엔드까지 개발하는것은 번거롭다.. json-server를 사용하면 3분만에 임시서버를 만들 수 있다. 프로젝트 최상위 루트에 api를 만들어준다. data.json { "carList": [ { "id": 1, "name": "올 뉴 투싼", "price": "78000", "manufacture": "17년식", "imageURL": "/images/car-tucson.png", "discount":"20%" }, { "id": 2, "name": "코나", "price": "65000", "manufacture": "19년식", "imageURL": "/images/car-kona.png", "discount":"20%" }, { "id": 3, "name": "셀토스..
-
JavaScript / fetch() 로 html include 하기Web dev/JavaScript 2022. 4. 16. 00:35
이전에 php로 include 하여 html을 불러와 사용해보았다. (무료) 이번에는 깃헙페이지에 배포를 하려하는데 php는 지원을 하지 않는다고 한다. 그래서 헤더와 풋터를 자바스크립트 fetch()로 불러왔다. html을 불러올 스크립트를 따로 빼주었다. //inc.js fetch("./inc/header.html") .then(response => { return response.text() }) .then(data => { document.querySelector("#header").innerHTML = data; }); fetch("./inc/aside.html") .then(response => { return response.text() }) .then(data => { document.qu..
-
JavaScript / 브라우저 화면 넓이, 높이 값 구하기Web dev/JavaScript 2022. 4. 15. 21:53
자주 사용하는거라 메모 ㅎㅎ.. window.screenTop : 상단으로부터 브라우저 위치 window.screenLeft : 왼쪽으로부터 브라우저 위치 window.innerWidth : 브라우저 화면의 너비(viewport) window.innerHeight : 브라우저 화면의 높이(viewport) window.outerWidth : 브라우저 전체의 너비(메뉴, 툴바, 스크롤바 포함) window.outerHeight : 브라우저 전체의 높이(메뉴, 툴바, 스크롤바 포함)
-
Error / React / Uncaught TypeError: Cannot read properties of null (reading 'map') 문제해결 / aixos 데이터 렌더링Web dev/Error 2022. 4. 14. 23:59
리엑트로 퍼블리싱중이다. json-server로 api를 만들어서 불러와 슬라이드를 만들고 있었다. 데이터를 잘 받아와서 map()함수로 데이터를 뿌려주려고 했는데 에러가 났다.. Uncaught TypeError: Cannot read properties of null (reading 'map') 검색을 해보니 이러한 에러가 발생한 이유는 React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서map()을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다. 문제해결은 &&을 넣어준다. {car && car.map((car) => ( {car.name} ))} 조건이 ..
-
GitHub / React gh-pages gitgub 배포 빌드 후 빈화면 / ConnectRouter baseURL history 설정방법Web dev/Git&Github 2022. 4. 11. 17:02
포트폴리오를 위해 gh-pages를 이용해 github에 배포했다. 배포하고 난 후에 흰화면에 아무것도 render 되지 않았다. 이유는 라우터설정때문이다. 이전 글에서는 BrowserRouter Basename을 설정해 문제를 해결했다. 하지만 나는 ConnectRouter를 사용했는데 basename을 지원하지않아 다르게 baseURL을 설정해야했다. 1. connected-react-router 설치 npm i connected-react-router 2. npm i history 설치 npm i history 3. createBrowserHistory 생성 import { createBrowserHistory } from 'history'; const history = createBrowserHi..
-
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이 아..