FrontEnd

선언적 프로그래밍과 명령적 프로그래밍

선언적 프로그래밍과 명령적 프로그래밍 명령형 프로그래밍은 어떤 일을 어떻게 할 것인가에 관한 것이고, 선언적 프로그래밍은 무엇을 할 것인가에 관한 것입니다. example 식당에 갔습니다. 명령형 접근 (How) : 13번 이라고 적힌 표지판 아래에 있는 테이블이 비어있네요. 우리는 저기로 걸어가서 테이블에 앉도록 하겠습니다. 선언형 접근 : 2명 자리주세요. 명령형 방식은 실제로 자리에 어떻게 앉을지에 관심이 있습니다. 이를 위해서 어떻게 테이블을 잡아서 자리에 앉을지에 관해, 필요한 단계들을 절차적으로 나열해야 합니다. 반면, 선언형 방식은 오로지 내가 무엇을 원하는지에 관심이 있습니다. 자동차를 예로 들면 수동 스틱은 명령형 방식에 속하고 오토 스틱은 선언적 방식에 속합니다. 실제 코드로 예씨를 들..

Redux] 리덕스 툴킷 configureStore

ConfigureStore configureStore는 리덕스 코어 라이브러리의 표준 함수인 createStore를 추상화한 것입니다. 기존 리덕스의 번거로운 기본 설정 과정을 자동화한 것이라 할 수 있습니다. configureStore 함수는 reducer, middleware, devTools, preloadedState, enhancer 정보를 전달합니다. reducer 리듀서는 단일 함수를 전달하여 스토어의 루트 리듀서로 바로 사용할 수 있습니다. 또한 슬라이스 리듀서들로 구성된 객체를 전달하여 루트 리듀서를 생성하도록 할 수 있습니다. 이런 경우 내부적으로 기존 리덕스에 존재하는 combineReducer 함수를 사용해서 자동적으로 병합해 루트 리듀서를 생성하게 됩니다. middleware 리덕..

FrontEnd] Axios 와 Fetch의 차이점

들어가기 앞서 Axios에 대한 기본 정보를 알아보겠습니다. Axios는 node.js와 브라우저를 위한 HTTP통신 라이브러리입니다. 비동기로 HTTP통신을 가능하게 해 주며 return을 promise 객체(Json 형식)로 해주기 때문에 데이터 다루기에도 용이합니다. axios 와 fetch의 차이 axios fetch 요청 객체에 url이 있습니다. 요청 객체에 url이 없습니다. 라이브러리 설치가 필요합니다. 빌트인이라 설치가 필요없습니다. XSRF 보호를 해줍니다. 별도의 보호가 없습니다. data 속성을 사용합니다. body 속성을 사용합니다. data 는 object를 포함합니다. body는 문자열화 되어있습니다. status가 200이고 statusText가 ok면 성공입니다. 응답객체가..

Redux] 불변성 유지

상태 관리에서 불변성을 유지하는 이유 리액트와 리덕스는 setState나 dispatch 되었을 때 re-rendering이 일어나게 됩니다. 불필요한 재렌더링은 웹 성능을 저하시킬 수 있기 때문에 useCallback을 사용하게 되는데요~ 이 메소드는 state와 props의 변화를 감지해 변화가 일어날 경우만 렌더링을 허용합니다! 여기서 불변성이 필요한 이유는 무엇일까요? setState나 Dispatch를 이용해서 상태를 바꾸지 않는다면 re-rendering이 일어나지 않기 때문입니다. 또한 이전 state와 현재 state를 비교하여 최신 상태를 유지하기 때문에 불변성을 유지해야 합니다. 만약 state를 직접적으로 변경한다면 기존 상태도 수정이 되어버려 이전 state와 비교하는 것이 불가능합..

Redux] 리덕스를 사용하는 이유는 무엇일까? (feat.전역상태관리)

리덕스를 사용하는 이유 리액트로 프로젝트를 진행한다면 App 컴포넌트를 거쳐서 필요한 값을 업데이트하고 리렌더링 하는 방식으로 프로젝트가 개발되는데 위의 구조는 부모 컴포넌트에서 모든 걸 관리하고 아래로 내려주는 것이기 때문에 직관적이고 관리하는 것이 편하다는 장점이 있지만 프로젝트의 규모가 커졌을 때 보이는 컴포넌트의 개수가 늘어나면서 다루는 데이터도 늘어나고 그 데이터를 업데이트하는 함수들도 늘어나게 됩니다. 따라서 프로젝트의 규모가 커진다면 App의 코드가 길어지고 유지 보수하는 것이 힘들어집니다. 리덕스를 사용 시 프로젝트의 규모가 커진다면 상태관리를 컴포넌트 밖에서 할 수 있기 때문에 상태 값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 밖에서 관리할 수 있습니다! 리덕스를 프로젝트에 ..