React Strict Mode란?React Strict Mode는 React가 개발 중에 "내가 작성한 코드에 문제가 없는지 확인"하는 도구이다. React Strice Mode가 하는 일 1. 컴포넌트를 두번 실행해요.엄격모드는 컴포넌트를 두 번 실행해서 문제가 있는지 확인해요(캐릭터가 잘 움직이는지 확인)예를 들어, "내 코드가 너무 느리지 않나?", "실수로 데이터를 잘못 계산하지는 않나?" 같은 걸 찾아줍니다.(비유: 캐릭터가 다른 환경에서도 문제없이 작동하는지 확인)function MyComponent() { console.log("컴포넌트 실행!"); return 안녕!}// 엄격모드에서는 "컴포넌트 실행!"이 두번 출력됩니다. 2. useEffect를 다시 한 번 확인해요useEffe..

리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 하게 상태 관리를 할 수 있습니다. 이 장에서는 리덕스 미들웨어의 개념을 이해하고, 미들웨어를 사용하여 비동기 작업ㅇ르 처리하는 방법을 알아보겠습니다. 미들웨어란 리덕스 미들웨어는 액션을 디스패치했을 때(=액션을 발생시키는 것) 리듀서에서 ..

개념 미리 정리하기 1. 액션 상태에 어떠한 변화가 필요하면 액션이란 것이 발생한다. 이는 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이루어져 있다. 액션 객체는 type필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다. 그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야할 값이다. { type: 'ADD_TODO', data { id: 1, text: '리덕스 배우기' } } 2. 액션 생성 함수 액션 생성 함수는 액션 객체를 만들어 주는 함수이다. 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있다. 이러한 일을 방지하기 위해 이를 함수로 만..

리액트를 다루는 기술 개정판(https://g.co/kgs/GBwnEc)의 24장을 따라가며 작성 리덕스 사용에 필요한 라이브러리를 설치합니다. yarn create react-app react-redux-tutorial cd react-redux-tutorial yarn add redux@4.1.2 react-redux 실습은 Ducks패턴을 사용하여 액션 타입, 액션 생성 함수, 리듀서가 하나의 파일에 다 정의되어 있는 리덕스 모듈을 작성 할 것 입니다. 아래의 +1, -1 버튼으로 숫자를 조작할 수 있는 카운트 프로젝트를 만들어봅시다. 1. src폴더 아래에 modules폴더를 생성하고 counter.js파일을 생성해 줍니다. 첫번째, 액션 타입을 정의해 줍니다. 액션타입이란? 액션타입을 정의하는 ..

JWT JWT는 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 두 개체가 서로 안전하게 정보를 주고받을 수 있도록 웹 표준으로 정의된 기술 사용자의 로그인 상태를 서버에서 처리하는 데 사용할 수 있는 대표적인 두가지 인증 방식을 소개합니다. 세션 기반 인증 서버가 사용자가 로그인 중임을 기억하고 있다. 세션 기반 인증의 단점 서버를 확장하기가 번거로워질 수 있다. 토큰 기반 인증 로그인 이후 서버가 만들어주는 문자열로 사용자의 로그인 정보와 서버에서 발급되었음을 증명하는 서명이 들어있다. 토큰 기반 인증의 장점 서버에서 사용자 로그인 정보를 기억하기 위해 사용하는 리소스가 적다. 실습 토큰 기반 인증 시스템을 사용. User 스키마/모델 만들기 참고 리액트를 ..

class component에는 state라는 멤버변수가 있는데 그 변수는 object이다. object에는 count라는 데이터가 있다. jsx - 자바스크립트 코드 변수나 함수를 이용하거나 비즈니스 로직을 작성할 때는 괄호를 사용해야한다. React에는 synthetic event라고 해서 일반 돔 요소에서 발생하는 이벤트 오브젝트와는 약간 다른 개념이다. 브라우저에서 발생할 수 있는 모든 이벤트는 event라는 오브젝트로 대표할 수 있는데 이벤트 오브젝트 안에는 이벤트와 관련된 모든 정보들이 들어있다. 그것과 마찬가지로 브라우저에서 발생하는 이벤트를 그냥 쓰는 것이 아니라 리액트는 리액트 나름대로 그 이벤트를 한 단계 더 감싸는 자신만의 이벤트 클래스를 쓴다. 그것이 바로 synthetic even..

리액트는 순수 자바스크립트이고 이 자바스크립트를 이용해서 컴포넌트들을 만들어 나간다. 실제로 브라우저는 HTML과 CSS, 순수 자바스크립트만을 이용할 수 있다. 결국 jsx나 다른 코드들이 바벨을 이용해서 순수 자바스크립트로 변환이 된다. 그리고 변환이 된 것들을 우리가 만든 컴포넌트를 HTML과 연결하는 작업을 해 주어야하는데 그것을 할 수 있는 것이 'react-dom'이다. 사용자에게 궁극적으로 배포되어지는 것은 index.html인데 'react-dom'에서 ReactDOM 클래스를 가지고 오고 이 클래스에 있는 렌더 함수를 이용해서 document 페이지에 있는 id가 'root'라는 요소를 가지고 와서 그 요소에 root컴포넌트를 연결시켜준다. JSX 처음 리액트가 나왔을 때는 JSX가 없었..

"리액트는 컴포넌트들이다." 이 컴포넌트를 만드는 방법 중의 하나로 클래스 컴포넌트를 이용할 수도 있고 Fuction 컴포넌트도 있다. 클래스 컴포넌트는 리액트에서 제공하는 Component 라는 클래스를 extends, 상속해서 만들 수 있다. Function은 간단하게 함수로 만들 수 있다. 내 컴포넌트가 state가 있고 그 상태에 따라서 컴포넌트가 주기적으로 업데이트되어야 한다면 클래스 컴포넌트를 쓰면 되고 내 컴포넌트에 state(상태)가 없고 항상 정적으로 데이터가 표기가 된다면 함수 컴포는트를 이용해서 간단하게 컴포넌트를 만들 수 있다. 차이점은 클래스에는 관련된 데이터, 함수들이 묶여져 있는 것을 클래스라고 하는데 그래서 클래스는 컴포넌트에서 가지고 있는 상태, 데이터를 담을 수 있는 st..