[React] MSW (Mock Service Worker) MSW (Mock Service Worker)Mock Service Worker의 줄임말로, MSW(Mock Service Worker)는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다.실제 백엔드 서버 없이도 모의 응답(Mock Response)을 반환할 수 있게 해줍니다 *mock은 모조품, 가짜란 뜻*서비스 워커(Service Worker)는 웹 페이지와 별개로 백그라운드에서 스크립트를 실행할 수 있는 웹 브라우저의 기능입니다. 웹 애플리케이션의 성능을 향상시키기 위해 주로 오프라인 경험, 네트워크 요청 가로채기 및 처리, 푸시 알림 및 백그라운드 동기화를 처리하는 데 사용됩니다. 서비스 워커는 웹 애플리케이션에 프록시 서버.. [React] react-saga, react-thunk (redux-toolkit) 에 대해서 Redux만 있으면 안되나?Redux는 자바스크립트 앱을 위한 상태 관리 라이브러리로, 주로 React와 함께 사용됩니다.그러나 Redux 자체는 비동기 작업을 처리할 수 없기 때문에,Redux Thunk나 Redux Saga와 같은 미들웨어를 사용하여 비동기 로직을 처리합니다.이 두 미들웨어는 각각 특징과 사용 방법이 다릅니다.*미들웨어 = 리덕스의 기능을 향상시켜주는 것 Redux-Thunk?Redux Thunk는 Redux 애플리케이션에서 비동기 작업을 관리하기 위한 가장 기본적인 미들웨어입니다.Thunk는 함수를 반환하는 함수로, Redux에서 비동기 작업을 처리할 때 사용됩니다. 고차함수, 삼단함수 입니다.리덕스가 비동기 액션을 디스패치할 수 있도록 도와준다. thnk는 지연된 함수라는 프로.. [React / Next] Redux에 관하여 알아보자 - 2. 설치/사용 [React / Next] Redux에 관하여 알아보자 - 2. 설치/사용*설치 / 사용은 넥스트를 기준으로 했습니다.리액트와 사용법은 거의 비슷한데 next-redux-wrapper만 추가된 것이기에리액트만 사용하시는 분들도 저 라이브러리만 제외하고 사용하시면 될 것 같습니다. 필요한 라이브러리들React-ReduxReact-Redux는 Redux 상태 관리 라이브러리를 React 애플리케이션과 통합하기 위한 공식 바인딩입니다.이 라이브러리는 React 컴포넌트에서 Redux 스토어에 쉽게 접근하고 상태를 사용하거나 액션을 디스패치할 수 있도록 도와줍니다.Provider 컴포넌트: 애플리케이션의 최상위에 위치시켜 Redux 스토어를 React 컴포넌트 트리에 제공합니다.connect 함수: Redu.. [React / Next] Redux에 관하여 알아보자 - 1. 개념 [React / Next] Redux에 관하여 알아보자 - 1. 개념 Redux란?Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리입니다.주로 React와 같은 UI 라이브러리/프레임워크와 함께 사용되며,특히 대규모 애플리케이션에서 효과적인 상태 관리를 가능하게 합니다.Redux를 사용하면 애플리케이션의 모든 상태를 하나의 저장소(store)에 저장하여, 애플리케이션 전체에서 상태를 쉽게 공유하고 관리할 수 있습니다. 사용하는 이유?Redux를 사용하는 주된 이유는 애플리케이션의 상태를 예측 가능하고 효율적으로 관리하기 위함입니다.복잡한 애플리케이션에서 여러 컴포넌트 간에 상태를 공유하거나,상태에 따라 다르게 행동해야 할 필요가 있을 때 Redux를 사용하면 큰 도움이 됩니.. [React] useLayoutEffect, useTransition, useDeferredValue [React] useLayoutEffect, useTransition, useDeferredValue *mount = React 컴포넌트가 생성되어 DOM에 처음 삽입될 때의 과정.*unmount = 컴포넌트가 DOM에서 제거될 때의 과정 useLayoutEffectuseLayoutEffect는 useEffect와 매우 유사하게 작동하지만, 실행 시점이 다릅니다.useEffect는 모든 DOM 변경 후 비동기적으로 실행되는 반면, useLayoutEffect는 브라우저가 화면을 그리기 전에 동기적으로 실행됩니다.이는 DOM을 읽고 업데이트하는 작업이 화면에 렌더링되기 전에 필요할 때 유용하게 사용됩니다render자체가 화면을 바로 다시그리는게 아니라 랜더.. [React] useReducer, contextApi [React] useReducer, contextApi간단한 프로젝트에서 redux, recoil같이 상태관리 라이브러리말고,리액트에서 제공해주는 것으로 전체 상태관리를 할 수 없을까? 라는 질문에useReducer와 contextApi가 있습니다. useReducerReact의 Hook 중 하나로, 복잡한 컴포넌트의 상태 관리하는 데 사용됩니다. 상태 관리 훅특히 여러 하위 값이 있는 복잡한 정적 로직을 다룰 때나 다음 상태가 이전 상태에 의존적일 때 유용합니다.이는 Redux의 reducer와 유사한 패턴을 따르며, (state, action) => newState의 형태로 리듀서 함수를 작성합니다.useReducer는 현재 상태(state)와 함께 dispatch.. [React] useInterval 을 깊이 분석해보자 useIntervaluseInterval은 callback, delay를 인자로 받아서 setInterval이 호출할 함수와 setInterval의 간격/멈춤을 조절할 수 있는 커스텀훅 입니다.이에 관해 강의를 보다가 그냥 이런게 있구나 하고 쓰려다가,왜? 이렇게 만들었지? 이렇게 만들면 코드도 짧고 편하지 않나? 라고 생각했다가그 이유를 알게 되면서아 이거는 좀 알아둬야 나중에 비슷한 경우가 생기더라도코드를 분석하고 이해할 수 있겠다라고 생각해서 블로그에 남기기로 했다. useInterval 코드 분석// useInterval.jsfunction useInterval(callback, delay) { const savedCallback = useRef(); .. [React] React.memo는 정확히 언제 왜 쓸까? (feat. PureComponent, ShouldComponentUpdate) 리액트를 사용하게되면서 랜더링 최적화 / 성능 최적화에 대한 이야기를 꽤 들어왔었다. 그러다보니 그럴때 사용하는 usecallback, usememo, react.memo 가 있고 어떻게 사용하는 지도 알고는 있었다. 그런데 리액트 강의를 들으면서 react.memo에 관해 좀 더 구체적으로 알게 되었는데 아 이럴때 사용하는구나 라고 구체적으로 알게 되었다. 아무래도 내용을 겉으로만 알고 있던것 같았다...ㅠ 그 내용을 블로그에 남기려고 한다. 1. Class Component 에서 랜더링 최적화 ShouldComponentUpdate 정의: shouldComponentUpdate는 클래스 컴포넌트에서 사용되는 생명주기 메서드입니다. 기능: 이 메서드는 컴포넌트가 업데이트되기 전에 호출되며, true 또.. [React] useState 초기화 값에 함수 선언/호출이 들어가면 어떻게 될까? useState는 리액트를 배우고나서 생각없이 사용하던 함수중 하나이다. 실행하면 값과 그 값을 변환시켜줄 수 있는 함수를 객체로 리턴시켜준다. 초기값을 설정할 수 있다 정도였다. 그런데 리액트 수업을 듣던 중에 값을 리턴하는 함수의 호출을 초기값을 지정하는 부분에 설정했을 때, 헷갈리기 시작했다. 데이터는 정상적으로 초기값을 지정해주는데, 해당함수의 호출을 넣었기 때문에 함수컴포넌트의 특성상 상태가 바뀌면 컴포넌트 전체가 리랜더링되면서 해당 함수호출도 다시 실행되고, 그럼 값을 또 리턴한다. 그런데.. 초기값은 그대로다.. 그래서 블로그에 올리기로 생각했다. useState React에서 useState를 사용할 때 함수를 초기 상태로 설정하는 경우, 해당 함수는 컴포넌트가 처음 렌더링될 때 단 한 번.. 리액트 컴포넌트의 생명주기(Life Cycle) 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(lifecycle)라고 부릅니다. 컴포넌트는 생명주기마다 함수를 가지고 있는데 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수도 있습니다. · 생명주기 함수 살펴보기 생명주기 함수는 render()함수를 포함하여 총 8종의 함수가 있습니다. 생명주기 함수는 리액트 엔진에서 자동으로 호출합니다. · constructor(props)함수 - 맨 처음 생성될 때 한 번만 호출 - 이 함수를 사용할 때 super(props)함수를 가장 위에 호출해야 합니다. - super() 함수에는 프로퍼티, 생명주기 상태 등을 초기화하는 중요한 과정을 포함하고 있습니다. · render()함수 - 데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호.. 앵귤러 VS 리액트 VS 뷰 · 각각의 특징 1. 앵귤러 (Angular) 앵귤러는 프로젝트 생성에서부터 코드 최적화 작업에 이르기까지 모든 작업에서 사용할 수 있는 폭넓은 프레임워크이기 때문에, 전체적인 개발 과정에 있어서는 가장 다루기 힘든 프레임워크라고 할 수 있습니다. 하지만 앵귤러는 선택할 수 있는 많은 기능들이 있기에, 개발자들은 어떠한 호스트(host)앱이라 하더라도 간단한 명령을 통해 완전히 최적화된 번들(bundle)앱을 만들 수 있습니다. - 구글이라는 전세계적인 기업의 지원 - 가장 빠르게 릴리즈된 JS 프레임워크(2010년) - 큰 커뮤니티 - 양방향 바인딩 - TypeScript 가장 먼저 도입 - 가장 체계적이고 잘 정리되어있는 문서 - 가장 복잡하고 큰 러닝커브 ( 내부 동작 메커니즘 등 포함 ) => 개.. 리액트 프로퍼티(props), 상태(state) 관리하기 · props 프로퍼티 프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용합니다. 이것을 '단방향으로 데이터가 흐른다'라고 표현합니다. 이 때 값을 받은 컴포넌트에서는 프로퍼티 값은 직접 수정할 수 없다는 특징이 있습니다. 프로퍼티를 받은 자식입작에서는 읽기 전용인 데이터이다. · state 상태 props와 다르게 값을 바꿔야 하는 경우 사용합니다. '값을 저장하거나 변경할 수 있는 객체'로 보통 버튼을 클릭하거나 값을 입력하는 등의 이벤트와 함께 사용됩니다. 컴포넌트 내부에서 선언하며, 내부에서 값을 변경할 수 있다. 자신이 들고 있는 값이며 props와 비교한다면 쓰기전용이라고 볼 수 있다. 주의점 1. 생성자(constructor)에서 반드시 초기화해야 합니다 2. state값을 실행.. 이전 1 2 다음
