Web dev
-
React / scroll stop 하면 나오는 배너 만들기Web dev/React 2022. 4. 16. 15:02
리엑트로 포트폴리오를 만들오 있다. socar 프로모션페이지를 기획하여 만드는중이다. 쏘카 홈페이지도 그렇듯 앱 다운로드로 유도를 한다. 나도 앱다운로드를 유도하는 배너를 만들어 보았다. 움직이면사라지고 멈추면 생기는 배너이다. 클래스를 하나 만들어 스크롤이 멈추면 클래스를 부여하고 움직이면 클래스를 삭제해주었다. 이벤트를 줄때 에러가 자꾸 발생해서 useEffect로 감싸주었더니 에러없이 잘동작했다. import React, { useRef } from 'react' import { useEffect } from 'react'; import { Link } from 'react-router-dom' export default function GoStore() { const goStore = useRef..
-
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..