안녕하세요! 프뚜입니다. Atoms과 Seelctor를 통해 상태 관리 및 사용할 수 있는 Recoil에 대해 포스팅합니다. [Atomes] - 전역으로 읽고 쓸 수 있습니다. - 상태의 단위이며 업데이트와 구독이 가능합니다. - 상태가 업데이트되면 구독된 컴포넌트는 새로운 값을 가지고 재렌더링됩니다. [Seelctor] - 전역으로 읽고 쓸 수 있습니다. - Selector는 Atoms에서 파생된 상태의 일부이며, 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물입니다. - Atoms 또는 Selectors가 업데이트 된다면 하위 selector 함수도 재실행(재랜더링)됩니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # Recoil 설치하기 # 202..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue를 사용하다보면 state를 저장하거나 전역변수처럼 어디서든 사용해야할 때가 있습니다. 예를 들어 부모와 자식 관계가 깊은 상황에 부모의 값을 변경하기 위해선 emit으로 많은 자식을 거쳐야합니다. 이럴 때 사용하는 vuex에 대해서 포스팅해보겠습니다. (링크) mutations은 state의 값을 변경할 때 쓰이며, actions은 method로 사용됩니다. 1. mutations 사용하기 import { createStore } ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue를 사용하다보면 state를 저장하거나 전역변수처럼 어디서든 사용해야할 때가 있습니다. 예를 들어 부모와 자식 관계가 깊은 상황에 부모의 값을 변경하기 위해선 emit으로 많은 자식을 거쳐야합니다. 이럴 때 사용하는 vuex에 대해서 포스팅해보겠습니다. 1. vuex 설치하기 (링크) npm install vuex@next --save 2. store 폴더 및 store.js 생성하기 # vue store 관련된 파일은 여기에서 관리..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue state 변수를 감지하여 실행하는 프로퍼티 watch에 대해 알아보도록 하겠습니다. ※ state(ref, reactive)로 선언된 변수가 아니면 watch를 사용할 수 없습니다. 1. watch 프로퍼티를 import 하기 import { ref, watch } from 'vue'; 2. watch 프로퍼티 사용하기 # watch(ref변수명, (현재 값, 이전 값) => { 구현체 }); watch(searchText, (c..