ella-front-dev.log

[JS] Lodash

Fri, 28 Jul 2023 08:12:26 GMT

_.isNil(value) : Checks if value is null or undefined.

_.omitBy(targetObj, predicate)

  extSearch(xpos, ypos, keyword, sort) {
    const EXT_SEARCH_URL = '/external/extsearch?'

    const params: any = _.omitBy(
      {
        xpos: xpos,
        ypos: ypos,
        keyword: keyword,
        sort: sort,
      },
      _.isNil.bind(_),
    )

    console.log('extSearch / params', params)

    return axios.get(EXT_SEARCH_URL, { params: params }).then((response) => {
      return Promise.resolve(response.data)
    })
  }

_.find() :

lodash find() 객체 값 찾기

  const pickup: any = _.find(this.freightDataStructure.destinations, {
    type: 'PICKUP',
  })

_.isEmpty() :

lodash isEmpty() 정보 및 예제

_.isEqual() :

  selectItem(item) {
    if (_.isEqual(this.addressType, 'pickUp'))
      this.$emit('pickUpAddressItem', item)
    else if (_.isEqual(this.addressType, 'dropOff1'))
      this.$emit('dropOffAddressItem1', item)
    else if (_.isEqual(this.addressType, 'dropOff2'))
      this.$emit('dropOffAddressItem2', item)
    else if (_.isEqual(this.addressType, 'route'))
      this.$emit('routeAddressItem', item)

    this.selectedItem = item.parceladdress
    this.menuOpen = false
  }

[TIL] 230711

Tue, 11 Jul 2023 09:04:36 GMT

Loadsh

Lodash Documentation

**_.isNil(value) : Checks if value is null or undefined.

_.omitBy(targetObj, predicate)

[lodash] omitBy() 알아보기

  extSearch(xpos, ypos, keyword, sort) {
    const EXT_SEARCH_URL = '/external/extsearch?'

    const params: any = _.omitBy(
      {
        xpos: xpos,
        ypos: ypos,
        keyword: keyword,
        sort: sort,
      },
      _.isNil.bind(_),
    )

    console.log('extSearch / params', params)

    return axios.get(EXT_SEARCH_URL, { params: params }).then((response) => {
      return Promise.resolve(response.data)
    })
  }

_.find() :

lodash find() 객체 값 찾기

  const pickup: any = _.find(this.freightDataStructure.destinations, {
    type: 'PICKUP',
  })

_.isEmpty() :

lodash isEmpty() 정보 및 예제

_.isEqual() :

  selectItem(item) {
    if (_.isEqual(this.addressType, 'pickUp'))
      this.$emit('pickUpAddressItem', item)
  }

Auth2.0 와 JWT의 차이

OAuth 2.0, JWT

[TIL] 230705

Wed, 05 Jul 2023 11:48:10 GMT

Git

git pull —rebase

"git pull" vs "git pull --rebase"

문제 : pull 할때 merge가 되면서 히스토리가 남게 된다. git tree를 깔끔하게 관리하기위해서 현재 프로젝트에서는 남기지 않는다고 한다.
방법 : 발생하는 이유는 내가 해당 브런치 원격에 push하지 않은 commit이 있을 때 pull을 받게되면 생성된다.
- commit이 있을때는 git pull —rebase을 사용해서 pull을 받으면 된다.
해결: git pull —rebase 이용

원격에 올라간 Commit 되돌리기

문제 : 잘못된 Merge Commit이 원격까지 올라가서 이를 되돌려야했다.
방법 : 2가지 방법을 찾았다.
- 방법1 > 히스토리 없이 로컬에서 커밋 되돌린 후 강제 푸시
  
  git reset —hard HEAD~1 / git reset —hard ‘커밋id’ : 커밋 되돌리기 git push -f origin [원격 브런치] : 강제 푸시
  
  *주의 사항 : 협업할때 해당 원격에 올린 커밋을 다른 팀원이 받아가게되면 이전 소스가 그대로 원복 될 수 있다.
- 방법 2> 히스토리 남기고 되돌리기 git revert —hard ‘커밋id': 하나의 커밋만 revert git revert --no-commit HEAD~3 : 다수의 커밋을 revert git commit -m 'Revert: "Commit 문구": Revert 했다는 커밋메시지 작성 후 PUSH

[원격 저장소에 올라간 커밋 되돌리기](https://jupiny.com/2019/03/19/revert-commits-in-remote-repository/)

해결 : 현재 메시지가 깨끗하게 유지되어야해서 히스토리가 남으면 안되었다. 그래서 모든 팀원에게 얘기하고 그들이 풀받기 전에 방법 1로 적용했다.

[TIL] 230629

Thu, 29 Jun 2023 11:58:16 GMT

Vue

storeToRefs :

해결방안2: CustomModal 형태로 여기서 제공하는 것들을 커스터마이징해서 만들어서 사용한다.

Recommended usage

[TIL]221228

Wed, 28 Dec 2022 23:26:14 GMT

이슈

해시태그

문제 : dynamic ref를 설정해서 getBoundingClientRect() 값을 가져오지 못한다.
원인 : Element tag가 아니라 Component를 loop 돌리기 때문이다.

해결 :

  //@/components/base/create-hashtag/TagInput.vue

문제2: 해당 아이템이 window scroll 기준 포지션을 나타낸다. 내부 컨테이너 안의 아이템을 ScrollTop을 시켜주는 방법은?
해결:
- 방법) scrollIntoView() 사용
  
  element.scrollIntoView - Web API | MDN

```jsx
export default defineComponent({
    setup(props, { emit }) {
        const menuItemRef = ref([])
        const handleOnChoiceTag = () =>{
             menuItemRef.value[choiceTagsIndex.value].scrollIntoView()
    }
    }
})
```

문제 3: 해당 아이템을 하나 내릴때마다 내부 스크롤이 아이템 하나씩 내려간다.

해결 방안 : 해당 아이템이 화면에 나타나지 않은 것을 감지해서 그때 ScrollTop으로 내려갈 수 있도록 한다.

아래 함수를 이용해서 해당 아이템이 현재 화면에 있는지 체크 할 수 있다.

export const detectElementInViewport = (el: Element, scrollContainer: HTMLElement | null) => {
const rect = el.getBoundingClientRect()
const scrollRect = scrollContainer?.getBoundingClientRect()
return (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= scrollContainer!.clientHeight + scrollRect!.top &&
  rect.right <= scrollContainer!.clientWidth + scrollRect!.right
)
}

vue-final-modal

https://github.com/vue-final/vue-final-modal/issues/10

Node와 Element

Node List vs Element Collection

HTMLCollection vs NodeList

[TIL] 221222

Fri, 23 Dec 2022 00:02:04 GMT

Hashtag Component

분석

