react (46) 썸네일형 리스트형 [리액트를 다루는 기술] 23장 JWT를 통한 회원 인증 시스템 구현하기 23.1 JWT의 이해 23.1.1 세션 기반 인증과 토큰 기반 인증의 차이 1) 세션 기반 인증 시스템 - 사용자가 로그인을 하면, 서버는 세션 저장소에 사용자의 정보를 조회하고 세션 id를 발급 - 발급된 id는 주로 브라우저의 쿠키에 저장 - 사용자가 다른 요청을 보낼 때마다 서버는 세션 저장소에서 세션을 조회한 후 로그인 여부를 결정하여 작업을 처리하고 응답 - 세션 저장소는 주로 메모리, 디스크, 데이터베이스 등을 사용 단점 - 서버를 확장하기가 번거로움 - 서버의 인스턴스가 여러 개가 된다면, 모든 서버끼리 같은 세션을 공유해야 하므로 세션 전용 데이터베이스를 만들어야 함 2) 토큰 기반 인증 시스템 - 토큰은 로그인 이후 서버가 만들어 주는 문자열 - 해당 문자열 안에는 사용자의 로그인 정보.. [리액트를 다루는 기술] 22장 mongoose를 이용한 MongoDB 연동 22.1 MongoDB 소개 1) 관계형 데이터베이스의 한계 - 데이터 스키마가 고정적 - 확장성 -> RDBMS는 저장하고 처리해야 할 데이터양이 늘어나면 여러 컴퓨터에 분산시키는 것이 아니라, 해당 데이터베이스 서버의 성능을 업그레이드하는 방식으로 확장해야 함 2) MongoDB - 문서 지향적 NoSQL 데이터베이스 - MongoDB에 등록하는 데이터들은 유동적인 스키마를 지닐 수 있음 - 데이터의 구조가 자주 바뀐다면 MongoDB가 유리 22.1.1 문서란? 문서(document) - RDBMS의 레코드(record)와 비슷 - 문서의 데이터 구조는 한 개 이상의 키-값 쌍으로 되어 있음 - 문서는 BSON(바이너리 형태의 JSON)형태로 저장 - 새로운 문서를 만들면 _id라는 고윳값을 자동으.. [리액트를 다루는 기술] 21장 백엔드 프로그래밍 : Node.js의 Koa 프레임워크 21.1 작업 환경 준비 21.1.1 프로젝트 생성 - 블로그 서비스와 연동할 서버 - blog 디렉터리를 만들고, 그 내부에 blog-backend 디렉터리 만듬 - npm init -y 명령어를 통해 패키지 정보 생성 - koa 웹 프레임워크 설치 npm install koa 21.2 koa 기본 사용법 21.2.1 서버 띄우기 index.js - 서버를 포트 4000번으로 열고, 서버에 접속하면 'hello world'라는 텍스트를 반환하도록 설정 const Koa = require('koa'); const app = new Koa(); app.use(ctx => { ctx.body = 'hello world'; }); app.listen(4000, () => { console.log('Listen.. [리액트를 다루는 기술] 19장 코드 스플리팅 코드 스플리팅 - 리액트 애플리케이션의 번들 크기를 줄이기 위해 사용하는 기술 - 리액트 프로젝트를 완성하여 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포 - 웹팩(webpack) -> 별도의 설정을 하지 않으면 프로젝트에서 사용중인 모든 자바스크립트 파일이 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐짐 -> 파일 크기가 매우 커져 사용자 경험이 안 좋아지고 트래픽도 많이 나옴 -> 코드 비동기 로딩으로 해결 19.1 자바스크립트 함수 비동기 로딩 - 일반 자바스크립트 함수 스플리팅 notify.js export default function notify() { alert('안녕하세요!'); } src/App.js import logo from './logo.svg'; import .. [리액트를 다루는 기술] 18장 리덕스 미들웨어를 통한 비동기 작업 관리(2) 18.3.2 redux-saga - 기존 요청을 취소 처리해야 할 때 (불필요한 중복 요청 방지) - 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계없는 코드를 실행할 때 - 웹소켓을 사용할 떄 - API 요청 실패 시 재요청해야 할 때 18.3.2.1 제너레이터 함수 이해하기 제너레이터(generator) 함수 - 함수에서 값을 순차적으로 반환가능 - function* 키워드 사용 - 제너리에터 함수를 호출했을 때 반환되는 객체 = 제너레이터 - 제너레이터가 처음 만들어지면 함수의 흐름은 멈춰 있는 상태 - next()가 호출되면 다음 yield가 있는 곳까지 호출하고 다시 함수가 멈춤 function* generatorFunction() { console.log('안.. [리액트를 다루는 기술] 18장 리덕스 미들웨어를 통한 비동기 작업 관리(1) 18.1 작업 환경 준비 modules/counter.js - counter 리덕스 모듈 import {createAction, handleActions} from 'redux-actions'; const INCREASE = 'counter/INCREASE'; const DECREASE = 'counter/DECREASE'; //액션 생성 export const increase = createAction(INCREASE); export const decrease = createAction(DECREASE); const initialState = 0; //리듀서 함수 const counter = handleActions( { [INCREASE]: state => state +1, [DECREASE]: st.. [리액트를 다루는 기술] 17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 17.1 UI 준비하기 - 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리 프레젠테이셔널 컴포넌트 - 상태 관리가 이루어지지 않고, 그저 props를 받아와서 화면에 UI를 보여 주기만 하는 컴포넌트 - src /components 경로 컨테이너 컴포넌트 - 리덕스와 연동되어 있는 컴포넌트 - src/containers 경로 17.2.1 카운터 컴포넌트 만들기 components/Counter.js const Counter = ({ number, onIncrease, onDecrease} ) => { return ( {number} +1 -1 ) } export default Counter; 17.2.2 할일 목록 컴포넌트 만들기 components / Todos.js const TodoItem = (.. [리액트를 다루는 기술] 16장 리덕스 라이브러리 이해하기 16.1 개념 미리 정의하기 리덕스(redux) - 리액트 상태 관리 라이브러리 - 리액트에 종속되는 라이브러리는 아님 - 리덕스 사용시 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있음 - 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 가능 - 전역 상태를 관리할 때 효과적 16.1.1 액션 - 상태에 어떠한 변화가 필요하면 액션(action)이 발생 - 액션은 하나의 객체로 표현 - 액션 객체는 type 필드를 반드시 가지고 있어야 함 { type:'ADD_TODO', data: { id:1, text: "리덕스 배우기" } } { type:'CHANGE_INPUT', text: '안녕하세요' .. 이전 1 2 3 4 ··· 6 다음
