react (8) 썸네일형 리스트형 npm install, dependencies로 해야할까? devDependencies로 해야할까? (dependencies vs devDependencies) package.json파일을 보면 dependencies와 devDependencies가 분리되어 있는 것을 볼 수 있다. create react app 으로 프로젝트를 개발할 때는 하나하나 구분해서 넣을 필요가 없었지만 모듈 번들러 부터 만지려니 어떤 패캐지를 어디에 포함시켜야할지 헷갈렸다. react를 devDependencies에만 넣어도 되나? typescript는? babel은...? 이런 고민들을 해결한 과정을 정리했다. dependencies dependencies 내부에 들어가 있는 패캐지들은 실제 production으로 배포할 때도 사용할 수 있다. 즉 배포할 때도 다 담아서 나가야 하는 패캐지들을 이쪽에 포함시켜야 한다. 어플의 로직구현, 화면 동작과 관련있는 라이브러리들이 저장된다. .. 모듈 번들러란? Webpack의 역할은? 모듈 번들러를 이해하기 위해서는 javascript의 빌드 과정을 먼저 이해해야 한다. JS 빌드 과정 transpiling : jsx, es6, tsx 등의 고급 분법을 구형 브라우저들이 이해하지 못해 호환성 문제 존재함. 이 문제를 해결하기 위한 기법으로, 구형 버전의 js 코드로 변환해줌 bundling: 트랜스파일된 수많은 js파일과 모듈을 하나의 파일로 묶는 번들링 기법 등장 minifying(압축) : 파일 용량이 커짐에 따라 브라우저 상으로 로드하는 시간이 늘어나는 문제를 해결하기 위한 기법 모듈 번들러 module : 분리된 코드 조각 bundling : 묶는다 즉, 분리된 코드 조각을 묶는 다는 의미이다. 의존성이 있는 모듈 코드를 하나(또는 여러개)의 파일로 만들고, 브라우저 환경에서 .. react 그래프 라이브러리, antv g6.Graph 커스텀하기 G6 图可视化引擎 A collection of charts made with the Grammar of Graphics g6.antv.vision antv Graph란? antv는 ant design에서 제공하는 차트 라이브러리이다. 그 중 G6는 그래프 관련 라이브러리를 제공한다. Gallery A collection of charts made with the Grammar of Graphics g6.antv.vision 위 링크로 들어가면 다양한 종류의 그래프가 제공됨을 알 수 있다. 직접 그래프를 체험해볼 수 있고, 필요한 데이터 형태와 코드도 제공된다. 그래프는 많은 부분 커스텀이 가능하고 드래그와 같은 캔버스 기능도 사용 가능하다. 사용예시 Ref를 이용해서 그래프 그리기 가장 간단한 그래프를 .. ant design에서 나온 데이터 시각화 라이브러리 antv?! g6.Graph 사용기 https://antv.vision/en AntV AntV is a new generation of data visualization technique from Ant Group. We provide best practices of data visualization with simplicity, convenience, profession, reliability, and infinite possibilities. antv.vision antd design 요긴하게 잘 쓰고 있었는데, 새로 업데이트 되면서 antv라는 엄청난 라이브러리가 나왔다! 들어가서 구경해보면 세상 모든 차트들이 다있다... 웬만한 데이터 시각화는 전부 커버할 수 있을 것 같다.... antd 특성상 docs가 너무 친절해서 대부분 d.. [React] redux-saga 시작하기! 기본적인 effects 활용 💥 redux-saga 비동기 작업을 하는 미들웨어가 필요할 때 사용한다. 특정 액션이 발생했을 때 상태 값이나 응답 상태 등에 따라 다른 액션을 디스패치 하거나 추가적인 로직을 적용 해야될 때 사용할 수 있다. api요청, 요청 실패 시 재요청 등의 리덕스와 관계없는 코드를 미들웨어로 실행시킬 수 있다. yarn add redux-saga 또는 npm install redux-saga ❗ generator 함수 generator 함수는 일반 함수와는 다르게 함수 코드 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있는 함수이다. yield는 중단점을 만든다. yield 뒤에 값이 있으면 그걸 객체의 value에 담아 return하고 멈춘다. 아래와 같이 function*로 선언한다. next()를 .. [React] redux-actions로 가독성 높이기 🔸 redux-actions yarn add redux-actions 액션 생성 함수를 더 짧은 코드로 작성할 수 있게 해준다. 리듀서를 작성할 때 switch문이 아닌 handleActions라는 함수를 사용할 수 있게 해준다. 🔸 createAction 액션 생성 함수를 만들어주는 함수이다. 직접 객체를 만들 필요 없어 훨씬 간단하다. createAction을 사용하지 않았을 때 const CHANGE_USER = 'user/CHANGE_USER'; // 액션 생성 함수 export const change_user = user => ({type: CHANGE_USER, user}); createAction을 사용했을 때 import { createAction } from 'redux-actions';.. [React] useSelector, useDispatch로 state에 접근하기 🔹 react-redux yarn add react-redux 또는 npm install react-redux state를 조회하기 위한 useSelector를 사용할 수 있다. action을 발생시키기 위한 useDispatch를 사용할 수 있다. 🔹 useSelector connect함수를 이용하지 않고 리덕스의 state를 조회할 수 있다. import { useSelector } from 'react-redux' const user = useSelector(state => state.user); 🔹 useDispatch 생성한 action을 useDispatch를 통해 발생시킬 수 있다 만들어둔 액션생성 함수를 import한다. import { change_user } from '../module.. [React] 리덕스 시작하기 (redux, react-redux) 🕵🏻♀️ 리덕스를 사용하는 이유 단방향 데이터 흐름의 탄생 양방향 데이터 흐름은 한 개의 모델이 여러 뷰를 조작하거나, 한 개의 뷰가 여러 모델을 조작할 수 있다. 이는 데이터 흐름을 이해하고 버그를 찾는 것을 방해한다. 이와 같은 이유로 단방향 데이터 흐름이 탄생했다. 단방향 데이터 흐름(= redux가 작동하는 방식)은 데이터가 한방향으로만 흐르기 때문에 데이터 흐름을 예측하기 쉽다. 편리한 state 관리 redux를 사용하지 않으면 react 컴포넌트 들은 각각 개별적으로 state를 관리합다. redux를 사용하면 state를 관리하는 전용 장소(store)에서 상태를 관리하고 컴포넌트는 그걸 보여주기만 하는 용도로 쓰인다. 🕵🏻♀️ redux적용 및 개념 ✔ 필요한 패캐지 설치 npm in.. 이전 1 다음
