뇌 채우기 공간

우리의 프로젝트에 구글애널리틱스를 심어보자! 알고보니 어려운 것이 아닌데 자료가 많이 없어서 좀 헤맸던 부분이다. 이렇게만 하면 된다. 1. 구글애널리틱스에 가서 속성만들기 구글애널리틱스가 업그레이드가 되었다고 하는데 우리가 쓸 라이브러리는 이전버전이므로 유니버셜 애널리틱스 속성을 만들어준다. 2. 코드심기 왼쪽 하단 설정-> 추적정보-> 추적코드에 들어가면 id와 코드가 이렇게 나온다. 이 코드를 index.html의 head태그 안에 넣는다. 3. react-ga 설치 https://www.npmjs.com/package/react-ga react-ga React Google Analytics Module www.npmjs.com 4. App.js에서 추적하기 useEffect(()=>{ ReactG..

input박스에서 검색어를 치면 자동완성 기능을 만드려고 한다. 우리가 검색을 하려고 하는 기능은 1. 책검색 2. 사용자가 올린 태그 기반으로 컬렉션 검색 태그로 컬렉션을 검색하는 것은 태그가 별로 없기 때문에 글자를 칠때마다 요청을 보내는 것보다는 한번에 받아와서 프론트에서 처리하는게 낫다고 생각했다. 그래서 먼저 태그를 배열로 한번에 받은 다음에 Hint라는 라이브러리를 사용해서 구현했다. 이것은 다음 게시물에 담겠다. 그런데 책 검색 같은경우에는 책이 워낙 방대하다보니 한번에 받아오는 것은 불가능했다. 그래서 2글자 이상 쳤을때 디바운스를 이용하여 일정 시간동안 이벤트가 없으면 서버에 검색요청이 가도록 했다. 그리고 서버에서 받아온 값을 리덕스에 저장하고 리덕스에 있는 값을 밑에 띄웠다. 여기서 ..

문제발생 우리의 서비스에는 피드가 있다. 이 피드를 계속 구경하다가 다른 페이지를 갔다가 다시 오면 내가 보던 그 화면으로 갔으면 좋겠다. 처리 먼저 리액트 컴포넌트에다가 scroll이벤트를 주어야한다. 우리는 window자체가 스크롤이 되는 형태가 아니기에 div자체에 scroll이벤트를 주어야한다. 그러면 onscroll을 쓰면된다. 나는 최상위 컴포넌트 (styled componen)를 ref contain을 주었고 onscroll로 scroll이라는 함수를 넣어주었다. //scroll 이벤트 관련 const [scrollLocation, setScrollLocation] = useState(0); const lastScroll = useSelector(state=> state.review.curr..

react router에 tansition을 주고 싶어! 그래서 찾아봤던 것이 react-transition-group이다. React-Router는 현재 경로가 바뀌면 즉이 DOM에서 제거하기 때문에 화면을 겹쳐서 애니메이션을 주려면 history가 바뀌기 전에 애니메이션을 실행시켜야한다. 공식적으로는 react-transition-group 사용을 권장한다. 리액트 공식 라이브러리이다. 공식문서가기 모든 페이지에 트랜지션 주기 일단 모든 페이지에 트랜지션을 주는 것은 쉽다. TransitionGroup태그와 CSSTransition 태그를 Switch위에 감싸주면 된다. 라우터는 각각의 key를 갖게 되는데 그것을 pathname으로 준다. key를 가진 라우터에게 classNames가 pageSli..

상태 업데이트를 useState로 컴포넌트 내부에서 하는 방법도 있고 . useReducer를 사용해서 컴포넌트 바깥에서 사용할 수 있다 reducer : 상태를 업데이트 하는 함수 dispatch: 액션을 발생시킨다. 사용법 import React, { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } reducer함수를 만들어주고 action의 type을 받아와서 case(액션) 마다 다음값이 무엇이 될지 return으로 설정해..