분류 전체보기 썸네일형 리스트형 리액트 16.3 Context API 파헤치기 출처 : https://velopert.com/3606 리액트 16.3 에 소개된 새로워진 Context API 파헤치기 | VELOPERT.LOG 3월말에 리액트 16.3 이 정식 릴리즈되면서, LifeCycle 몇개도 사라지고 (componentWillMount, componentWillUpdate, componentWillReceiveProps), 기존에 존재하던 Context API 가 새로워졌는데요, 이번 튜토리얼에서는 새로워진 Context API 에 대해서, 한번 자세히 다뤄보도록 하겠습니다. 프로젝트에 사용된 코드는 GitHub Repo 에서 확인 할 수 있습니다. 시작하기 Contex velopert.com 3월말에 리액트 16.3이 정식 릴리즈되면서, LifeCycle 몇개도 사라지고 .. 호이스팅 아래의 코드를 실행하면, onclick 안의 i는 6이 되기 때문에 onclick이벤트 시, i를 활용하지 못한다. window.onload = function() { var $wrap = document.getElementById('wrap'); var $nav = document.getElementsByTagName('nav')[0]; var $nav_li = $nav.getElementsByTagName('li'); var len = $nav_li.length; console.log(len); for (var i = 0; i < len; i++) { $nav_li[index].onclick = function() { $wrap.className = 'box' + index; for (var k = .. Reselect를 이용하여 React와 Redux 최적화하기 출처: http://guswnsxodlf.github.io/optimize-react-component-using-reselect Reselect를 이용하여 React와 Redux 최적화하기 React와 Redux를 같이 사용하면 서로의 관심사를 분리할 수 있는 좋은 조합이 된다. 하지만 어플리케이션이 복잡해질수록 설계를 제대로 해주지 않으면 성능은 떨어지기 마련이다. React에서 가장 시간이 오래 걸리는 작업 중 하나는 바로 렌더링 싸이클이다. 컴포넌트의 State... guswnsxodlf.github.io Reselect를 이용하여 Reactdhk Redux 최적화하기 React와 Redux를 같이 사용하면 서로의 관심사를 분리할 수 있는 좋은 조합이 된다. 하지만 어플리케이션이 복잡해질수록 설계.. HOC (Higher Order Component) 리액트 Higher-order Component(HOC) 코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있다. 우리는 주로 그러한 것들을 함수화해서 재사용 하곤 한다. 컴포넌트 또한 비슷하다. 같은 UI 관련 코드가 재사용 될 수 있다면 우리는 컴포넌트를 만들어서 컴포넌트를 재사용한다.그런데 컴포넌트 기능 상에도, 자주 반복되는 코드들이 나타날 수 있다. 소프트웨어 개발 원리 중에서 DRY 라는 개념이 있다. - 같은 작업을 반복하지 마라 (Don't repeat yourself) 리액트 컴포넌트를 작성하게 될 때 반복될 수 있는 코드들은, HOC를 만들어서 해결해줄 수 있다. HOC는, 하나의 함수인데, 함수를 통하여 컴포넌트에 우리가 준비한 특정 기능을 부여한다. 직접 만들어볼 때 까지는.. egjs-infinitegrid/react infinitegrid API documentation Prop types 속성 타입 기본값 설명 tag String "div" 컨테이너의 태그 이름 threshold Number 100 카드 요소가 레이아웃에 추가되는 이벤트 영역의 threshold 크기 margin Number 0 아이템 주변의 여백 useFit Boolean true useFit 옵션은 항목이 추가 될 때 까지 공백이 보이지 않도록 위쪽으로 스크롤 함 useFirstRender Boolean true useFirstRender옵션은 첫 번째 렌더링 시 또는 로드가 완료된 후 마크업을 표시할지 열부를 결정함 isOverflowScroll Boolean false overflow:scroll이 적용되는지 여부를 나타냄 isEqualSize Boolean false 모든 카드 요소의 크기가 .. 로컬 git reset --hard 후 리모트에 push 하기 로컬상에서 commit 후에 push까지 했는데 다시 reset을 시켜야 하는 상황이라고 가정해보자. 로컬 remote를 git reset --hard HEAD로 되돌리고 git push를 하면 push를 할 수 없다고 나온다. 이럴땐 아래의 명령어를 이용해서 강제 push를 시키도록한다. git push origin +[브랜치이름] 또는 git push origin [브랜치이름] -f Redux 폴더 구조 React와 Redux를 사용하는 프로젝트의 폴더는 크게 action폴더와 component폴더, reducer폴더, store 폴더로 구성된다. action 폴더 action 폴더는 애플리케이션에서 사용하는 명령어(action type)와 API 통신과 같은 작업을 하는 액션 매서드(action creator)를 모아둔 폴더다. 서비스에 따라 모든 명령어와 액션 메서드를 한 곳에 모아 두거나 도메인별로 구분해 나눠 놓기도 한다. // action type(명령어) export const COMPLETE_TODO = 'COMPLETE_TODO' // action creators(액션 메서드) export function complete({complete, id}) { return { type:.. Naver ESLint 적용 프로젝트를 총 세명이 진행하다보니, 다들 코드 스타일이 달랐다. 코드의 품질을 높이고, 좋은 코딩 스타일을 익히기 위해 eslint를 프로젝트에 적용하기로 했다. https://github.com/naver/eslint-config-naver naver/eslint-config-naver Naver JavaScript Coding Conventions rules for eslint - naver/eslint-config-naver github.com eslint 는 Airbnb를 기반으로 한 naver eslint를 적용하기로 하였다. # 적용 순서 1. 프로젝트에 eslint를 설치한다. yarn add eslint -D 2. 설치가 완료되었다면, IDE(phpstorm 사용)에 eslint를 설정한다.. 이전 1 ··· 10 11 12 13 14 15 다음
