본문 바로가기

전체 글

 (72)
[React/Node] 마켓컬리 클론코딩 9 - 회원가입 페이지 회원가입 페이지 다른 페이지를 손보려다가 아무래도 로그인이 된 상태를 기반으로 하는 것이 좋을거같다고 판단했다.회원정보를 토대로 로그인하는 것은 구현해두었으니, 회원 정보를 만드는 회원가입 페이지를 생성하였다. import React, { useEffect, useState } from "react";import { useDispatch, useSelector } from 'react-redux';import { fetchUsers } from '../redux/actions/userAcions';import { useNavigate } from "react-router-dom";import axios from "axios";import "../css/SignUp.css";const SignUp = ()..
[React/Node] 마켓컬리 클론코딩 8 - Redux 추가 이번 프로젝트는 물론 사용해보지 않은 것들을 다뤄보면서 배우고자 하긴 하였지만, 이미 자잘하게 배우고 있기에 Redux와 같은 도구는 조금 이후에 다뤄볼 생각이었었다. express를 연결하고 DB를 연결해 데이터를 활용하도록 작업을 하던 도중 Cannot read properties of undefined (reading 'src') TypeError: Cannot read properties of undefined (reading 'src') 이런 에러를 접하고 말았다. 그냥 기존의 js파일에 저장되어 있던 데이터들을 불러오는 방식을 단지 DB에서 가져오는 방식으로 바꾸었을 뿐인데, 전혀 상상치도 못한 에러였다. 처음에는 변수명이라던가 뭔가 실수한 부분이 있나 의심하다가 결국 내 생각이 닿은 곳은....
[React] Redux Redux 상태 관리를 위한 라이브러리. useState와 같은 기능을 제공하나, 해당 컴포넌트에서만 사용되는 useState와 달리 전역적으로 사용이 가능하다. - 설치 npm i redux react-redux 사용하기 위해서 먼저 전체적인 redux의 구조를 이해할 필요가 있다. redux는 action, dispatch, reducer, store로 구성되어 있다. action : 상태를 변경시킬 action 정의. dispatch : 상태를 업데이트 하기 위한 메서드, action을 전달해줌. reducer : 현재 state와 전달받은 action을 토대로 새로운 상태를 반환해줌. store : reducer로부터 전달받아 상태를 생성. 동작 과정을 살펴보면, - 컴포넌트에서 특정 이벤트가 발..

티스토리툴바