• (React) react-router history.block 적용해보기 - Prevents navigation

    history.block을 이용하면, 사용자의 뒤로 가기 동작 등과 같이 history 객체를 push/pop 하는 동작을 제어할 수 있다. 좀 더 자세한 내용은 https://github.com/ReactTraining/history#blocking-transitions 을 참고 컴포넌트 마운드 시점에 수행하도록 등록 useEffect(() => { history.block((location, action) => { console.log('#### history block', isBlock, action); if (isBlock && action === 'POP') { console.log('#### blocked ####');...


  • (React) redux-saga예제의 fetchEntity 패턴

    redux-saga를 이용하여 비동기 로직 처리를 작성하다보면 로딩 처리 -> try-catch 감싸서 api 호출하는 로직이 반복되어 작성되어 진다. 이 부분을 어떻게 하면 모듈화 할 수 있을 지 고민한 기록이다. 모듈을 정의하기 전에 기존의 작성된 코드를 파악하고, 아래의 규칙을 나름대로 정의를 하였다. 가능한 최소화의 공통화를 가져간다. 로딩처리, 데이타를 put하는 동작, 에러 발생...


  • (Git) git flow

    References 가장 많은 사람들이 사용하고 있는 브랜치 사용에 대한 방법론을 git flow 라고 하는 것으로 나는 이해하고 있다. 그리고 일명 브랜치 전략이라고도 표현한다. git flow에는 일반적으로 아래의 5가지 브랜치로 카테고리가 나뉘어진다. master : 제품으로 출시될 수 있는 브랜치 develop : 다음 출시 버전을 개발하는 브랜치 feature : 기능을 개발하는 브랜치...


  • (React) Unit Test in React #1

    단위 테스트란…? React에서의 단위 테스트 테스트로 인하여 가져올 수 있는 효과 좋은 테스트의 조건 테스트 시나리오 작성 규칙 React Component를 테스트 하기 위한 방법 PropTypes를 이용한 유효성 검사 Installation Example 논리적인 검사 수행하기 위한 단위 테스트 도구 Filename Conventions Snapshot Test References React 환경에서의 단위 테스트를 작성하기 위해서 어떠한 방식으로...


  • (React) React.memo() : Prevent unnecessary re-renders

    React.memo()는 React v16.6에서 소개된 새로운 기능이다. React.PureComponent와 유사하게 동작한다 functional components를 이용하여 PureComponent의 메모이제이션 기능을 사용할 수 있게 해준다. memoization - wikipedia In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached...