오픈소스 썸네일형 리스트형 [Node] React 정리(28) - D3와 접목 (1) 요즘은 다양한 차트 라이브러리들이 정말 많은 기능들을 제공해줘서 편리하게 사용할 수 있었습니다. 리액트와 D3를 이용하여 그래프를 생성할 때는 특별한 차이가 있습니다. D3는 DOM을 직접 제어하고 React는 Virtual DOM으로 제어하기 때문에 리액트를 이용하여 D3를 사용하게 될 경우 사람마다 사용방법이 많이 갈린다고 합니다. 여기서 가장 일반적으로 사용되는 방법은 DOM은 React에게, 계산은 D3에게하게 두는 것입니다. SVG path 계산, scale, layouts, transformations 등의 선/도형등의 모양을 계산하는 것만 D3가 하게하고 나머지는 React에게 맡기게 되면 다음과 같은 장점을 얻게됩니다. 장점 가장 React-지향적 이미 있는 다른 React 코드와도 가장 .. 더보기 [Node] React 정리(27) - 슬라이더 라이브러리 - react-slick 리액트로 슬라이더를 구현해야하는 프로젝트를 공부하고 있었습니다. 검색을 하면서 react-slick을 알아보았고 캐러설도 알아보도록 하였습니다. 먼저 캐러셀이란 회전 목마라는 뜻을 가지고 있으며 슬라이드 형태로 순환하며 이미지나 영상등을 보여주는 것을 의미하는 것으로써 사용법이 아주 간단하고 편리하여 사용해보았습니다. 코드 및 설명은 아래를 참고해주세요 # Contents react-slick 적용 # react-slick 적용 먼저 라이브러리를 설치하고, 사용법을 알아보도록 하겠습니다. 라이브러리를 아래 명령어를 통해 설치합니다. npm install react-slick slick-carousel --save 먼저 예제를 보도록 하겠습니다. 예제코드는 아래 페이지를 통해 확인하실 수 있습니다. htt.. 더보기 [Node] React 정리(26) - Redirect 페이지 이동을 위한 함수는 Redirect를 사용하는 것입니다. 사용법은 아래와 같습니다. # Contents Redirect # 라우터 적용 라이브러리를 아래 명령어를 통해 설치합니다. npm install --save react-router-dom 아래 코드는 아래와 같습니다. return ; 더보기 [Node] React 정리(25) - redux-persist react-redux를 사용하여 상태 관리를 하여 진행하는 프로젝트 도중 새로고침으로 인한 상태 값의 증발이 발생하게 되었습니다. 이것에 대한 대응 방안으로 redux-persist에서는 localStorage 또는 session에 저장하고자 하는 reducer state를 저장하여, 새로고침 하여도 저장공간에 있는 데이터를 redux에 불러오는 형식으로 이루어집니다. 예시는 아래와 같습니다. # Contents redux-persist # 라우터 적용 라이브러리를 아래 명령어를 통해 설치합니다. npm install --save redux-persist 그 다음엔, reducer가 정의된 코드를 다음과 같이 수정하였습니다. localStorage에 저장하고 싶으면 import storage from '.. 더보기 [Node] React 정리(24) - 리액트 라우터 Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. HTML 파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했죠. 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있었고, 이를 해소하기 위하여 캐싱과 압축을 하여 서비스가 제공되는데요. 이는 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서는 충분하지 않을 수도 있습니다. 렌더링하는것을 서버쪽에서 담당한다.. 더보기 [Node] React 정리(23) - 리덕스 미들웨어 [redux-thunk, redux-sega] 리덕스 미들웨어는 리덕스가 지니고 있는 핵심 기능입니다. Context API 또는 MobX를 사용하는것과 차별화가 되는 부분이죠. 리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할 수 있습니다. 여기서 언급한 추가적인 작업들은 다음과 같은 것들이 있습니다. 특정 조건에 따라 액션이 무시되게 만들 수 있습니다. 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다. 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다. 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있습니다. 보통 리덕스에서 미들웨어를 사용하.. 더보기 [Node] React 정리(23) - 리덕스 모듈화 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보도록 하겠습니다. 리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 의미합니다. 우리는 리듀서와 액션 관련 코드들을 하나의 파일에 몰아서 작성해보도록 하겠습니다. 이를 Ducks 패턴이라고 부릅니다. 리덕스 관련 코드를 분리하는 방식은 정해져있는 방식이 없으므로 나중에는 여러분이 자유롭게 분리하셔도 상관없습니다. 완성된 코드는 아래 주소를 확인해주시기 바랍니다. ht.. 더보기 [Node] React 정리(22) - 리덕스 기초 및 사용 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 리덕스에서 리액트를 본격적으로 사용해보기 전에, 리액트 컴포넌트 없이, 리덕스에서 제공되는 기능들을 먼저 연습해보겠습니다. 아래 주소를 통해 예제 코드를 다운받으실 수 있습니다. https://github.com/libtv/React_Note/tree/master/22.%20learn-redux GitHub - libtv/React_Note: This is a notebook organized by React. This is a notebook.. 더보기 이전 1 2 3 4 ··· 10 다음
