목록ClientSide (68)
치춘짱베리굿나이스
Victory Victory Victory Formidable is a global design and engineering consultancy and open source software organization, specializing in React.js, React Native, GraphQL, Node.js, and the extended JavaScript ecosystem. We have locations in Seattle, London, Toronto, Denver, and Pho formidable.com 설치 $> npm i victory $> yarn add victory npm 링크 victory victory Data viz for React. Latest version: 36...
구글 애널리틱스 내 웹 사이트에서 사용자들이 무슨 행동을 했고 어떤 페이지에 몇 분 이상 머물렀는지, 사용자의 유형이나 국가는 어느 쪽이 많은지, 어느 경로를 통해 유입되었는지 등을 알 수 있다 토이 프로젝트 급은 방문자가 많지 않으니 유의미한 결과가 나오지 않을 수 있어도… 호기심이 나잖아 주소만 설정해서 간단한 데이터를 보고, 라이브러리를 이용하여 세부 이벤트를 측정해보자 주소 Redirecting... Redirecting... analytics.google.com Redirecting… 이라고 뜨는거 굉장히 멋없긴 한데 어쩔수없다 웹에서 설정하기 1. 새 계정 만들기 저 킹받는 라인브레이크 측정 시작 버튼을 눌러 계정을 만들자 계정 이름과 유형을 명시하자 아래 세개정도만 체크되어있어도 괜찮을 것 ..
Redux toolkit 설치 $> npm i @reduxjs/toolkit $> yarn add @reduxjs/toolkit npm 링크 @reduxjs/toolkit @reduxjs/toolkit The official, opinionated, batteries-included toolset for efficient Redux development. Latest version: 1.8.1, last published: 2 months ago. Start using @reduxjs/toolkit in your project by running `npm i @reduxjs/toolkit`. There are 1388 other projects in t www.npmjs.com yarn 링크 Contri..
react-query 설치 $> npm i react-query $> yarn add react-query npm 링크 react-query react-query Hooks for managing, caching and syncing asynchronous and remote data in React. Latest version: 3.39.0, last published: 13 days ago. Start using react-query in your project by running `npm i react-query`. There are 783 other projects in the npm registry usi www.npmjs.com yarn 링크 Contributors https://yarnpkg..
react-portal 부모 컴포턴트의 바깥에 있는 DOM 노드에 자식을 렌더링할 수 있는 기능이다 쉽게 말하면! 리액트에서 모든 컴포넌트는 root에 렌더링이 되는데, react-portal을 이용하면 root 밖에 있는 요소에도 컴포넌트를 렌더링할 수 있다는 것이다 이렇게... modal 태그는 root의 밖에 있음에도 마치 root 안에 있는 것처럼 연결해주는 것이다 마치 게임에 나오는 포탈처럼 말이다 react-portal 써보기 1. index.html 파일의 root 태그 바깥에 요소 끼워넣기 ... 리액트는 root 요소 안에만 요소를 렌더링함을 기억하고, 완전 바깥에 modal 요소를 넣어보자 이렇게 html 파일 안에 요소를 끼워넣으면, 요소가 존재하지 않는 경우가 없으므로 documen..
gh-pages 설치 $> npm install gh-pages --save-dev $> yarn add gh-pages npm 링크 gh-pages gh-pages Publish to a gh-pages branch on GitHub (or any other branch on any other remote). Latest version: 4.0.0, last published: 4 days ago. Start using gh-pages in your project by running `npm i gh-pages`. There are 885 other projects in the npm registry using gh www.npmjs.com yarn 링크 Contributors https://yarnp..
React-beautiful-dnd 설치 $> npm i react-beautiful-dnd $> yarn add react-beautiful-dnd npm 링크 https://www.npmjs.com/package/react-beautiful-dnd react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.0, last published: a year ago. Start using react-beautiful-dnd in your project by running `npm i react-beautiful-dnd`. There are 1265 other projects in the..
lodash 설치 $> npm i lodash $> yarn add lodash npm 링크 Contributors lodash 용례 이름이 lodash인 이유는 라이브러리를 사용할 때 언더바 (_ = low dash) 를 쓰기 때문이다 객체, 배열 등의 자바스크립트 / 타입스크립트 기본 데이터 구조를 쉽게 다룰 수 있도록 도와주는 라이브러리 심지어 성능도 좋아 라이브러리를 가져다 쓴다고 무거워지거나 성능저하가 크게 일어나지 않는다 중복값 제거, 객체 데이터 추출, 깊은 복사, 특정 데이터 삭제 등 바닐라 자바스크립트로 두세줄 걸릴 만한 일들을 lodash를 사용하면 한 줄 정도만에 간단하게 끝낼 수 있다 이제 배열에서 요소 하나 삭제할 때 slice 두번 하고 합치는 더러운 일을 안 해도 된다.......