React - navbar item 클릭 후 Link to로 링크 이동시, 메뉴 토글되게하기 | 참고 링크 : https://stackoverflow.com/questions/32452695/react-bootstrap-how-to-collapse-menu-when-item-is-selected | 시작하기에 앞서, Link to로 nav bar 링크 이동시, 페이지가 리로드되는게 아니라 메뉴바가 토글(collapse)되지 않고 그대로 남아있는 현상이 발생했었다. 이를 해결하기 위해 위의 링크를 참고하여, 코드를 구현하였다. 참고로 navitem을 Link to 로 구현하는 방법은 아래와같은 속성을 navitem에 주면 되었었다.componentClass={Link} href="/board" to="/b..
React - 네이버 맵 api 활용하기 리액트로 웹앱을 개발할때 네이버 맵 api를 활용할 때가 있다. 그때 활용하는 방법을 알아보자.처음에 public/index.html 파일에 아래와 같이 바로 넣어주었다. 그럴때는 아래와 같이, 오류가 난다. cannot read property of 'style' 즉 naver maps 객체가 생성되지 않다고 나오는 것이다. 그이유는, 처음 리액트 메인페이지를 렌더링했을때 react가 마운트 되기전에 네이버 api 코드가 실행되서, mapdiv가 없는데 map을 찾아서 오류가 나고 있었던것이다. 왜냐면 나같은 경우는 첫 메인페이지에서는 네이버 map관련 div를 선언하지 않고, 길찾기 관련 컴포넌트에서만 naver map을 쓰고 있어서 길찾기 관련 컴포넌트에만 ..
React -redux thunk, redux saga >reudx-saga에 들어가기에 앞서, |redux-thunk란? redux-saga를 적용시키기 전에 redux-thunk를 먼저 사용해봤다면, 왜 redux-saga를 써야하는지 더 쉽게 파악할 수 있으므로, 시간이 있다면 간단히라도 학습하길 바란다. 아래에서 간단히 소개하겠다. :가장 간단히 설명하자면, 이 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해준다. 리덕스에서는 기본적으로는 액션 객체를 디스패치한다.function increment() { return { type: INCREMENT_COUNTER }; }예전에는 액션생성함수에서 위와 같은 type을 가지는 객체를 생성해 줬었다면 function incr..
React- Google analytics e-commerce 관련 이벤트 달기 > e-commerce 관련 함수 react에 google analytics e-commerce관련한 docs도 많이 없을뿐더러, 적용에도 많은 애를 먹었어서 기록을 남긴다. function createTransaction(orderData) { const ga = ReactGA.ga(); return ( new Promise(resolve => { // create a timeout to always resolve. this is in case there is a problem // sending the items/transaction const timeout = setTimeout(() => { console.log('G..
React - 리덕스 미들웨어 리덕스를 사용 하면서 비동기 작업 (예: 네트워크 요청) 을 다룰 때는 미들웨어가 있어야 더욱 손쉽게 상태를 관리 할 수 있습니다. > 미들웨어? | 리덕스 미들웨어 -velopert님 블로그 참고 미들웨어는, 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정합니다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하시면 되겠습니다.리듀서가 액션을 처리하기전에, 미들웨어가 할 수있는 작업들은 여러가지가 있는데요. 단순히 전달받은 액션을 콘솔에 기록을 할 수도 있고, 전달받은 액션에 기반하여 액션을 아예 취소시켜버리거나, 다른 종류의 액션들을 추가적으로 디스패치 할 수도 있습니다.미들웨어에서 할 수 있는건 여러가지가 있습니다. 액..
Redux- 리덕스 총정리하기 > What is Redux? :redux는 flux 아키텍쳐를 편하게 사용할 수 있는 라이브러리입니다. ㅣflux 아키텍쳐를 한눈에 보여주는그림 -velopert님 블로그 참조 > Why we use Redux?:일단 react에서 데이터관리를 할때 redux 를 많이 씁니다. Q) 리덕스를 쓰지않고, 리액트 컴포넌트끼리 직접 데이터를 교류하면 되지 않나요? A)컴포넌트끼리 직접 데이터를 교류할 순 있지만, 코드의 규모가 커지면 구조가 정말 복잡해지고, 잘못하다간 스파게티 코드가 만들어 질 수 있습니다. ㅣ스파게티 코드 -velopert님 블로그 참조 Q)리액트는 단방향 parent-child 구조를 사용하는 것으로 아는데, 그 구조를 사용해 데이터를 교류하면 되지 않을까..
React-google analytics 달기 > ReactGA npm 사용하기 https://milooy.wordpress.com/2016/01/14/google-analtyics-2-google-tag-manager/ 참고 import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { ConnectedRouter } from 'react-router-redux'; // import { BrowserRouter } from 'react-router-dom'; import { AppContainer } from 'react-hot-loader'; import creat..
React-Link to로 화면전환시 맨위로 스크롤가게하기 >Link to를 활용해 화면전환을 할때, 아래쪽에서 버튼을 눌러 하면 그대로 아래에 위치해서, ux상에 좋지 않은 경우가 있다. 그럴땐 아래와 같이 해주면 된다. window.scrollTo(0, 0)} history={createBrowserHistory()}> ... 위의 설정으로도 되지 않는다면, componentDidMount를 바꿔주면 된다.아래와 같이 설정해주면된다.:componentDidUpdate() { window.scrollTo(0,0); }