유저가 로그인 후 유저의 정보를 리덕스에 저장하는 예제를 설명하는 글입니다. 이 글을 보기 전 읽으면 좋은 글 https://hulrud.tistory.com/101 [React] 리덕스 알아보기 리덕스가 무엇인지 알아보는 글입니다! 사용 방법은 언급되지 않습니다. 리덕스 리덕스는 리액트 앱의 상태를 관리하는 패키지입니다. 여기서 앱의 상태는 즉 데이터를 말합니다. 다시말해 하 hulrud.tistory.com 리덕스 패키지 설치하기 먼저 리덕스 패키지를 설치합니다. npm i redux @reduxjs/toolkit react-redux 유저 타입 정의하기 src에 types 디렉토리를 만들고 저장할 유저의 타입을 정의합니다. export const LOGIN_SUCCESS = 'LOGIN_SUCCES..

리덕스가 무엇인지 알아보는 글입니다! 사용 방법은 언급되지 않습니다. 리덕스 리덕스는 리액트 앱의 상태를 관리하는 패키지입니다. 여기서 앱의 상태는 즉 데이터를 말합니다. 다시말해 하나의 애플리케이션에서 다루는 데이터를 관리하는 패키지입니다. 리덕스의 세 가지 원칙 리덕스에는 아래와 같은 세 가지의 원칙이 있습니다. 단일 소스 진실 (Single Source of Truth): 리덕스는 애플리케이션의 상태를 단일 객체로 관리합니다. 이 객체는 애플리케이션의 모든 상태를 포함하며, 이를 스토어(Store)라고 합니다. 모든 컴포넌트에서 이 상태에 접근할 수 있습니다. 상태는 읽기 전용 (State is Read-Only): 리덕스의 상태는 읽기 전용입니다. 이는 상태를 직접 변경할 수 없으며, 대신 상태를..

CORS란? CORS (Cross-Origin Resource Sharing) Policy(정책)는 웹 브라우저에서 실행되는 웹 애플리케이션들이 다른 도메인(origin)에 있는 리소스에 접근할 수 있는 권한을 부여하거나 제한하는 보안 정책입니다. 위 에러는 CORS 에러 입니다. 아마 다들 한 번 쯤은 봤을 에러인데요. 이 글에서는 왜 이러한 에러가 발생하는지, 그리고 어떻게 해결하는 지에 대해 아주아주 간략하게 정리해 보겠습니다. CORS에 대한 개념을 알아보기 위해 이 글을 보시는 것은 추천드리지 않습니다 🥲 다소 생략된 부분이 있다고 느끼실 수 있어요! CORS에러가 발생하는 이유 앞서 말했듯이 CORS는 다른 도메인에 있는 리소스에 접근하는 것과 관련이 있습니다. 여기서 다른 도메인(origin..

JSX란? 리액트에서 컴포넌트는 자바스크립트 함수로 작성합니다. 이 함수의 반환값은 HTML 값입니다. 이처럼 자바스크립트와 HTML태그를 섞어서 사용하는 문법을 자바스크립트 XML 즉, JSX라고 합니다. JSX는 공식 자바스크립트 문법은 아니지만, 리액트 공식 문서의 예제로도 사용될 만큼 많은 리액트 개발자가 사용합니다. JSX와 자바스크립트 표현식 JSX 문법을 이용하면 HTML태그에서 자바스크립트 표현식을 직접 사용할 수 있습니다. Body.js import React from "react"; function Body(){ const name = 'react' return ( body {name} ); } export default Body; App.js import React from "reac..

node, npm 버전 확인하기 cmd에 node -v 와 npm --version 을 입력하여 node와 npm이 설치되어 있는지 확인합니다. yarn install npm install -g yarn 을 입력하여 yarn 을 설치하고 yarn --version 으로 버전을 확인하여 잘 설치 되었는지 확인합니다. yarn 으로 react install yarn global add create-react-app 으로 create-react-app 을 설치합니다. 그 후 create-react-app 프로젝트명 을 입력하여 해당 프로젝트에 리액트 앱을 생성합니다. cd로 생성한 디렉토리로 이동 후 yarn start를 입력하면 생성한 리액트 앱이 실행됩니다! react-router-dom 설치 yarn a..

리액트 앱 생성하기 1. 먼저 리액트를 실습할 폴더를 만들어주세요. 이 때 폴더 이름은 너무 길거나 대문자가 포함되어 있으면 안됩니다 ㅠㅠ 2. vscode 터미널 창에 npx create-react-app . 을 입력하세요 .을 입력하면 현재 디렉터리에 리액트 앱이 생성되고, 디렉터리 이름을 따로 입력하셔도 됩니다. +) npx 는 node package execute의 약자로 노트 패키지 실행이라는 명령입니다. Happy hacking 이라는 문구까지 확인하면 reactstudy 폴더에 뭔가 되게 많이 생겼을겁니다. create-react-app 으로 생성한 리액트 앱 또한 Node.js 패키지 입니다. 따라서 폴더 아래에 package.json, package-lock.json, node_modul..