react9 Recoil 사용하기 Recoil 자습서를 읽고 작성한 글입니다. ✅ Recoil Recoil은 React 상태 관리 라이브러리이다. Recoil에서 상태 변화는 atoms(공유 상태)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 데이터가 흐른다. 여기서 atoms는 상태의 단위이고 Selectors는 atoms 상태 값을 동기 또는 비동기 방식으로 변환한다. ✔️ Atom Atom은 Recoil에서의 상태 단위이다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있으며 atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. Atom이 업데이트되면 이를 사용하고 있던 컴포넌트는 새로운 값을 반영해 재렌더링된다. Atom은 런타임에서 생성될 수도 있으며 동일한 Atom이 여러 컴포넌트에서 사용되는 경.. 2022. 3. 11. [7주차] JSX와 Component 3월 2일 자 학습 내용 정리입니다. ✅ JSX JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장이다. HTML과 비슷하나 엄연한 JavaScript이고 HTML의 문법과 다른 부분이 존재한다. JSX는 JavaScript 함수 내에서 다음과 같이 표현된다. const App = () => { return ( Title Hello World! ); } 함수의 리턴 값으로 화면에 그려지길 원하는 요소들을 넣는 것이다. 이러한 JSX는 Babel에 의해 트랜스컴파일된다. 위 코드를 Babel을 통해 트랜스컴파일시키면 아래와 같다. const App = () => { return /*#__PURE__*/React.createElement("div", null, /*#__.. 2022. 3. 2. [7주차] React와 Create React App 3월 2일 자 학습 내용 정리입니다. ✅ SPA 전통적인 페이지 방식은 최초에 서버로부터 HTML을 전달받고 페이지의 변경이 필요할 때 다시 서버에 요청해 HTML을 전달받는다. 이 과정에서 페이지는 변경이 필요할 때마다 처음부터 끝까지 다시 로드된다. 반면 SPA(Single Page Application)는 최초에 서버로부터 HTML을 전달받고 페이지의 변경이 필요할 때 변경이 필요한 부분만 JSON으로 전달받는다. 그리고 페이지에서 변경된 부분만 계산해 다시 그린다. 예를 들어 사용자가 로그인에 성공했다면 서버가 로그인이 성공했다는 메세지를 JSON 형식으로 보내는 식이다. 클라이언트는 이 메세지를 받고 로그인에 관련된 페이지가 어떤 변경이 필요한지 알 수 있다. React는 SPA 방식을 따른다... 2022. 3. 2. 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) - Cors 이슈 해결 & Proxy 설정 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. Cors 개념 교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다. 하지만 보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반.. 2021. 6. 21. 이전 1 다음
