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..
CSS: 레일스 프로젝트에서 scss 파일적용으로 클래스명명, 반복된 코드줄이기 >css파일을 적용하다보면, 명명규칙이나, 다른 뷰파일에 같은 css가 적용되는등의 문제점들이 많이 발생하게된다. 이를 해결하기 위한것이, scss이고 레일스는 scss를 프로젝트를 만들면 뷰파일에관한 스타일링을 scss로 기본으로 제공하기 때문에 레일스 프로젝트에서 scss파일 적용하기를 활용해보자. 이승규 컴퓨터공학과 15 "쌰럽. 펔유" -home/index.html.erb .var-highlight{ color: #C0AD60; font-family: 'courier new'; } .string-highlight{ color: rgba(253, 149, 90, 0.8); font-family: courier; } ..
CSS: Sass란 ? >Sass란? CSS를 효율적으로 작성할 수 있도록 도와주는 프로그램이다.기존의 CSS의 유지보수의 불편함 등을 SASS를 사용하면 해결 할 수 있다. 위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 즉, SASS문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환합니다. >Sass의 장점 1.코드중복을 줄일수 있다. SASS 사용 전 코드 (코드가 복잡할수록 더 유지보수가 어려워 집니다.) #navbar { width: 80%; height: 23px; }#navbar ul { list-style-typ..
React-Link to로 화면전환시 맨위로 스크롤가게하기 >Link to를 활용해 화면전환을 할때, 아래쪽에서 버튼을 눌러 하면 그대로 아래에 위치해서, ux상에 좋지 않은 경우가 있다. 그럴땐 아래와 같이 해주면 된다. window.scrollTo(0, 0)} history={createBrowserHistory()}> ... 위의 설정으로도 되지 않는다면, componentDidMount를 바꿔주면 된다.아래와 같이 설정해주면된다.:componentDidUpdate() { window.scrollTo(0,0); }
What is react ? 리액트를 사용해 컴포넌트를 다뤄보고, 리덕스를 사용해 상태관리를 해보았는데도, 사실 아직 리액트라는것에 대해서 멀게만 느껴졌다. 그래서 리액트라는것에 대한 기초개념과 리액트란 무엇인가에 대해 정리해 포스팅해보겠다. https://velopert.com/775 velopert님의 글을 대부분 인용하였다. >React?- 리액트라는 것을 들어본 사람이라면 대부분이 말하는 리액트의 설명중 하나는 페이스북에서 개발한 유저 인터페이스 라이브러리라는것이다. 또한 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링한다는점도 마찬가지이다. 이를 통해, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해주는것 역시도 리액트의 특징중 하나..
Redux Flux액션생성자:변경사항과 상호작용이 거쳐가야 하는 액션의 생성을 담당하고 있다. 뷰를 업데이트 하려면 액션을 생성해야만 한다. 디스패쳐:액션을 보낼 필요가 있는 모든 스토어를 가지고 있고, 액션 생성자로부터 액션이 넘어오면 여러 스토어에 액션을 보낸다.동기적으로 실행된다. 스토어:모든 상태 변경은 반드시 스토어에 의해서 결정되어야 한다. 만약 스토어가 디스패쳐에 등록되어 있다면 모든 액션을 받게 될 것이다. 스토어에 상태 변경을 완료하고 나면,컨트롤러 뷰에 상태가 변경했다는 것을 알려주게 된다. 뷰:발표자와 같다. 컨트롤러 뷰는 스토어와 뷰 사이의 중간관리자 같은 역할을 한다. 상태가 변경되었을때 스토어가 그 사실을 컨트롤러 뷰에게 알려주면, 컨트롤러 뷰는 자신의 아래에 있는 모든 뷰에게 ..
REACT Life Cycle 리액트 처음 시작할때 어려운 부분일 수 있는 life cycle에 대해서 정리해보겠씀다 컴포넌트가 DOM 위에 생성되기 전 후 상태를 업데이트하기 전 후 컴포넌트가 사라지기 전 에 실행되는 메소드 컴포넌트 주기 1. componentWillMount 렌더링 되기 전2. componentDidMount렌더링 된 후 -렌더링이란? 참고 : http://meetup.toast.com/posts/110 컴포넌트의 Props나 State의 변경이 있을 때 React는 컴포넌트의 이전 상태 엘리먼트와 새로 만들어진 엘리먼트를 비교하고 실제 DOM의 업데이트 여부를 결정한다. 엘리먼트를 비교하여 찾은 변경 점에 대해서만 갱신하는 것이다.그리고 엘리먼트는 기본적으로 Immutable이기 ..