본문 바로가기

coding-heesong86

리코일, Selectors atoms, selectors를 입력으로 받아들이는 순수 함수다. 상위 atoms, selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링된다. const fontSizeLabelState = selector({ key: 'fontSizeLabelState', get: ({get}) => { const fontSize = get(fontSizeState); // atom에 의존성이 생김 const unit = 'px'; return `${fontSize}${unit}`; }, }); get속성은 계산될 함수다. 전달되는 get 인자를 통해 atoms와 다른 sele.. 2023. 3. 30.
리코일, Atoms Atoms Atoms는 상태의 단위이며, 업데이트와 구독이 가능. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영해 재렌더링된다. atoms는 런타임에서 생성될 수도 있다. Atoms는 리액트의 로컬 컴포넌트의 상태 대신 사용할 수 있다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다. const fontSizeState = atom({ key: 'fontSizeState', default: 14, }) Atoms는 디버깅, 지속성 및 모든 atoms의 map을 볼 수 있는 특정 고급 API에 사용되는 고유한 키가 필요하다. 두개의 atom이 같은 키를 갖는 것은 오류이기 때문에 키 값은 전역적으로 고유하도록 해야한다. 리액트 컴포넌트의 상태처럼 기본.. 2023. 3. 30.
리액트 드래그앤드랍 구현기 react-beautiful-dnd를 사용하여 구현하였다. 작업 메모 🏷 드래그 영역 변경하기 {...provided.dragHandleProps}ㅍ 를 드래그 적용 시키고 싶은 엘리먼트에 넣어준다. {(provided) => ( DRAG AREA HERE item )} 더보기 실패작 `{/* {dragDropList.map((item, idx) => ( ))} */}` ``` ``` import { View, Text } from '@pip/theme'; ``` import React from 'react'; import styled from 'styled-components'; import type { Identifier, XYCoord } from 'dnd-core'; import { ReactCo.. 2022. 9. 20.
WEB3 :: 메인넷 vs 테스트넷 메인넷 출처 입력 메인넷은 블록체인 프로토콜이 완전히 개발, 배포되는 시기를 설명하는데 사용되는 용어. 암호화폐 거래가 블록체인에 브로드캐스트, 검증 및 기록되고 있음을 의미합니다. 테스트넷 출처 입력 메인넷 네트워크와 달리 테스트넷이라는 용어는 블록체인 프로토콜이나 네트워크가 아직 가동되지 않고 최대 용량으로 실행되지 않을 때를 나타낸다. 테스트넷은 프로그래머와 개발자가 시스템이 안전하고 메인넷 출시를 위한 준비가 되었는지 확인하기 전에 블록체인 네트워크의 모든 측면과 기능을 테스트하고 문제를 해결하는 데 사용됩니다. 즉, 테스트넷은 블록체인 프로젝트의 프로토타입으로만 존재하는 반면, 메인넷은 사용자가 암호화폐 거래(또는 분산 원장에 기록되는 모든 종류의 디지털 데이터)를 주고받을 수 있도록 완전히 개.. 2022. 8. 23.