제목 / 에디터 / 해시태그 ⇒ 글자 제한 Byte 기준으로 계산해주는 라이브러리 사용
에디터
- 제목 완료 후, 키보드로 에디터로 이동 가능
- 한글 5000자(영문 10,000byte) 까지 입력가능
- 10장까지 등록 가능하고 10장 이상되면 비활성화
- 글자 최소 10자 이상이어야 저장가능
해시태그
- prefix # 사용
- 해시태그 등록 : ‘,’ 사용
  - 최대 30자(60byte) 입력
  - 단어 10개 정도 표시 , 이상은 스크롤
  - 5개 까지 등록가능

기능구현

Input창에서 HashtagMenu로 방향키로 이동
ActiveFocus가 방향키로 움직인다.
Enter / Click해서 등록
validation 함수 생성 및 적용

SideEffect

이슈 1
- 문제 : backspace로 지웠을때 menu창이 안없어진다. 한번 더 backspace를 눌렀을때 없어진다.
- 원인 : 구조상에 초기화하는 부분이 빠져있었다.
- 해결 : 전체 조건에 맞게 함수 구조 수정
이슈 2
- 문제 : enter를 했을때 menu창이 안없어진다.
- 원인 : 조상에 초기화하는 부분이 빠져있었다.
- 해결 : 전체 조건에 맞게 함수 구조 수정

로딩바

전역에서 사용하는 로딩바
각각의 섹션에서 사용히는 로딩바

ex) 유투브는 전역 로딩바 없음!! 섹션을 더 중하게 여김

구현방법

데이터단(store)에서 로딩바를 구현해서 에러처리까지 하는 방식
- 대부분 자동화 되어있고 페이지단에서 따로 손볼 필요가 없다.
- 구현하는 로직 자체가 복잡해서 안정화 되어있는 프로젝트에서 시간을 들여 만들 수 있을듯하다.
- 한번 구현하면 편하게 쓸 수 있다.
페이지나 컴포넌트단에서 이벤트를 발생시켜 처리하는 방법

현재 프로젝트에서 구현한 방식

Global

// store/layout/index.ts
/* action */
updateLoadingIndicatorGlobal(payload: LayoutType.LoadingIndicator) {
  this.loadingIndicatorGlobal = payload
}

// component/bars/header/Tools.ts
const handleOnLogin = async () => {
  try {
    layoutStore.updateLoadingIndicatorGlobal(true)

    await Promise.all([
      await userStore.fetchAuthToken(),
      await userStore.fetchUser()
    ])
  } catch (err) {
    console.log(err)
  } finally {
    layoutStore.updateLoadingIndicatorGlobal(false)
  }
}

Section

// component/base/ImageContainer.vue

const isTimeout = ref(false)
const isLoadFail = ref(false)
const isLoadDone = ref(false)

const handleOnLoadFail = (evt: Event) => {
  isLoadDone.value = true
  isLoadFail.value = true
  ;(evt.target as HTMLImageElement).remove()
}
const handleOnLoadDone = () => {
  isLoadDone.value = true
  isLoadFail.value = false
}

onMounted(() => {
  setTimeout(() => {
    if (!isLoadDone.value) {
      isTimeout.value = true
      isLoadDone.value = true
      isLoadFail.value = true
    }
  }, 8000)
})

[TIL] 221221

Wed, 21 Dec 2022 23:19:19 GMT

Hashtag Component(라이브러리)

타입스크립트

모듈 vs 네임스페이스

Typescript의 모듈 시스템

declare module '@johmun/vue-tags-input' {
  type Plugin_2

⇒ 라이프사이클 문제로 적용 안됨

Hashtag Component

이슈사항

input value값이 ‘’ 일때 backspace로 지울때 Tag를 지우는것인 아닌지 값이 ‘’ 인지 아닌지로 체크하는데 마지막 하나 남은걸 지울때 앞의 태그와 함께 지워진다
- 원인 : 이벤트가 일어난 이후에 value 값을 체크 하므로 현재 마지막 값이 지워지는 순간 값을 ‘’으로 인식해서 발생하는 이슈이다.
- 방법1 : ‘’값을 가지는 순간 Count라는 변수를 줘서 두번째부터 태그가 지워지도록 설계
  - 문제 발생 : Count값이… 꼬인다ㅠㅠ
- 방법2 : KeyDown 이벤트를 줘서 preValue값을 가지고 두개를 구분해서 사용한다.
기존에 가지고 있는 태그와 새로 사용자 정의된 태그는 TagSet 배열에 추가할때 어떻게 구분해서 Push 하는가?
- 방법 : 추가하는 함수를 2가지로 만들어서 사용한다. input.value로 추가할때는 string 값을 받아서 기존에 가지고 있는 해시태그를 검사해서 있으면 그 Item을 배열에 추가하고 아닌경우는 key값을 맞춰서 새로운 Item을 추가한다.
input 창에 있는 Focus를 어떻게 HashtagMenu로 옮겨서 할 수 있을까?
- 방법 : Blur이벤트를 이용해서 input에 Focus를 잃게하고 Parents Node로 포커싱을 주고 KeyEvent를 이용해서 방향키를 누르면 Focus가 움직이도록 설정한다.
  
  REF>
  
  HTMLElement.blur() - Web APIs | MDN

[TIL]221214

Thu, 15 Dec 2022 00:05:42 GMT

checkbox / radio 구현

웹표준만 적용하지 않는다면 vue/react에서는 checkbox / radio 기능이 구현이 가능하므로 따로 CSS으로 숨기거나 하는 방법이 아니라 커스텀으로 만들 수 있다.

mutationObserver method

React / Vue의 로우레벨에서는 위의 패턴과 방법으로 실시간 감지 기능이 쓰여지고 있다.

MutationObserver - Web API | MDN

observer pattern

[모던JS: 브라우저] Observers

Github

문제: remote에 기존에 있던 브랜치들이 정리되어 같은 이름의 새로운 브런치가 생성되었는데… 로컬에서 계속 branch를 인식하지 못하고 에러를 낸다.
해결 : git remote prune origin 를 사용해서 branch를 잘라내고 remote와 맞춰서 동기화 시킬 수 있도록한다.

Introduction

이슈

문제 : 다이나믹 모달이 잘 적용 되지 않는다.

임시 해결 : 설정하는 부분을 String이 아니라 Component로 넣었더니 되었다.

  // pages/index.vue

vue vscode단축어

//vueinit ⇒ vue template 설정 




//scriptcomposition ⇒  vue composition설정

[TIL] 221212

Mon, 12 Dec 2022 23:50:45 GMT

Tiptap 이슈사항

외부 클릭시 액션 설정

문제: 팁탭에서 툴팁밖을 클릭시 툴팁이 없어지는 기능 필요

해결: @vueuse를 import 해서 onClickOutside 기능 이용!

동영상 링크와 일반 링크를 구분

문제: 하나의 기능을 2개로 구분해야함

해결: class로 나눠서 사용

