분류 전체보기

[Error] addCase cannot be called with two reducers for the same action type

[Error] addCase cannot be called with two reducers for the same action type 특정 페이지에 리덕스 툴킷을 만지다 이러한 에러가 떴다 [에러가 난 코드] const initialState: RandomState = { randomInput: { loading: false, data: { cuid: "", result: "", type: "", }, error: null, }, randomRecInput: { loading: false, data: { cuid: "", result: "", type: "", }, error: null, }, }; const randomSlice = createSlice({ name: RANDOM, initialSta..

[React] Debounce_lodash 활용

Debounce란? Debounce는 함수를 여러번호출하고 마지막 호출에서 일정 시간이 지난 후 해당 함수의 기능이 동작하는 기법 Debounce는 호출 시 지정된 시간 이후 호출된 가장 마지막 이벤트만 실행되는 기술 Debounce 함수는 lodash의 debounce 함수를 사용할 수 있음 예를 들어 검색창에 "google"을 검색하는 경우 6번의 api 요청을 한다 → 비효율 Debounce를 사용하는 경우 함수는 6번 호출되지만 일정 시간이 지난 후 마지막 호출에서 api 요청을 함 api 호출 횟수가 5번에서 1번으로 감소 → 효율 scroll, resize, input, mousemove 와 같은 이벤트는 짧은 시간 간격으로 연속해서 발생 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출..

[React] redux

리덕스(redux) - 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리 redux를 사용하기 적절한 때 계속해서 바뀌는 상당한 양의 데이터가 있음 상태를 위한 단 하나의 근원이 필요함 최상위 컴포넌트가 모든 상태를 가지고 있는 것은 적절하지 않음 redux 기본 개념 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. 3. Changes are made with pure functions 변경은 순수함수로만 가능하다. 리듀서..

[React] 리덕스

이론상으로 리덕스를 한번 훑어봤지만 많이 사용되는 라이브러리치고는 사용 이유를 모르겠어서 다시 한번 정리하고자 함 Redux(리덕스)란 Javascript(자바스크립트) 상태 관리 라이브러리이다. 상태 관리 도구가 왜 필요한가? 상태 : React에서 State는 component 안에서 관리되는 것이다. 리액트는 여러 컴포넌트로 구성되어 있다. 각각의 컴포넌트마다 state가 있을 수 있고, useState와 같은 hook으로 상태를 관리할 수도 있다. state가 변경되면 컴포넌트가 리렌더링되어 변하게 된다. 리액트는 단방향 데이터 흐름( 부모 -> 자식) 으로만 데이터가 전달이 가능하기 때문에 자식 컴포넌트도 state에 맞게 변경하려고 한다면 props로 전달해야 한다. 만약 자식 컴포넌트에서도 ..

[React] 백엔드 프로그래밍 : Node.js의 Koa 프레임워크

Node.js 자바스크립트 엔진을 기반으로 웹 브라우저뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임 Koa Node.js 환경에서 웹 서버를 구축할 때 보통 Express, Hapi, Koa등의 웹 프레임워크를 사용 Koa는 Express의 기존 개발 팀이 개발한 프레임워크 Express는 미들웨어, 라우팅, 템플릿, 파일 호스팅 등과 같은 다양한 기능이 자체적으로 내장되어 있음 Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를 적용하여 사용 즉, Koa는 우리가 필요한 기능들만 붙여서 서버를 만들 수 있기 때문에 Express보다 훨씬 가벼움 Koa는 async/await 문법을 정식으로 지원하기 때문에 비동기 작업을 더 편하게 관리 미들웨어 Koa 애플리케이션은 미들웨어..

[React] 서버 사이드 렌더링

클라이언트 사이드 렌더링(CSR) UI 렌더링을 브라우저에서 모두 처리하는 것 서버에 html 문서를 요청하는 것이 아니라, 브라우저에서 자바 스크립트로 콘텐츠를 렌더링 하는 것 body 안에 id = "root"만 들어있고, 어플리케이션에 필요한 자바스크립트의 링크만 들어가 있다 html이 비어있기 때문에 처음 접속하면 빈 화면만 보이게 된다 [단점] 사용자가 첫 화면을 보기까지의 시간이 오래 걸릴 수 있다는 점 썩 좋지 않은 SEO(Search Engine Optimization) * SEO : 구글과 네이버와 같은 검색 엔진들은 서버에 등록된 웹 사이트를 돌아다니면서 웹 사이트의 HTML 문서를 분석해서 우리가 검색할 때 웹 사이트를 빠르게 검색할 수 있도록 도와준다 하지만 CSR에서 사용되어지는 ..

[React] 코드 스플리팅

코드 스플리팅(code splitting) 자바스크립트로 개발을 하고 배포하ㅁ는 과정에서 빌드(build) 과정을 거치게 되는데, 이 과정에서 모든 파일들이 하나로 합쳐지게 된다. → 즉, 우리가 index.js, components들로 나눴던 소스 코드들이 하나의 거대한 소스 코드로 합쳐진다는 말임 간단한 프로젝트라면 영향이 적겠지만, 거대한 프로젝트라면(특히 SPA 페이지에서) 길고 많은 자바스크립트 코드(.css, .html도 마찬가지)가 탄생합니다. 이 경우 인터넷 환경이 좋지 못한 곳에서는 거대한 소스 코드들을 불러오는데 상당한 로딩시간을 갖게 됩니다. 이를 개선하고자 코드에서 당장 사용하는 부분만을 로딩하고, 현재 필요하지 않은 코드 부분은 따로 분리시켜 나중에 로드함으로써 로딩시간을 개선하는..

[알고리즘] 브루트 포스(brute force)

브루트 포스 (brute force) Brute : 무식한 + Force : 힘 = 무식한 힘 완전탐색 알고리즘 가능한 모든 경우의 수를 모두 탐색하면서 요구조건에 충족되는 결과만을 가져옴 브루트 포스 알고리즘을 설계할 때는 해가 하나 이상 존재한다는 가정을 세우고 모든 범위를 탐색하기 때문에 무조건 정답을 찾을 수 있음 어떤 방식으로든 전체 탐색으로 문제를 해결한다면 브루트 포스 알고리즘으로 풀었다고 할 수 있음 선형 구조를 전체적으로 탐색하는 순차탐색, 비선형 구조를 전체적으로 탐색하는 깊이 우선 탐색(DFS), 너비 우선 탐색(BFS)가 기본적인 도구 장점 알고리즘을 설계하고 구현하기 매우 쉬움 복잡한 알고리즘 없이 빠르게 구현 가능 단점 알고리즘의 실행 시간이 매우 오래 걸림 메모리 효율면에서 매..

[React] 리덕스 미들웨어를 통한 비동기 작업 관리

API 서버를 연동할 때 API 요청에 대한 상태를 잘 관리해야 함 (ex) 요청이 시작되었을 때는 로딩중을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 한다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 한다. → 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면 '미들웨어'를 사용해 매우 효율적이고 편하게 상태 관리를 할 수 있음 미들웨어 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있음 리듀서가 액션을 처리하기 전에 미들웨어가 할 수 있는 작업 전달받은 액션을 단순..

[React] 리덕스를 사용해 상태 관리

리덕스를 사용할 때는 액션 타입, 액션 생성 함수, 리듀서 코드를 작성해야 함 이 코드를 각각 다른 파일에 작성해도되고 기능별로 묶어서 파일 하나에 작성해도 됨 actions, constants, reducers라는 세 개의 디렉터리를 만드는 방식 편리하지만 새로운 액션을 만들 때 세 종류의 파일을 모두 수정해야 하여 불편함 리덕스 공식 문서에서 사용되는 가장 일반적인 방식 Ducks 패턴 액션 타입, 액션 생성함수, 리듀서 함수를 기능별로 파일 하나에 몰아서 다 작성하는 방식 Ducks 패턴을 사용해 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 '모듈' 이라고 한다 [counter 모듈 ( modules/counter.js] 1. 액션 타입을 정의 - 액션 타입은 대문자로 정의 - 문자열 내용..

[React] 리덕스 라이브러리

Redux 가장 많이 사용하는 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있음 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있음 전역 상태를 관리할 때 효과적 단순히 전역 상태 관리만 한다면 Context API를 사용하는 것으로 충분함 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있어서 프로젝트의 규모가 큰 경우 리덕스를 사용 코드 유지 보수성을 높여줌 작업 효율 극대화 미들웨어라는 기능을 제공해 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해줌 액션 상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생 { type: "ADD_TODO", da..

[React] Context API

Context Context는 리액트 컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능 Context API는 Redux나 Mobx 같은 상태관리 라이브러리들의 기반이 됨 전역적으로 사용할 데이터가 있을 때 유용한 기술 예를 들면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용하는데 꼭 전역적일 필요는 없음 → 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트 간에 값을 전달하는 방법이다" 라고 접근을 하는 것이 좋음 컴포넌트에게 데이터를 전달할 때 Props로만 데이터를 전달하게 되면 깊숙히 위치한 컴포넌트에 데이터를 전달해야 하는 경우, 여러 컴포넌트를 거쳐 연달아 Props를 설정해주어야 하기..