jin's Blog

Redux Thunk로 비동기 작업 처리하기Redux Thunk는 Redux에서 비동기 작업(예: HTTP 요청)을 처리할 때 사용하는 미들웨어다. Redux는 기본적으로 객체 형태의 액션만 처리할 수 있지만, Thunk를 사용하면 함수 형태의 액션도 디스패치할 수 있다. 이 글에서는 Redux Toolkit을 사용하여 Thunk로 HTTP 요청을 처리하는 방법을 알아보자.Thunk란 무엇인가?Thunk는 액션을 함수 형태로 만들어 디스패치할 수 있도록 도와주는 미들웨어다. 일반적으로 HTTP 요청과 같은 비동기 작업에서 많이 사용된다. Thunk를 통해 비동기 작업을 실행하고, 작업 결과에 따라 Redux 상태를 업데이트할 수 있다.Redux Thunk로 HTTP 요청 처리하기여기서는 JSONPlace..

프론트엔드 개발에서 사용하는 상태 관리 및 HTTP 요청 라이브러리들최근 프론트엔드 개발자들은 애플리케이션의 상태 관리와 HTTP 요청을 효과적으로 처리하기 위해 다양한 라이브러리를 사용하고 있다. 이번 글에서는 가장 자주 사용되는 라이브러리들의 특징과 장단점을 간단히 정리하고, 최종적으로 어떤 상황에서 무엇을 추천하는지 이야기해보겠다.1. React Context APIReact Context API는 React에서 기본으로 제공하는 상태 관리 도구로, 전역 상태를 쉽게 관리할 수 있도록 도와준다.장점:내장 기능으로 별도의 설치가 필요 없다.간단한 상태 관리에서 효율적이다.단점:상태가 복잡하거나 업데이트가 잦은 경우 성능 저하가 발생한다.비동기 작업을 처리하려면 추가 설정이 필요하다.React Cont..

