boilerplate-client8 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. boilerplate(client) - Cors 이슈 해결 & Proxy 설정 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. Cors 개념 교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다. 하지만 보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반.. 2021. 6. 21. boilerplate(client) - Client 토대 마련하기(React 설치) 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. 2021. 5. 30. 이전 1 다음
