React11 Recoil 사용하기 Recoil 자습서를 읽고 작성한 글입니다. ✅ Recoil Recoil은 React 상태 관리 라이브러리이다. Recoil에서 상태 변화는 atoms(공유 상태)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 데이터가 흐른다. 여기서 atoms는 상태의 단위이고 Selectors는 atoms 상태 값을 동기 또는 비동기 방식으로 변환한다. ✔️ Atom Atom은 Recoil에서의 상태 단위이다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있으며 atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. Atom이 업데이트되면 이를 사용하고 있던 컴포넌트는 새로운 값을 반영해 재렌더링된다. Atom은 런타임에서 생성될 수도 있으며 동일한 Atom이 여러 컴포넌트에서 사용되는 경.. 2022. 3. 11. react-dropzone - 이미지와 동영상 파일 업로더 라이브러리 개념 웹 개발을 하다 보면 유저의 대표 이미지를 업로드 하거나 영상을 업로드 하는 등 파일을 업로드해야 하는 일이 종종 발생한다. 하지만 express에서는 파일에 대한 처리를 지원하지 않기 때문에 파일 드래그 앤 드랍 존을 만들기 위해 해당 라이브러리를 사용한다. Usage 설치 react-dropzone은 다음 명령어를 통해 설치할 수 있다. npm install react-dropzone --save // or yarn add react-dropzone 사용 우선 사용법을 알아보기 위해 공식 문서의 예제를 가져왔다. import React from 'react' import Dropzone from 'react-dropzone' console.log(acceptedFiles)}> {({getRoot.. 2021. 8. 15. boilerplate(client) - Authentication 기능 만들기 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. Authentication 기능을 위한 Redux 설정하기 1. type 설정 src > action 폴더의 type.js에 Auth 기능을 위한 type을 설정한다. export const AUTH_USER = "auth_user"; 2. auth action 구현 src > action 폴더의 user_action.js에 auth를 위한 요청을 서버에 보내는 작업을 구현한다. import axios from 'axios'; import { AUTH_USER } from './types'; export function auth() { const request = axios.get('/api/users/auth') .then(respon.. 2021. 6. 22. boilerplate(client) - 로그아웃 기능 만들기(reactstrap 적용) 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. reactstrap 개념 Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크로 다양한 기능을 제공한다. 크롬, 파이어폭스, 오페라, 사파리 등 많은 브라우저를 지원하며 웹사이트 개발의 효율을 증대시켜 준다. reactstrap은 bootstrap을 react에서 더 쉽게 사용하기 위한 프레임워크이다. 설치 reactstrap을 사용하기 위해서는 reactstrap 뿐만 아니라 bootstrap도 설치해야 한다. reactstrap의 설치 명령어는 다음과 같다. npm install reactstrap --save npm install bootstrap@4.6.0 --save 적용 bootstra.. 2021. 6. 22. boilerplate(client) - 회원가입 기능 만들기 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. 회원가입 기능을 위한 Redux 설정하기 1. type 설정 src > action 폴더의 type.js에 회원가입을 위한 type을 설정한다. export const REGISTER_USER = "register_user"; 2. register action 구현 src > action 폴더의 user_action.js에 register를 위한 요청을 서버에 보내는 작업을 구현한다. import axios from 'axios'; import { REGISTER_USER } from './types'; export function registerUser(dataTosubmit) { const request = axios.post('/a.. 2021. 6. 21. boilerplate(client) - 로그인 기능 만들기(2) 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. 로그인 기능 구현하기 1. UI 만들기 src > components > views > LoginPage 폴더 안에 LoginPage.js를 생성한다. 이후 원하는 UI를 구현 후 return 시키면 된다. import React from 'react' function LoginPage() { return ( Email Password Login ); } export default LoginPage 위의 구현 내용을 확인해보면 다음과 같다. 2. state 만들기 input 태그에 입력한 값을 받기 위해서는 useState이 필요하다. useState을 통해 각 state을 생성하고 setState을 통해 state에 값을 넣는 형식이다.. 2021. 6. 21. boilerplate(client) - 로그인 기능 만들기(1) 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. 로그인 기능을 위한 Redux 설정하기 1. type 관리를 위한 type.js 생성 src > action 폴더에 type 관리를 위한 type.js를 생성한다. 이 type들은 같은 action 폴더에 있는 user_action.js와 reducer 폴더의 user_reducer.js 등에서 쓰이는데 이를 쉽게 관리하기 위함이다. export const LOGIN_USER = "login_user"; 위 코드와 같이 type으로 지정할 내용을 적어주면 된다. 2. login action 구현 src > action 폴더에 user와 관련된 action을 구현하기 위한 user_action.js를 생성한다. import axios fr.. 2021. 6. 21. boilerplate(client) - Redux 적용하기 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. Redux 적용 redux를 적용하기 위해서는 index.js의 일부분을 수정할 필요가 있다. 내용 추가 전 index.js 초기의 index.js는 다음과 같다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root') ); // If you want to start measuring performance in your app.. 2021. 6. 21. Redux - 상태 관리 라이브러리 Redux란? Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. Redux를 사용할 경우 다음과 같은 이점이 있다. 일관적으로 동작하고, 서로 다른 환경(클라이언트, 서버, 네이티브)에서도 실행되며, 테스트하기 쉬운 앱을 작성하도록 도와준다. 실행 취소, 다시 실행, 영속적인 상태 등을 가능하게 한다. DevTools를 이용할 경우 앱의 상태를 바로바로 확인할 수 있다. Redux의 아키텍처를 통해 변경사항을 기록하고, 시간여행형 디버깅을 사용하고, 완전한 에러 리포트를 서버로 보낼 수 있다. 어떤 UI 레이어에서도 동작하며 거대한 애드온 생태계를 가지고 있다. Redux 핵심 용어 정리 State state는 Redux API에서는 보통 저장소에 의해 관리되고 getState()에 의.. 2021. 6. 21. 이전 1 2 다음