기본적으로 redux toolkit을 이용해서 state 공유 및 관리와 함수 사용등을 알았다.이제 slice를 용도별로 분류하고 여러 개의 state를 사용하는 방법을 알아보자.  처음에는 store폴더에 index.js로 모든 redux 함수들을 모아놨었지만지금은 용도별로 분류했다.여기서 사용한 것은 counter와 auth 이다. 1. authimport { createSlice } from "@reduxjs/toolkit";const initlAuthState = { isAuthenticated: false };const authSlice = createSlice({ name: "auth", initialState: initlAuthState, reducers: { login(state..

import { configureStore, createSlice } from "@reduxjs/toolkit";const counterSlice = createSlice({ name: "counter", initialState: { counter: 0 }, showCounter: true, reducers: { increment(state) { state.counter = state.counter + 1; }, decrement(state) { state.counter = state.counter - 1; }, increase(state, action) { state.counter = state.counter + action.payload; ..

Redux가 굴러가는 원리를 알아보기 위해 몇가지 코드를 작성했다.// import { legacy_createStore } from "redux";const redux = require("redux");//항상 2개의 파라미터를 받아야한다.const counterReducer = (state = { counter: 0 }, action) => { if (action.type === "increment") { return { counter: state.counter + 1, }; } if (action.type === "decrement") { return { counter: state.counter - 1, }; } return state;};const ..

Redux가 필요한 이유에 대해 알아보자.React로 프로젝트를 개발하다 보면, 점점 복잡해지는 상태(state) 관리에 직면하게 된다. 단순한 컴포넌트 수준의 상태 관리로는 충분했던 초기 단계와 달리, 여러 컴포넌트 간의 상태 공유가 필요해질 때 상태 관리의 복잡성은 급격히 증가한다. 이때 Redux는 강력한 도구로 등장한다. 이번 글에서는 Redux가 왜 필요한지, 그리고 어떤 상황에서 유용하게 사용할 수 있는지 알아보자.상태 관리의 복잡성 문제React에서 컴포넌트 간 데이터를 공유하려면 일반적으로 props를 사용한다. 하지만 다음과 같은 문제가 발생할 수 있다.상태가 여러 컴포넌트를 거쳐 전달된다.데이터를 자식 컴포넌트로 전달하기 위해 중간 컴포넌트들이 props를 단순히 전달하는 경우가 생긴다..

2025년 시작부터 React를 빡세게 공부하면서새로운 다짐이라는 걸 해본다. 빠르게 React 강의를 완강하고, Next에 대한 지식 쌓고Rn이야 React와 비슷할테니까..그리고 일단은 웹으로 어플 배포도 할 수 있고올해 UTS 수업으로 IOS 수업도 있으니그 전까지 React/Next 를 빠르게 익숙해지자.. 그리고 나서는 1. 내가 만약 사업을 한다면 쓸 웹사이트 만들기.2. 어플리케이션 배포해보기.3. 외주 받아서 웹사이트 만들기(카페, 식당 등) 잘되든 말든 이거 자체가 포트폴리오가 된다.졸업 전에 많은 경험을 해보자.. 솔직히 개발자로 경력도 없고 어떤 길을 가야할지 여전히 갈팡질팡이지만일단 뭐라도 해보자. 모든 계획이 실패하더라도이 경험을 가지고호주 회사 어디든 도전하면 된다.

마무리 하는 과정에서 다양한 에러를 마주했다.많은 시간을 썼다. 백엔드는 건드리지도 않았는데 아래의 코드를 진행하면 백엔드 서버가 꺼지고에러가 발생했다. 아무래도 프론트에서 내가 뭔가 실수를 해서 발생한 오류 같은데데이터는 올바르게 전송되고 백엔드에서도 올바르게 받아지길래 에러를 살짝 조정했다. 아무래도 백엔드에서 파일을 읽고 쓰는 곳에서 문제가 있었던 듯 하다.아래는 수정된 백엔드 코드이다.app.post("/orders", async (req, res) => { try { const orderData = req.body.order; if (!orderData || !orderData.items || orderData.items.length === 0) { return res.st..

API, 이 부분이 복잡하고 헷갈리는 부분이다. 상당히 많은 파라미터의 데이터 교환이 이루어지고useState부터 useCallback, useEffect까지 거의 대부분의 기능이 나오는 거 같다.그 말은 이 부분에 대한 자세한 이해가 있어야 한다는 말 같다. 일단 백엔드와의 api교환이 중요하고 웹프로그래밍의 끝은 api이기 때문에 집중해 보자.사실 어려워진 이유도 코드를 중복해서 쓰지 않고 간결하고 유용하게 쓰기 위해서이다.api를 주고받을 때마다 직접 코드를 하나하나 써서 주고받을 수 있지만 hook을 통해서일괄 관리 할 수 있기 때문에 해당 방법을 잘 살펴봐야 한다.1. SentHttpRequest네이밍은 다르게 해도 상관없지만 대부분의 httpRequest의 형태는 비슷하다, Endpoint의 ..

간단한 웹 프로젝트, 백엔드로 부터 데이터를 받아와서 아이템 리스트를프론트에 뿌리고 유저가 선택한 아이템을 카트에 담았다가구매를 누르면 백엔드에서 해당 목록을 받을 수 있는 프로젝트 중헷갈려서 기록해놔야 할 것들을 정리해보자. 1. createContext / useContext 웹 빌드를 하다보면 state를 공유해서 써야할때가 많다. 예를들면 유저가 버튼을 통해서 장바구니에 담았을때장바구니 속 선택된 Item들이 공유가 되어야한다. 또는 모달과 같은 컴포넌트에 유저가 선택한 목록이 공유가 될 때 등, 이런 경우 전체 컴포넌트를 한번에 관리할 수 있도록 createContext를 통해서 만들고 useContext를 이용해서 사용할 수 있다. 그래서 보통 store라는 폴더를 통해 관리하고, create..