  const handleOnSetLink = () => {
    // //cancelled & empty & undefined
    if (state.value === null || state.value === '' || state.value === undefined) {
      props.editor.chain().focus().extendMarkRange('link').unsetLink().run()
      state.value = null
      return  emit('handleOnCloseBox', props.sort)
    }

    // update link
    if(props.sort === 'link'){
      props.editor.chain().focus().extendMarkRange('link').setLink({ href: state.value, class: 'link' }).run()
      console.log('editor ',props.editor.getAttributes('link'))
    }else {
      props.editor.chain().focus().extendMarkRange('link').setLink({ href: state.value, class: 'video' }).run()
    }
    state.value = null
  }

에디터 영역에 접근

window를 이용해서 직접적으로 에디터 영역 접근

문제: 링크안에 링크가 들어가게되면 안되기 때문에 이를 막아야한다. 그리고 동영상 링크랑 일반 링크에 따라서 다르게 알럿이 떠야한다.

해결: 블럭포커스가 되었는지 확인하는거랑 현재 포커싱되어있는 블럭이 링크태그인지 확인해서 분류

  const handleOnLinkbox = (sort:string) => {
    const selectBlock = window.getSelection() as Selection | null
    let isBlock = false
    selectBlock?.isCollapsed ? '' : isBlock = true

    if(isBlock){
      if(selectBlock?.focusNode?.parentElement?.classList[0] === sort || selectBlock?.focusNode?.parentElement?.nodeName !== 'A'){
         sort === 'link' ? state.isLink = true : state.isVideo = true 
      }else{
        alert('이미 링크지정이 되었습니다.')
      }
    } else {
       alert('링크할 텍스트를 선택해주세요.')
    }
  }

[TIL] 221208

Thu, 08 Dec 2022 00:56:47 GMT

Demo API

useLazyAsyncData

페이지 렌더링 전에 초기 데이터를 가져오기 위해서 사용


  // Using Async Setup

useLazyAsyncData와 useAsyncData의 차이는??

REF>

useLazyAsyncData

Data Fetching

배포

SSR 배포 및 SSG 배포의 차이??
클라이언트 배포는 어떻게??

Tab

이슈

문제 : API 를 넣는 와중에 tab 기능이 안됨

원인 : ref로 만들었던 변수를 바꾸려고 할때 변수는 바뀌는데 이게 reactive가 잘 안되었다.

해결 : reactive()를 사용해서 바꾸니 기능은 작동한다.

⇒ ref 와 reactive에 대해서 정확하게 다시 정리해봐야겠다.

[TIL] 221013

Thu, 13 Oct 2022 08:24:58 GMT

Today I Learn

Array.sort()
String.spilt()
Array.join()

1.Javascript

1.1. Method

1.1.1. Array.sort()

매개변수 / 반환값

    arr.sort(['compareFunction'])
/*
    => Q1.그럼 숫자나 객체를 문자로 바꾸어서 유니코드에 따라 정렬한다는데... 그렇다면 우선순위는 어떻게 되는가?
     */
     // Answer1
    let arr1 = [1,10,2,31234,'안녕', {a:1, b:'a'}]
    arr1.sort() // [1, 10, 2, 31234, {a:1, b:'a'}, '안녕']

매개변수(compareFunction) :
- 매개변수를 생략하면 각 요소를 문자열 변환하여 유니코드 코드 포인트 순서로 문자열을 비교하여 정렬한다. Ex1) 문자 : ['체리', '바나나'] -> ['바나나', '체리'] Ex2) 숫자 : 숫자는 문자로 변환되어 정렬되므로 [9,80] -> [80,9]
반환값(return) :
- 기존 배열이 정렬되는 것이므로 불변성이 지켜지지 않는다. 복사본 없다.

설명

// Compare 함수의 동작
  function compare(a, b) {
    if (a < b) {
      return -1;
    }
    if (a > b) {
      return 1;
    }
    /*
    a와 b가 같을 때 => a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬(ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않는다.)
    */
    return 0;
  }

문자열 대신 숫자를 비교

// 오름차순 정렬
function compareNumbers(a, b) {
return a - b;
}

let numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); console.log(numbers);

// [1, 2, 3, 4, 5]


2. 객체 : 해당 속성 중 하나의 값을 기준으로 정렬
```js
let items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  return 0;
});

// name 기준으로 정렬
items.sort(function(a, b) {
  let nameA = a.name.toUpperCase(); // ignore upper and lowercase
  let nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
  // 이름이 같을 경우
  return 0;
});

예제

배열만들기 / 정렬

function compareNumbers(a, b) {
return a - b;
}

/* 문자열 배열 정렬*/ let stringArray = ['Blue', 'Humpback', 'Beluga'];

console.log('stringArray:', stringArray.join()); console.log('Sorted:', stringArray.sort());

//stringArray: Blue,Humpback,Beluga //Sorted: Beluga,Blue,Humpback

/* 숫자 배열 정렬 */ // 1. 문자열로 되어있는 숫자를 정렬 let numericStringArray = ['80', '9', '700']

console.log('numberArray:', numberArray.join()); console.log('Sorted without a compare function:', numberArray.sort()); console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));

// numberArray: 40,1,5,200 // Sorted without a compare function: 1,200,40,5 => 제대로 안됨 // Sorted with compareNumbers: 1,5,40,200 => 오름차순

//2. 숫자로만 되어있는 정렬 let numberArray = [40, 1, 5, 200];

console.log('numericStringArray:', numericStringArray.join()); console.log('Sorted without a compare function:', numericStringArray.sort()); console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));

// numericStringArray: 80,9,700 // Sorted without a compare function: 700,80,9 => 내림 차순 // Sorted with compareNumbers: 9,80,700 => 오름 차순

/* 숫자와 문자열이 혼합되어있는 배열 */ let mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];

console.log('mixedNumericArray:', mixedNumericArray.join()); console.log('Sorted without a compare function:', mixedNumericArray.sort()); console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));

// mixedNumericArray: 80,9,700,40,1,5,200 // Sorted without a compare function: 1,200,40,5,700,80,9 // Sorted with compareNumbers: 1,5,9,40,80,200,700

```

map을 사용한 정렬 => 좀더 이해가 필요!! compareFunction은 배열 내의 요소마다 여러 번 호출되므로 성능적인 면이 저하될 수 있다. 그러므로 compareFunction이 복잡해지고, 정렬할 요소가 많아질 경우, map을 사용한 정렬하면 더 좋다. 이 방법은 임시 배열을 하나 만들어서 여기에 실제 정렬에 사용할 값만을 뽑아서 넣어서 이를 정렬하고, 그 결과를 이용해서 실제 정렬을 하는 것이다.

Ref MDN Document

1.1.2. String.spilt()

