carrots-day

Vue 시작 Vue는 React와 달리 많은 사전 지식을 필요로 하지않는다. 일단 필수적으로 필요로 하는 지식만 추리면 다음과 같다. Javascript HTML/CSS Webpack/babel OR Vite nodeJS Vue역시 깊게 들어가면 학습이 필요한 내용은 있지만 React에 비해 범위가 넓지않다. 차근차근 복기해보자. React의 create-react-app와 비슷하게 vue/cli를 통해 Vue 앱 구성을 로드할 수 있다. 👽 본 포스팅과 이후 Vue포스팅은 모두 Vue3를 기준으로 작성한다. 구버전도 뭐 큰 차이는 없을테니 그냥 하자 vue/cli Vue CLI는 Vue Command Line Interface의 약자로 vue 개발 환경을 설정해주는 도구 Vue또한 구조자체는 간단하지만..

Redux 기타 Redux에 대해 정리하면서 추가적으로 알아야하는 개념이나 통상적으로 만드는 디자인 형태에 대해 정리할 필요성을 느꼈다. Action creator 함수를 선언해야하는 필요성, 리듀서를 분리해서 구현하는 이유, persistReducer 추가 모듈을 사용해야하는 이유 등 알아야할 개념들이 많다. 이 글에서 정리해본다. react-saga, react-thunk 이런건 다음 포스팅에서 보자. 졸립다2. Action creator 쉽게 말해 액션 객체를 반환하는 순수함수다. 불필요한 작업을 극혐하는 사람으로써 굳이 이렇게 함수를 선언해서 관리포인트를 늘려야하는 이유에 대해 궁금해졌다. 의외로 답은 간단하다. 인간은 다른 인간을 못믿기 때문이다. 리듀서 정보 // reducer const re..

Redux middleware 액션을 dispatch 했을대 reducer에서 이를 처리 하기 위해 앞서 사전이 지정된 작업들을 실행 (액션 과 리듀서 중간에 위치) 리덕스 미들웨어는 액션과 리듀서 함수 사이의 중간자 역할로, 해당 미들웨어를 통해 전달받은 액션을 제어해 취소하거나 다른 종류의 액션을 추가적으로 디스패치하는 등 효율적이고 편하게 상태 관리를 할 수 있도록 해준다. Context API 또는 MobX에서는 제공하지 않는 점에서 강점을 지닌다. middleware의 필요성 💢 지금 떠오르는 생각은 그럼 왜 쓰는가이다. 사실상 리듀서상에서 어느 정도는 처리가 가능한 부분이라 생각되기 때문이다. 왜 쓰는가에 집중해보자. 기본 리덕스 프로세스 : 액션 객체 생성 > 디스패치 > 리듀서 실행 > 스..

react-redux React는 상태관리 대안으로 Redux를 사용하는 것을 권장한다. react-redux 모듈을 통해 React에서 특정 hook을 제공함으로 Redux를 보다 용이하게 사용할 수 있도록 해준다. 전 포스팅에서 설명한대로 Redux를 통한 상태관리로 얻을 수 있는 이점은 다음과 같다. useState를 사용하여 state를 관리하기 보단 외부 모듈을 통해 전역적인 state를 선언하고 관리할 수 있다. props > props > props로 하위 컴포넌트에 전달하는 불필요한 구조를 줄여준다. 👽 이번 포스팅에선 redux-toolkit, Thunk, combineReducers등 Redux의 확장 모듈에 대해서는 다루지 않겠다. 먼저 원초적인 Redux 구조에 대해 알아볼 필요가 ..

React의 상태관리 React 앱 구축에 있어 가장 중요시되는 부분은 상태관리다. 어떤 상태에 대한 관리인지 명확히하고 Redux에 대한 개념설명이 이어져야 한다고 생각한다. 상태관리란 말그대로 state에 대한 관리를 일컫는 말이다. 컴포넌트 state를 통해 화면과 데이터의 양방향 바인딩을 지원하고, 해당 값을 props 형태로 하위 컴포넌트로 전달한다. 👽 props, state에 대한 내용은 해당 포스팅을 참고바란다. > [ React.05.props, state ] [ React.05.props, state ] React props, state에 대해 알아보자 velog.io 이때 하위 컴포넌트가 1, 2개 정도라면 상관없지만 몇 백개의 컴포넌트가 연결된 구조라면? 그렇게 복잡한 구조가 아님에..

생명주기 hooks 기존 React에서는 클래스형 컴포넌트에서만 생명주기 메소드를 제공했다. 하지만 최근 함수형 컴포넌트 사용을 권장하는 추세기 때문에 기존 생명주기 메소드에 상응하는 기능을 필요로 했고, 이에 React는 useState, useEffect hook으로 더 간략하고 이해가 쉽게 해당 기능을 제공한다. 이외 렌더링 관련 많은 hooks가 있지만 useState, useEffect 위주로 포스팅을 풀어본다. 일단 해당 포스트를 읽기 전, Class형 컴포넌트의 이해를 필요로 한다. 참고 > LifeCycle 함수 - Class형 Component [ React.05.LifeCycle 함수 - Class형 Component ] React LifeCycle React는 각 컴포넌트마다 고유의 ..

React LifeCycle React는 각 컴포넌트마다 고유의 생명주기(LifeCycle)을 가진다. class형 컴포넌트의 render 함수 전후로 각 생명주기 함수를 갖는다. import React, { Component } from "react"; class Banner extends Component { render() { return hello carrots; } } export default Banner; Banner라는 컴포넌트가 있다 가정해보자. DOM에 그려지고 없어지기 까지 과정(Life Cycle)이 있고 React에선 각 생명주기에 대한 컨트롤을 위해 메소드를 제공한다. 각 메소드는 Class형 컴포넌트에서만 사용가능하며 다음과 같은 프로세스를 지닌다. LifeCycle Diagr..

React props, state 둘다 react 데이터 핸들링 javascript 객체로 key, value 형태를 띄며 데이터 원 주인이 누구인가에 따라 구분된다. props는 부모로 부터 전달받은 데이터로 외부에서 주입되는 객체다. 한마디로 위에서 아래로 내려오는 구조며 변경이 불가능하다. state는 각 Component가 소유하는 영역으로 내부에서 사용되는 데이터 객체다. 👽 궁극적으로 함수의 파라미터(props)와 함수 내 지역변수(state) 차이로 이해하면 된다. 그리고 기본적으로 Component의 화면은 함수 내 지역변수로 인해 제어된다. props 부모 Component로 부터 전달받은 데이터 객체 최초 렌더 이후 자동 리렌더링 되지 않음 (생명주기 메소드 사용해야됨) 읽기전용 (데이..