carrots-day

Vue 설치 오류 보편적으로 잘 설치되겠지만 분명 오류가 발생하는 케이스가 존재한다. 언제나 처럼 갓글에서 검색하면 그만이지만 따로 정리해본다. 👽 웬만하면 기본 값으로 설치해라. nodeJS 공홈에서 권고하는대로 설치해라. 제발 npm, yarn 명령어에서 오류가 발생하는 경우 진행 중 오류가 발생하는 경우는 거의 대부분 nodeJS 버전의 문제일 가능성이 크다. 따라서 설치된 nodeJS를 삭제하고 다른 LTS버전이나, 최신버전을 설치해서 해보면 될것이다. npm : command not found 오류가 발생하는 경우 npm : command not found 라는 오류가 발생했다는 것은 nodeJS 설치시 npm 모듈이 같이 설치되는데 이를 찾지 못한다는 뜻이다. 한마디로 이것또한 nodeJS의 ..

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..