Ref MDN Document

1.1.3. Array.join()

Ref MDN Document

[] Heap 구현

Tue, 17 May 2022 14:25:33 GMT

[Project] YoonSea 개발 과정기(1)

Mon, 11 Apr 2022 17:51:11 GMT

해당 프로젝트는 "OpenSea Clone Project"로 간단한 기능구현과 스타일일링 되었습니다.

기획

Software Reqirement

기술스택

Client

React: Create React App으로 기본 셋팅 및 컴포넌트 구현
Tailwind Css : 스타일링 구현
Eslint & Prettier

Server

solidity : 스타트 컨트랙트 구현

Database

IPFS

Deploy

정적 배포를 생각하고 있으며 아직 정해지지 않았다.

구현해야하는 기능

메타마스크 지갑 연결
IPFS 연결 및 호출 기능
NFT 생성 기능
NFT 구매 기능 구현
NFT 판매 기능 구현

환경 설정

패키지 정보

  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "4.0.3",
    "web3": "^1.7.3"
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "prettier": "^2.6.2"
  }

Component 구조

Eslint & Prettier 설정

프로젝트를 함께 개발하다보면 각기 다른 환경과 코딩 습관을 가지고 있기 때문에 협업을 위해서 eslint와 prettier를 사용하였다. esLint는 주로 에러가 나는 코드를 찾아주고 규칙에 따라 코드를 일괄되게 사용할 수 있도록 해준다. prettier은 코드가 가독성 좋게 보여질 수 있도록 강제적으로 코드를 변경한다.

설치

이 프로젝트에서는 Create-react-app을 사용했기 때문에 이미 eslint가 설치되어있다.

$ npm i -D prettier
$ npm i -D eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier : ESLint의 formatting 관련 설정 중 Prettier와 충돌하는 부분을 비활성화
eslint-plugin-prettier : Prettier를 ESLint 플러그인으로 추가한다. 즉, Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해준다.

파일 생성 및 셋팅

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  plugins: ['prettier'],
  extends: ['react-app', 'eslint:recommended', 'plugin:prettier/recommended'],
  rules: {
    'prettier/prettier': 'error',
  },
};

env : 적용되는 환경 설정

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true, 
  "singleQuote": true 
}

trailingComma : 여러 줄이 있는 구문에서 후행 쉼표 여부
tabWidth: 탭너비
semi: 끝에 세미클론 여부
singleQuote : 작은 따움표 사용 여부

VScode 설정

VSCode 설정(윈도우, 리눅스에서는 Ctrl + , 맥에서는 Cmd + ,)으로 들어간다. User와 Workspace 항목있는데 User는 VSCode 자체 설정으로 모든 프로젝트에 적용이 되고, Workspace는 현재 프로젝트에서만 설정이 적용되며, .vscode/settings.json에 설정 항목이 저장된다.

{
  // Set the default
  "editor.formatOnSave": false, // true : 저장시 포맷이 자동으로 변경
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}

Ref ESLint 규칙 Prettier 옵션 ESLint, Prettier 적용하기

이슈사항

Webpack5

create-react-app으로 기본 환경을 셋팅했다. 이 과정에서 create-react-app이 React 버전이 18로 업그레이드 되면서 webpack5를 적용하게 되어서 다른 패키지들과 호환이 안되는 이슈가 발생했다.

이를 해결하는 방안으로 2가지를 생각했다.

방법 1 Webpack5를 그대로 유지하면서 호환이 안되는 것들을 호환이 가능하도록 해주는 패키지들(polyfill)을 설치해서 셋팅한다.

//polyfill
"assert": "^2.0.0",
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"http": "0.0.1-security",
"https": "^1.0.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"stream": "0.0.2",
"stream-http": "^3.2.0",
"url": "^0.11.0"

방법 2 react-scripts 버젼을 5.0.0에서 4.0.3으로 하고 react(v17.0.2), react-dom(17.0.2) 버젼을 낮추어 셋팅한다.

선택된 방법 안정성을 생각해서 "방법2"를 선택했다. webpack5 호환이 안되는 패키지가 많으면 그만큼 많은 폴리필 패키지를 설치해야하기 때문에 기능도 무거워지고 사용하지 못하는것들도 있지 않으까 하는 생각에 이전에 사용하던 버젼으로 선택하게 되었다. 사실 webpack.config.js를 사용해서 구현도 가능하지만 제한된 시간에 구현이 어려울꺼 같아서 선택하지 않았지만 추후에 구성해봐야겠다.

셋팅 방법 node-modules와 package-lock.json 파일 삭제 후 아래 처럼 파일 코드를 변경한다.

package.json

