분류 전체보기365 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. boilerplate(client) - Cors 이슈 해결 & Proxy 설정 따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다. Cors 개념 교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다. 하지만 보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반.. 2021. 6. 21. 6월20일의 야구 기록 이 글은 python 프로그램에 의해 자동으로 업로드된 글입니다. 경기 결과 기록 그래프 한화 선수단 기록 2021. 6. 20. 6월19일의 야구 기록 이 글은 python 프로그램에 의해 자동으로 업로드된 글입니다. 경기 결과 기록 그래프 한화 선수단 기록 2021. 6. 20. 6월18일의 야구 기록 이 글은 python 프로그램에 의해 자동으로 업로드된 글입니다. 경기 결과 기록 그래프 한화 선수단 기록 2021. 6. 20. 6월17일의 야구 기록 이 글은 python 프로그램에 의해 자동으로 업로드된 글입니다. 경기 결과 기록 그래프 한화 선수단 기록 2021. 6. 17. 이전 1 ··· 33 34 35 36 37 38 39 ··· 41 다음
