오픈소스/노드 썸네일형 리스트형 [Node] React 정리(21) - 리덕스 이론 정리 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 리덕스를 사용하게 될 때 앞으로 접하게 될 키워드들을 미리 알아봅시다. 이 키워드들 중에서 대부분은 이전에 useReducer를 사용해볼때 접해본 개념이기도 합니다. 또한 프로젝트를 구성할 때 리덕스를 사용하는 규칙에 대해서도 알아볼 예정입니다. # Contents 리덕스 키워드 정리 리덕스 규칙 # 리덕스 키워드 정리 1. 액션 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다. 이는, 하나의 객체로 표현되는데요, 액션.. 더보기 [Node] React 정리(20) - useAsync 커스텀 훅 만들기, Context API를 사용하여 useAsync 커스텀 훅 적용 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 데이터를 요청해야 할 때마다 리듀서를 작성하는 것은 번거로운 일 입니다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 Hook 을 만들어서 요청 상태 관리 로직을 쉽게 재사용하는 방법을 알아봅시다. 완성된 예제는 다음 링크를 통해 미리 보실 수 있습니다. https://github.com/libtv/React_Note/tree/master/20.%20useAsync GitHub - libtv/React_Note: This is a notebo.. 더보기 [Node] React 정리(19) - Reducer를 이용하여 API 연동 기본 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 자바스크립트, 노드, 리액트들은 비동기 프로그래밍임을 알아야 합니다. 비동기 처리를 위해 Promise 와 Asnyc/await 를 사용하고 있으며, API 데이터를 가져오는 경우에도 비동기적으로 작동하기 때문에 이러한 로직처리를 하기 위해서는 그에 알맞는 함수와 사용법을 이미 알고 있어야 함을 알려드립니다. 본 예제에서는 useReducer와 axios 라이브러리를 이용하여 데이터를 비동기적으로 가져오는 방법에 대해 알아보도록 하겠습니다. 그.. 더보기 [Node] React - TodoList 만들기 리액트로 TODO List 를 만들어보도록 하겠습니다. TODO List의 프로젝트를 통해 좀 더 styled-components와 Hooks를 사용하는 방법을 배워보고 익숙하게 개발하기 위함입니다. TODO List 프로젝트를 만들 때에는 크게 3가지의 분류로 나뉘게 됩니다. 먼저 컴포넌트를 구성하는 UI를 만들어야 하는 단계가 있고, Context API를 통해 reducer로 만든 데이터나 함수들을 각 컴포넌트에 전송해야 합니다. 전송한 데이터나 함수를 각 컴포넌트에 넣어줘서 기능을 수행할 수 있게 만드는 단계로 나누어 개발하도록 하겠습니다. 천천히 프로젝트 내용을 통해 구성하고 연결하여 좋은 개발하시기 바랍니다. 그럼 지금부터 시작하도록 하겠습니다. # Contents 컴포넌트 만들기 Contex.. 더보기 [Node] React 정리(18) - styled-components 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이번에는 styled-components 를 배워보도록 하겠습니다. 이번에 배워볼 기술은 CSS in JS 라는 기술입니다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는 것으로써 template Literal 구문을 사용하여 만들어집니다. 그러면 styled-components 를 먼저 설치하는 과정과 예제들을 차근 차근 배워가면서 스타일을 어떻게 정의하고 사용하는지 파악하도록 하겠습니다. 그러면 style.. 더보기 [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.. 더보기 이전 1 2 3 4 5 ··· 7 다음
