오픈소스 썸네일형 리스트형 [Node] Immer 라이브러리를 이용하여 더 쉬운 불변성 관리 Node.js 에서는 var 말고도 let, const 같은 다양한 변수 형태를 제공합니다. 그 중 const를 이용하여 객체를 생성하게 되면 불변성의 객체로 자바에서 이야기를 하자면 final 변수와 같은 기능을 하게 되어 값이 변하지 않게 함을 알 수 있을 것입니다. 이러한 불변성의 객체라도 우리는 데이터를 전송과 더불어 여러 작업들을 하게 되면 불변성의 객체가 변해야 하는 때가 있을 것이라고 생각합니다. 오늘은 불변성 관리, 즉 const 변수의 값의 변동을 도와주는 라이브러리인 Immer 를 알아보도록 하겠습니다. # Contents 불변성이란 lmmer # 불변성이란 변수 하나를 설정하도록 하겠습니다. 이것의 변수는 const 로 설정하고, 변수의 값은 심플하게 아래와 같이 선언하였습니다. co.. 더보기 [Node] React 정리(17) - Context API 를 사용한 전역 값 관리 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이번 예제에서는 전역 관리를 하기 위한 Context API 를 사용할 예정입니다. 현재 정리부터는 소스코드를 제공할 예정입니다. 제공하는 소스코드를 이용하여 따라하실 수 있고 개념을 확실히 잡을 꺼 같아서 올리게 되었습니다. 소스코드 자료는 아래 링크를 참고해주세요. https://github.com/libtv/React_Note/tree/master/15.%20useReducer_Exam GitHub - libtv/React_Note: Th.. 더보기 [Node] React 정리(16) - 커스텀 Hooks 만들기 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생합니다. 예를 들어서 input 을 관리하는 코드는 관리 할 때마다 꽤나 비슷한 코드가 반복되죠. 이번에는 그러한 상황에 커스텀 Hooks 를 만들어서 반복되는 로직을 쉽게 재사용하는 방법을 알아보겠습니다. 현재 정리부터는 소스코드를 제공할 예정입니다. 제공하는 소스코드를 이용하여 따라하실 수 있고 개념을 확실히 잡을 꺼 같아서 올리게 되었습니다. 소스코드 자료는 아래 링크를 참고해주세요. htt.. 더보기 [Node] React 정리(15) - useReducer를 사용한 코드 예제 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 13번째 노트 정리 페이지에서 예제로 테스트 한 사용자 페이지는 useState로 구성되어 있었습니다. 그 예제를 useReducer 로 변경하였습니다. 아래 코드는 13번째 노트 정리 한 코드 예제입니다. 천천히 따라와 주시기 바랍니다. 현재 정리부터는 소스코드를 제공할 예정입니다. 제공하는 소스코드를 이용하여 따라하실 수 있고 개념을 확실히 잡을 꺼 같아서 올리게 되었습니다. 소스코드 자료는 아래 링크를 참고해주세요. https://gith.. 더보기 [Node] React 정리(14) - useReducer를 사용하여 상태 업데이트 분리 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 전 시간에서는 useCallback 과 같이 React.memo를 사용하여 컴포넌트 리렌더링을 방지해보았습니다. 오늘은 useReducer를 사용하여 상태 업데이트 로직을 분리하는 과정을 해보겠습니다. 현재 정리부터는 소스코드를 제공할 예정입니다. 제공하는 소스코드를 이용하여 따라하실 수 있고 개념을 확실히 잡을 꺼 같아서 올리게 되었습니다. 소스코드 자료는 아래 링크를 참고해주세요. https://github.com/libtv/React_No.. 더보기 [Node] React 정리(13) - React.memo을 사용하여 컴포넌트 리렌더링 방지 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 전 시간에서는 useCallback 과 같이 React.memo를 사용하여 컴포넌트 리렌더링을 방지해보았습니다. useCallback과 React.memo를 같이 이용하는 예제를 이번에도 해볼 예정입니다. 내용은 전시간이랑 똑같지만 한번 더 복습하는 방향으로 설정하였습니다. 현재 정리부터는 소스코드를 제공할 예정입니다. 제공하는 소스코드를 이용하여 따라하실 수 있고 개념을 확실히 잡을 꺼 같아서 올리게 되었습니다. 소스코드 자료는 아래 링크를 .. 더보기 [Node] React 정리(12) - useCallback을 사용하여 성능 최적화 하기 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 useCallback를 이용하여 성능 최적화를 하는 예제를 담았습니다. 진부한 예제이지만 useCallback의 기초와 사용법 에 대해 배워보도록 합시다. # Contents 사용하는 이유 useCallback기초와 사용법 # 사용하는 이유 useCallback 을 사용하는 이유를 먼저 설명하도록 하겠습니다. 괜히 복잡한 기능들만 배우면서 왜 사용하는지 모르면서 사용하는 것과 잘 알고 사용하는 것의 차이는 하늘과 땅이라고 생각합니다.. 더보기 [Node] React 정리(11) - useMemo를 사용하여 연산한 값 재사용하기 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 useMemo를 이용하여 연산한 값을 재사용 하는 예제를 담았습니다. 진부한 예제이지만 useMemo의 기초와 사용법 에 대해 배워보도록 합시다. # Contents 사용하는 이유 useMemo 기초와 사용법 # 사용하는 이유 이번에는 성능 최적화를 위하여 연산된 값을 useMemo라는 Hook 을 사용하여 재사용하는 방법을 알아보도록 하겠습니다. App 컴포넌트에서 다음과 같이 countActiveUsers 라는 함수를 만들어서,.. 더보기 이전 1 2 3 4 5 6 ··· 10 다음
