본문 바로가기

분류 전체보기57

[Redux] Redux Thunk를 왜 사용해야 할까 먼저!! Redux Toolkit의 createAsyncThunk를 사용하면 상태 관리가 더 자동화되고 코드가 훨씬 간결해진다.하지만, Toolkit 없이 Thunk의 기본 개념을 먼 익히기 위해 사용해보았다. 1. Redux Thunk란?Redux는 기본적으로 동기적인 액션만 처리할 수 있다. 하지만 네트워크 요청처럼 비동기 로직이 필요한 경우, redux-thunk를 사용하면 비동기 작업을 액션 내부에서 처리할 수 있다.✅ Redux에서 비동기 작업이 필요한 이유기본적으로 Redux는 객체를 반환하는 순수 함수 기반의 상태 관리 시스템이다.const fetchProducts = () => { const res = fetch("https://fakestoreapi.com/products"); // 비.. 2025. 2. 17.
왜 React 최신 버전에서는 import React가 필요 없을까? 📌 과거에는 import React가 필수였다React를 공부하다 보면 예전 강의나 코드에서 import React from "react"; 구문을 흔히 볼 수 있다. 이는 기존 React 버전에서는 JSX 문법을 사용할 때 React가 필요했기 때문이다.JSX(JavaScript XML)는 JavaScript 안에서 HTML과 유사한 문법을 사용할 수 있도록 해주지만, 실제로는 React.createElement를 호출하는 코드로 변환된다. 예를 들어,const element = Hello, world!;위 코드는 Babel을 통해 다음과 같이 변환되는 것이다.const element = React.createElement("h1", null, "Hello, world!");이 과정에서 React.c.. 2025. 2. 13.
[React-redux] ToDo List 로컬스토리지로 관리하기 노마드코더 react-redux 강의 챌린지 중 하나인 state를 로컬스토리지로 관리하기강의: https://nomadcoders.co/redux-for-beginners   초보자를 위한 리덕스 101 – 노마드 코더 Nomad CodersVanilla JS, Redux, Reactnomadcoders.co 먼저 기존 코드 중 store.js의 일부이다.여길 고쳐서 state를 localStorage로 관리하여 새로고침해도 state가 초기화되지 않도록 바꿔보자!redux-persist를 사용해도 되는데, 기존 프로젝트에서 recoil-persist를 사용한 적이 있고 직접 코드를 짜보는 김에 사용하지 않았다const reducer = (state = [], action) => { switch (a.. 2025. 2. 5.
[Study] CORS 1. CORS란,Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유라고도 부릅니다. CORS는 SOP에 의해 제한된 교차 출처 간 리소스 공유를 허용하기 위한 방법입니다.  여기서 SOP란, Same Origin Policy의 약자로 동일 출처 정책을 의미합니다. SOP는 현재 출처와 동일한 출처(Origin)의 리소스만 접근할 수 있도록 하는 정책입니다.  출처(Origin)은 Protocol + Host(Domain) + Port로 구성되며 모두 같은 경우가 동일 출처가 됩니다.이 세 가지 중 하나라도 다르면 다른 출처(Origin)으로 간주되어 CORS 에러가 발생합니다. 애플리케이션의 요구 사항이 복잡해지면서, 다른 도메인의 리소스를 활용하는 경우가 많아졌기 때문.. 2025. 1. 10.

티스토리툴바