carrots-day

React Hook React Hook은 리액트 16.8 버전 이후 추가된 기능이며, 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 모음이다. React의 컴포넌트 선언 방식은 함수형, 클래스형 2가지로 나뉜다. 사실상 클래스형 컴포넌트가 주를 이루었는데, 이는 클래스형이 React에서 제공하는 LifeCycle 함수라던지, state 활용 등 컴포넌트 구조화에 용이하기 때문이다. 하지만 클래스형 컴포넌트가 갖는 단점을 극복하고자 함수형 컴포넌트 사용을 적극 권장했고, 클래스형 컴포넌트에서만 사용가능했던 기능을 제공하기 위해 v16.8 부터 React hook을 통해 기능을 제공한다. 👽 React hook은 함수형 컴포넌트를 위한 추가 셋이다. 🤮 Class형 컴포넌트의 단..

Typescript 시작 타입스크립트의 기본은 변수와 함수에 타입이라는 제약을 부여해 강제성을 높인다. 변수나 함수의 값이나 결과의 형태를 고정하여 추적 및 유지보수성을 높이는데에 있다. 어떤 타입이 존재하며, 어떤식으로 선언하여 사용하는지 알아보자. .ts 파일 타입스크립트로 작성된 코드는 .ts 확장자를 갖는다. 어렵게 생각할 필요없이 자바스크립트에 타입을 부여하는 문법을 사용할 수 있는 형태라고 생각하면 쉽다. 기본 변수, 함수 선언 및 실행 등 기존에 .js에서 사용하던 방법 그대로 사용하면 된다. 변수 타입 String 타입 작은따옴표('), 큰따옴표(")로 감싸지는 문자열 타입이다. let carrotName:string = 'carrots'; let text1:string = "My name..

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개 정도라면 상관없지만 몇 백개의 컴포넌트가 연결된 구조라면? 그렇게 복잡한 구조가 아님에..