// 변경 전 
[
"dependencies": {
  "@testing-library/jest-dom": "^5.16.4",
  "@testing-library/react": "^12.1.4",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "react-router-dom": "^6.3.0",
  "react-scripts": "5.0.0",
  "web-vitals": "^2.1.4",
  "web3": "^1.7.3"
},

// 변경 후 "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.3.0", "react-scripts": "4.0.3", "web-vitals": "^2.1.4", "web3": "^1.7.3" },


- index.js
``` js
// 변경 전
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  
    
  
);


// 변경 후
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Basic - 앱 프론트엔드 & Web3.js

Thu, 07 Apr 2022 17:51:12 GMT

해당 글은 CrytoZombie를 공부하면서 정리한 내용입니다.

CrytoZombie

Ch1. Web3.js

사용자들이 상호작용 할 수 있는 기본적인 웹 페이지를 만들것이다. 이를 만들기 위해, 우리는 이더리움 재단에서 만든 자바스크립트 라이브러리인 Web3.js를 사용한다.

Web3.js 란?

이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본을 가지고 있다. 스마트 컨트랙트의 함수를 실행하고자 한다면, 이 노드들 중 하나에 질의를 보내 아래 내용을 전달해야 한다.

스마트 컨트랙트의 주소
실행하고자 하는 함수
그 함수에 전달하고자 하는 변수들 이더리움 노드들은 JSON-RPC라고 불리는 언어로만 소통할 수 있고, 이는 사람이 읽기는 불편하다. 컨트랙트의 함수를 실행하고 싶다고 질의를 보내는 것은 이와 같다.
```
{"jsonrpc":"2.0","method":"eth_sendTransaction","params":[{"from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155","to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567","gas":"0x76c0","gasPrice":"0x9184e72a000","value":"0x9184e72a","data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"}],"id":1}
```
다행히도, Web3.js는 이런 골치 아픈 질의를 아닌 편리하고 쉽게 읽을 수 있는 자바스크립트 인터페이스로 상호작용을 할 수 있게 한다.

위의 질의문을 작성할 필요 없이, 자네의 코드에서 함수를 아래와 같이 호출하는 것이다.

CryptoZombies.methods.createRandomZombie("Vitalik Nakamoto 🤔")
  .send({ from: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", gas: "3000000" })

먼저 프로젝트에 Web3.js를 설정하도록 해야한다.

= 프로젝트에서 가장 많이 사용하는 패키지 도구를 써서 Web3.js를 추가

// NPM을 사용할 때
npm install web3

// Yarn을 사용할 때
yarn add web3

// Bower를 사용할 때
bower install web3

= 단순히 github에서 간략화된 .js 파일을 다운로드하거나 CDN 코드를 사용한다.

Ch2. Web3 Provider

이 단계에서는 Web3 프로바이더로 Web3.js를 초기화하는 단계이다. Web3.js에서 Web3 프로바이더를 설정하는 것은 우리 코드에 읽기와 쓰기를 처리하려면 어떤 노드와 통신을 해야 하는지 설정하는 것이다. 이는 전통적인 웹 앱에서 API 호출을 위해 원격 웹 서버의 URL을 설정하는 것과 같다.

나만의 이더리움 노드를 프로바이더로 운영할 수도 있다. 하지만 편리하게 쓸 수 있는 제3자 서비스가 있다. DApp의 사용자들을 위해 이더리움 노드를 운영할 필요가 없이 사용할 수 있는 서비스이다.(Infura)

Infura

Infura는 빠른 읽기를 위한 캐시 계층을 포함하는 다수의 이더리움 노드를 운영하는 서비스이다. 접근을 위한 API를 무료로 사용할 수 있다. Infura를 프로바이더로 사용하면, 나만의 이더리움을 설치하고 계속 유지할 필요 없이 이더리움 블록체인과 메세지를 확실히 주고받을 수 있다.

다음과 같이 Web3에 Web3 프로바이더로 Infura를 쓰도록 설정할 수 있다:

var web3 = new Web3(new Web3.providers.WebsocketProvider("wss://mainnet.infura.io/ws"));

하지만, 많은 사용자들이 우리의 DApp을 사용할 것이기에(이 사용자들은 단순히 읽기만 하는 게 아니라 블록체인에 뭔가 쓰기도 할 것이기에) 우리는 이 사용자들이 그들의 개인 키로 트랜잭션에 서명을 할 수 있도록 해야 할 것이다.

*참고: 이더리움(그리고 일반적으로 블록체인)은 트랜잭션에 전자 서명을 하기 위해 공개/개인 키 쌍을 사용한다. 말하자면 전자 서명을 위해 엄청나게 안전한 비밀번호 같은 것이다. 이런 방식으로 내가 만약 블록체인에서 어떤 데이터를 변경하면, 나의 공개 키를 통해 내가 거기 서명을 한 사람이라고 증명할 수 있다. 하지만 아무도 내 개인 키를 모르기 때문에, 내 트랜잭션을 누구도 위조할 수 없다.

앱 프론트엔드에서 사용자들의 개인 키를 관리하려 하는 것은 아마 좋은 생각이 아니다. 이를 대신 처리해주는 서비스가 많은데 이중 가장 유명한 것은 메타마스크(Metamask)이다.

메타마스크

메타마스크: 사용자들이 이더리움 계정과 개인 키를 안전하게 관리할 수 있게 해주는 크롬과 파이어폭스의 브라우저 확장 프로그램
해당 계정들을 써서 Web3.js를 사용하는 웹사이트들과 상호작용을 할 수 있도록 한다.

*참고: 메타마스크는 내부적으로 Infura의 서버를 Web3 프로바이더로 사용한다. 하지만 사용자들에게 그들만의 Web3 프로바이더를 선택할 수 있는 옵션을 주기도 한다. 즉 메타마스크의 Web3 프로바이더를 사용하면, 사용자에게 선택권을 주는 것이기도 하면서 앱에서 걱정할 거리를 하나 줄일 수 있다.

메타마스크의 Web3 프로바이더 사용

메타마스크는 web3라는 전역 자바스크립트 객체를 통해 브라우저에 Web3 프로바이더를 주입한다. 앱에서는 web3가 존재하는지 확인하고, 만약 존재한다면 web3.currentProvider를 프로바이더로서 사용하면 되다.

= 템플릿 코드

// 사용자가 메타마스크를 설치했는지 확인하고 설치가 안 된 경우 우리 앱을 사용하려면 메타마스크를 설치해야 한다고 알려주는 것

window.addEventListener('load', function() {
  // Web3가 브라우저에 주입되었는지 확인(Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
    // Mist/MetaMask의 프로바이더 사용
    web3js = new Web3(web3.currentProvider);
  } else {
    // 사용자가 Metamask를 설치하지 않은 경우에 대해 처리
    // 사용자들에게 Metamask를 설치하라는 등의 메세지를 보여줄 것
  }

  // 이제 자네 앱을 시작하고 web3에 자유롭게 접근할 수 있네:
  startApp()

})

*참고: 메타마스크 말고도 사용자들이 쓸 수 있는 다른 개인 키 관리 프로그램도 있다.(ex - 미스트(Mist) 하지만, 그것들도 모두 web3 변수를 주입하는 동일한 형태를 사용한다.

Ch3. 컨트랙트와 대화

이 단계는 스마트 컨트랙트와 통신하는 단계이다. Web3.js는 스마트 컨트랙트와 통신을 위해 2가지를 필요로 하다(컨트랙트의 주소와 ABI)

컨트랙트 주소

스마트 컨트랙트를 모두 작성한 후에는 그걸 컴파일한 후 이더리움에 배포할 것이다. 컨트랙트를 배포한 후, 해당 컨트랙트는 영원히 존재하는, 이더리움 상에서 고정된 주소를 얻는다. 레슨2를 상기해보면, 이더리움 메인넷에서 크립토키티의 주소는 "0x06012c8cf97BEaD5deAe237070F9587f8E7A266d"였다. 우리의 스마트 컨트랙트와 통신을 하기 위해 배포 후 이 주소를 복사해야 할 것이다.

컨트랙트 ABI

ABI는 Application Binary Interface의 약자로 기본적으로 JSON 형태로 컨트랙트의 메소드를 표현하는 것이다. 우리 컨트랙트가 이해할 수 있도록 하려면 Web3.js가 어떤 형태로 함수 호출을 해야 하는지 알려주는 것이다.

이더리움에 배포하기 위해 컨트랙트를 컴파일할 때, 솔리디티 컴파일러가 자네에게 ABI를 줄 것이다. 그러니 컨트랙트 주소와 함께 이를 복사하여 저장해야 한다.

Web3.js 컨트랙트 인스턴스화

컨트랙트의 주소와 ABI를 얻고 나면, Web3에서 인스턴스화 할 수 있다.

// myContract 인스턴스화
var myContract = new web3js.eth.Contract(myABI, myContractAddress);

Ch4. 컨트랙트 함수 호출

Web3.js는 컨트랙트의 함수를 호출하기 위해 우리가 사용할 두 개의 메소드를 가진다.(call과 send)

Call

call은 view와 pure 함수를 위해 사용한다. 로컬 노드에서만 실행하고, 블록체인에 트랜잭션을 만들지 않는다.

*복습: view와 pure 함수는 읽기 전용이고 블록체인에서 상태를 변경하지 않는다. 가스를 전혀 소모하지 않고, 메타마스크에서 트랜잭션에 서명하라고 사용자에게 창을 띄우지도 않는다.

// 123을 매개 변수로 myMethod라는 이름의 함수를 call한다.
myContract.methods.myMethod(123).call()

Send

send는 트랜잭션을 만들고 블록체인 상의 데이터를 변경한다. view와 pure가 아닌 모든 함수에 대해 send를 사용해야 한다.

*참고: 트랜잭션을 send하는 것은 사용자에게 가스를 지불하도록 하고, 메타마스크에서 트랜잭션에 서명하라고 창을 띄울 것이다. Web3 프로바이더로 메타마스크를 사용할 때, send()를 호출하면 자동으로 이 모든 것이 이루어지고, 우리의 코드에 어떤 특별한 것도 추가할 필요가 없다.

// 123을 매개 변수로 myMethod라는 이름의 함수를 호출하는 트랜잭션을 send할 수 있다
myContract.methods.myMethod(123).send()

예제

이제 컨트랙트에서 데이터에 접근하기 위해 call을 사용하는 실제 예제를 보자.

// 좀비 배열을 public으로 만듬
Zombiep[] public zombies;

솔리디티에서, public으로 변수를 선언하면 자동으로 같은 이름의 퍼블릭 "getter" 함수를 만들어 진다. ID 15인 좀비를 찾는다면, zombies(15)와 같이 변수를 함수인 것처럼 호출할 수 있다.

아래 코드는 프론트엔드에서 좀비 ID를 받아 해당 좀비에 대해 컨트랙트에 질의를 보내고, 결과를 반환하는 자바스크립트 함수를 작성하는 방법이다.

*참고: 아래 사용하는 모든 코드 예제들은 콜백 대신 Promise를 사용하는 Web3.js 1.0 버전을 사용하고 있다. 온라인에서 찾을 수 있는 다른 많은 코드들은 Web3.js의 이전 버전을 사용하고 있다. 1.0 버전에서 문법이 많이 바뀌었으니 코드가 다르다면 버전을 참고 해야한다.

//Web3 프로바이더와 통신하여 컨트랙트의 Zombie[] public zombies에서 인덱스가 id인 좀비를 반환하도록 한다.
function getZombieDetails(id) {
  return cryptoZombies.methods.zombies(id).call()
}

// 함수를 호출하고 결과를 가지고 무언가를 처리:
getZombieDetails(15)
.then(function(result) {
  console.log("Zombie 15: " + JSON.stringify(result));
});

// console result 값 
/*
{
  "name": "H4XF13LD MORRIS'S COOLER OLDER BROTHER",
  "dna": "1337133713371337",
  "level": "9999",
  "readyTime": "1522498671",
  "winCount": "999999999",
  "lossCount": "0" // Obviously.
}
*/

컨트랙트 통신은 비동기적으로 일어나고 Web3는 Promise를 반환한다.

Ch5. 메타마스크 & 계정

메타마스크에서 사용자 계정 가져오기

주입되어 있는 web3 변수에 현재 활성화된 계정이 무엇인지 아래와 같이 확인할 수 있다.

var userAccount = web3.eth.accounts[0]

var accountInterval = setInterval(function() {
  // 계정이 바뀌었는지 확인
  if (web3.eth.accounts[0] !== userAccount) {
    userAccount = web3.eth.accounts[0];
    // 새 계정에 대한 UI로 업데이트하기 위한 함수 호출
    updateInterface();
  }
}, 100);

사용자가 언제든지 메타마스크에서 활성화된 계정을 바꿀 수 있기 때문에, 앱은 이 변수의 값이 바뀌었는지 확인하기 위해 계속 감시를 하고 값이 바뀌면 그에 따라 UI를 업데이트해야 할 것한다. 위 코드는 userAccount가 여전히 web3.eth.accounts[0]과 같은지 100밀리초마다 확인하고 있다. 그렇지 않다면, userAccount에 현재 활성화된 계정을 다시 할당하고, 화면을 업데이트하기 위한 함수를 호출한다.

Ch6. 데이터 보여주기

startApp() 내에서 getZombiesByOwner의 호출 결과를 써서 호출한 displayZombies의 결과로 좀비 ID 배열([0, 13, 47])을 전달받을 수 있다.

= displayZombies 함수 다음 기능을 한다,

먼저 이미 무언가가 #zombies div의 안에 들어 있다면 이 div의 내용을 비운다. 이것은 사용자가 그들의 활성화된 MetaMask 계정을 변경하면 새로운 좀비 군대를 로딩하기 전에 기존의 것을 삭제하는 것과 같다.
반복을 통해 각 id마다 getZombieDetails(id)를 호출해서 우리의 스마트 컨트랙트에서 좀비에 대한 모든 정보를 찾는다.
화면에 표시하기 위해 HTML 템플릿에 좀비에 대한 정보를 집어넣고, 해당 템플릿을 #zombies div에 붙여넣는다.

// 우리 컨트랙트에서 좀비 상세 정보를 찾아, `zombie` 객체 반환
getZombieDetails(id)
.then(function(zombie) {
  // HTML에 변수를 넣기 위해 ES6의 "template literal" 사용
  // 각각을 #zombies div에 붙여넣기
  $("#zombies").append(`
    
      Name: ${zombie.name}
      DNA: ${zombie.dna}
      Level: ${zombie.level}
      Wins: ${zombie.winCount}
      Losses: ${zombie.lossCount}
      Ready Time: ${zombie.readyTime}
    
  `);
});

Ch7. 트랜젝션

send 함수를 이용해 스마트 컨트랙트의 데이터를 변경하는 방법

트랜잭션을 전송(send)하려면 함수를 호출한 사람(from) 주소가 필요하다.(솔리디티 코드에서는 msg.sender와 같음). 이는 DApp의 사용자가 되어야 하고 메타마스크가 나타나 그들에게 서명을 하도록 한다.
트랜잭션 전송(send)은 가스를 소모한다.
사용자가 트랜잭션 전송을 하고 난 후 실제로 블록체인에 적용될 때까지는 상당한 지연이 발생할 것이다. 트랜잭션이 블록에 포함될 때까지 기다려야 하는데, 이더리움의 평균 블록 시간이 15초이기 때문이지. 만약 이더리움에 보류 중인 거래가 많거나 사용자가 가스 가격을 지나치게 낮게 보낼 경우, 우리 트랜잭션이 블록에 포함되길 기다려야 하고, 이는 몇 분씩 걸릴 수 있다.

그러니 이 코드의 비동기적 특성을 다루기 위한 로직이 필요하다.

좀비 만들기

= 솔리디티 코드

function createRandomZombie(string _name) public {
  require(ownerZombieCount[msg.sender] == 0);
  uint randDna = _generateRandomDna(_name);
  randDna = randDna - randDna % 100;
  _createZombie(_name, randDna);
}

= web3에서 위의 함수를 호출하는 코드

function createRandomZombie(name) {
  // 시간이 꽤 걸릴 수 있으니, 트랜잭션이 보내졌다는 것을
  // 유저가 알 수 있도록 UI를 업데이트해야 함
  $("#txStatus").text("Creating new zombie on the blockchain. This may take a while...");
  // 우리 컨트랙트에 전송하기:
  return CryptoZombies.methods.createRandomZombie(name)
  .send({ from: userAccount })
  .on("receipt", function(receipt) {
    $("#txStatus").text("Successfully created " + name + "!");
    // 블록체인에 트랜잭션이 반영되었으며, UI를 다시 그려야 함
    getZombiesByOwner(userAccount).then(displayZombies);
  })
  .on("error", function(error) {
    // 사용자들에게 트랜잭션이 실패했음을 알려주기 위한 처리
    $("#txStatus").text(error);
  });
}

= Web3 프로바이더에게 트랜잭션을 전송(send) 후, 이벤트 리스너 연결

receipt : 트랜잭션이 이더리움의 블록에 포함될 때, 즉 좀비가 생성되고 우리의 컨트랙트에 저장되었을 때 발생한다.
error : 트랜잭션이 블럭에 포함되지 못했을 때, 예를 들어 사용자가 충분한 가스를 전송하지 않았을 때 발생하게 된다. 우리는 우리의 UI를 통해 사용자에게 트랜잭션이 전송되지 않았음을 알리고, 다시 시도할 수 있도록 해야한다.

*참고: 자네가 send를 호출할 때 gas와 gasPrice를 선택적으로 지정할 수 있다. (.send({ from: userAccount, gas: 3000000 })). 만약 지정하지 않는다면, 메타마스크는 사용자가 이 값들을 선택할 수 있도록 한다.

Ch8. Payable 함수 호출

= 솔리디티 코드(ZombieHelper.sol)

function levelUp(uint _zombieId) external payable {
  require(msg.value == levelUpFee);
  zombies[_zombieId].level++;
}

이더가 아니라 wei로 얼마를 보낼지 정해야 한다.

Wei란?

wei : 이더의 가장 작은 하위 단위이다.(1 eth = 10^18 wei)

// web3 변환 유틸리티
web3js.utils.toWei("1"); // 1 ETH를 Wei로 변경

// levelUp함수 호출
CryptoZombies.methods.levelUp(zombieId)
.send({ from: userAccount, value: web3js.utils.toWei("0.001") })  // levelUpFee = 0.001 ether로 설정

Ch9. Event 구독

새로운 좀비 수선

zombiefactory.sol에서 새로운 좀비가 생성될 때마다 매번 호출되던 NewZombie라는 이벤트가 있다. event NewZombie(uint zombieId, string name, uint dna);

Web3.js에서 이벤트를 구독하여 해당 이벤트가 발생할 때마다 Web3 프로바이더가 해당 코드 내의 어떠한 로직을 실행시키도록 할 수 있다.

cryptoZombies.events.NewZombie()
.on("data", function(event) {
  let zombie = event.returnValues;
  // `event.returnValue` 객체에서 이 이벤트의 세 가지 반환 값에 접근할 수 있네:
  console.log("새로운 좀비가 태어났습니다!", zombie.zombieId, zombie.name, zombie.dna);
}).on("error", console.error);

DApp에서 현재 사용자의 좀비만이 아니라 어떤 좀비가 생성되든지 항상 알림을 보낼 것이다. 현재 사용자가 만든 것에 대해서만 알림을 보내고 싶다면 어떻게 해야 할까?

Indexed

이벤트를 필터링하고 현재 사용자와 연관된 변경만을 수신하기 위해, ERC721을 구현할 때 Transfer 이벤트에서 했던 것처럼 솔리디티 컨트랙트에 indexed 키워드를 사용해야 한다.

// 솔리디티 소스
event Transfer(address indexed _from, address indexed _to, uint256 _tokenId);
// _from과 _to가 indexed 되어 있기 때문에, 프론트엔드의 이벤트 리스너에서 이들을 필터링할 수 있다.

//  프론트
// `filter`를 사용해 `_to`가 `userAccount`와 같을 때만 코드를 실행
cryptoZombies.events.Transfer({ filter: { _to: userAccount } })
.on("data", function(event) {
  let data = event.returnValues;
  // 현재 사용자가 방금 좀비를 받았네!
}).on("error", console.error);

event와 indexed 영역을 사용하는 것은 컨트랙트에서 변화를 감지하고 프론트엔드에 반영할 수 있게 하는 유용한 방법이다.

지난 이벤트에 대해 질의

getPastEvents를 이용해 지난 이벤트들에 대해 질의를 하고, fromBlock과 toBlock 필터들을 이용해 이벤트 로그에 대한 시간 범위를 솔리디티에 전달할 수 있다.(여기서 "block"은 이더리움 블록 번호를 나타낸다).

cryptoZombies.getPastEvents("NewZombie", { fromBlock: 0, toBlock: "latest" })
.then(function(events) {
  // `events`는 우리가 위에서 했던 것처럼 반복 접근할 `event` 객체들의 배열이네.
  // 이 코드는 생성된 모든 좀비의 목록을 우리가 받을 수 있게 할 것이네.
});

위 메소드를 사용해서 시작 시간부터의 이벤트 로그들에 대해 질의를 할 수 있기 때문에, 이를 통해 이벤트를 저렴한 형태의 storage로 사용하는 것 예시를 만들 수 있다.

다시 생각해보면, 데이터를 블록체인에 기록하는 것은 솔리디티에서 가장 비싼 비용을 지불하는 작업 중 하나이다. 하지만 이벤트를 이용하는 것은 가스 측면에서 훨씬 더 저렴하다.

여기서 단점이 되는 부분은 스마트 컨트랙트 자체 안에서는 이벤트를 읽을 수 없다는 것이다. 하지만 히스토리로 블록체인에 기록하여 앱의 프론트엔드에서 읽기를 원하는 데이터가 있다면, 이는 새겨놓아야 할 중요한 사용 예시이다.

예를 들어, 우린 이것을 좀비 전투의 히스토리 기록용으로 사용할 수 있다. 좀비가 다른 좀비를 공격할 때마다, 그리고 누군가 이길 때마다 우린 이벤트를 생성할 수 있다. 스마트 컨트랙트는 추후 결과를 계산할 때 이 데이터가 필요하지 않지만, 사용자들이 앱의 프론트엔드에서 찾아볼 수 있는 유용한 데이터이다.

전체 소스



  
    
    CryptoZombies front-end

좀더 생각해볼 것들

attack, changeName, changeDna, 그리고 ERC721 함수인 transfer, ownerOf, balanceOf 함수를 구현한다. 이런 함수들의 구현은 우리가 다룬 모든 다른 send 트랜잭션과 동일하다.
setKittyContractAddress, setLevelUpFee, 그리고 withdraw를 실행할 수 있는 "관리 페이지"를 구현한다. 이러한 구현들은 우리가 이미 다룬 함수들과 동일할 것이다. 그저 해당 컨트랙트를 배포했던 이더리움 주소에서 이 함수들을 호출했는지 확인하면 된다. 이 함수들은 onlyOwner 제어자를 가지고 있다.
이 앱에서 구현하고 싶은 다른 몇 가지 화면이 있다.

개별 좀비 페이지: 특정 좀비에 대한 영구적인 링크를 통해 그 좀비의 정보를 볼 수 있는 곳이다. 이 페이지에서는 좀비의 외관과 이름, 주인(사용자 프로필 페이지에 대한 링크와 함께), 승리/패배 횟수, 전투 기록, 기타 등등을 보여줄 것이다.
사용자 페이지: 영구적인 링크를 통해 사용자의 좀비 군대를 볼 수 있는 곳이다. 개별 좀비를 클릭하여 해당 페이지를 볼 수 있을 것이고, 자네가 메타마스크에 로그인되어 있고, 군대를 가지고 있다면 좀비를 클릭해 공격할 수도 있을 것이다.
홈페이지: 현재 사용자의 좀비 군대를 볼 수 있는, 사용자 페이지의 한 종류이다(우리가 index.html에서 구현학 시작했던 곳이다).

UI 상에서 사용자가 크립토키티를 먹이로 줄 수 있는 방법이 있어야 한다. 홈페이지에서 각 좀비 옆에 "먹이 주기" 같은 버튼을 만들고, 사용자가 고양이의 ID를 입력하게 하는 텍스트 박스를 만들 수 있다.(또는 그 고양이의 URL, 예를 들면: https://www.cryptokitties.co/kitty/578397). 이 버튼은 feedOnKitty 함수를 호출할 것이네.
UI 상에서 한 사용자가 다른 사용자의 좀비를 공격할 수 있는 방법이 있어야 한다. 이를 구현하는 하나의 방법은 한 사용자가 다른 사용자의 페이지로 들어가면, "이 좀비 공격하기" 버튼을 보여주는 것이다. 사용자가 그 버튼을 클릭하면, 현재 사용자의 좀비 군대를 포함하는 모달 창을 띄우고 "어떤 좀비로 공격하시겠습니까?" 메세지를 보여주면 된다. 또 사용자의 홈페이지에서 각 좀비 옆에 "좀비 공격하기" 버튼을 둘 수도 있다. 사용자가 그걸 클릭하면, 사용자가 좀비의 ID를 입력하여 찾을 수 있는 찾기 영역을 가지는 모달 창을 띄울 수 있다. 또는 "아무 좀비나 공격하기" 같은 옵션을 줘서 임의로 찾을 수도 있을 것이다. 그리고 쿨다운 기간이 아직 다 지나지 않은 사용자의 좀비는 회색 처리를 할 수도 있다. UI 상에서 사용자에게 해당 좀비로는 아직 공격할 수 없고 얼마나 더 기다려야 하는지 보여줘야한다.
사용자의 홈페이지에는 각 좀비의 이름 또는 DNA를 바꾸고, 일정 비용을 내고 레벨업을 할 수 있는 옵션이 있을 수 있다. 사용자의 레벨이 충분하지 않으면 어떤 옵션들을 회색 처리를 할 수 있다.
새로운 사용자들을 위해, createRandomZombie()를 호출해 군대의 첫 번째 좀비를 만들 수 있는 입력 창과 함께 환영 메세지를 보여줄 수 있다.
마지막 챕터에서 논의한 것처럼, 우리 스마트 컨트랙트에 indexed 프로퍼티로 사용자의 address를 가지는 Attack 이벤트를 추가하고 싶을 수 있다. 이를 통해 실시간 알림을 만들 수 있을 것이다 - 사용자에게 그의 좀비가 공격당하면 알림 창을 띄워 알려주어, 그를 공격한 사용자/좀비를 보여주고 복수할 수 있게 하는 것이다.
또한 일종의 프론트엔드 캐시 계층을 구현하여 똑같은 데이터를 위해 Infura에 계속 접근하지는 않도록 하고 싶을 수 있다(우리의 현재 displayZombies 구현은 인터페이스를 새로고침할 때마다 각 좀비에 대해 getZombieDetails를 호출하지 - 하지만 현실적으로 우리의 군대에 추가된 새 좀비에 대해서만 이 함수를 호출하면 된다).

10.실시간 채팅방을 만들기.

** 내가 받은 좀비들 **

ella-front-dev.log

[JS] Lodash

[TIL] 230711

Loadsh

Auth2.0 와 JWT의 차이

[TIL] 230705

Git

git pull —rebase

원격에 올라간 Commit 되돌리기

[TIL] 230629

Vue

[TIL]221228

이슈

해시태그

Modal Component

Node와 Element

Node List vs Element Collection

[TIL] 221222

Hashtag Component

분석

기능구현

SideEffect

로딩바

구현방법

현재 프로젝트에서 구현한 방식

[TIL] 221221

Hashtag Component(라이브러리)

타입스크립트

Hashtag Component

이슈사항

[TIL]221214

checkbox / radio 구현

mutationObserver method

observer pattern

Github

Popup

이슈

vue vscode단축어

[TIL] 221212

Tiptap 이슈사항

외부 클릭시 액션 설정

동영상 링크와 일반 링크를 구분

에디터 영역에 접근

[TIL] 221208

Demo API

useLazyAsyncData

배포

Tab

이슈

[TIL] 221013

1.Javascript

1.1. Method

1.1.1. Array.sort()

1.1.2. String.spilt()

1.1.3. Array.join()

[] Heap 구현

[Project] YoonSea 개발 과정기(1)

기획

Software Reqirement

기술스택

구현해야하는 기능

환경 설정

패키지 정보

Component 구조

Eslint & Prettier 설정

설치

파일 생성 및 셋팅

VScode 설정

이슈사항

Webpack5

Basic - 앱 프론트엔드 & Web3.js

Ch1. Web3.js

Web3.js 란?

Ch2. Web3 Provider

Infura

메타마스크

메타마스크의 Web3 프로바이더 사용

Ch3. 컨트랙트와 대화

컨트랙트 주소

컨트랙트 ABI