HUMBLE GROUND

typescript에 Redux를 사용하던 도중 useDispatch 에러 발생 ❗ typescript에서 Redux를 사용하기 위해 설치하는 모듈 npm install redux npm install @types/redux npm install react-redux npm install @types/react-redux npm install redux-thunk npm install @types/redux-thunk App.tsx dispatch 의 유형을 읽어오지 못하는 에러발생 💫 store.ts store 에서 작성된코드는 문제가 없어보였다 ... Read More

🔗 [서울 ICT 이노베이션스퀘어] 블록체인 중급 개발 구직자 과정 (22년 3기) 수강하게된 계기 & 목표 부트캠프에서 배운 ‘블록체인 지식’ 이 부족하다고 느껴서 복습 + 보충 개념으로 교육 과정을 신청했습니다 초급과정은 아니라 약간의 난이도는 있을거라 생각합니다 ‘고(GO)언어’ 가 블록체인에서 주요한 언어라고 들어서 배우고 싶었는데 이번 교육에서 ‘고(GO)언어’ 를 사용하여 블록체인 개발을 진행한다는 점에서 마음에 들었고 간단한 dapp 프로젝트 까지 만들어볼 예정입니다 ! 블록체인 개념에 대해 확실히 정리 ‘고언어’ 에... Read More

Caver-js ‘caver-js’ 는 개발자가 HTTP 또는 웹소켓 연결을 사용하여 Klaytn 노드와 상호작용할 수 있도록하는 자바스크립트 API 라이브러리 설치 👉 npm install caver-js 불러오기 👉 import Caver from "caver-js" 클레이튼 ‘Kaikas’ 지갑 연동 코드 👆 https://docs.kaikas.io/02_api_reference/01_klaytn_provider (👆 kaikas Docs 공식 문서 - 지갑연동) Module not found ... Read More

setState 인자 자체를 Props로 전달 ‘PoolListProps’ 는 다른 컴포넌트에서 타입이 정의된적이 있기에 export하고 👉 import로 가져왔습니다 정의된 타입으로 useState 빈배열을 만들고 서버에서 가져온 데이터를 빈배열에 담는다 useState 배열 '저장값 & 갱신값' 인자 자체를 넘겨줘야만 할때 일단 Props 로 해당 컴포넌트에 전달해준다 전달받은 Props 컴포넌트에서 타입 지정 useState 배열에서 일부 객체만 전달 받았으면 전달받은 객체 ‘타입만’ 지정해주면 됐는데 ... Read More

천단위(1,000) 이상 쉼표가 있는 숫자열 Sort 정렬하기 ‘TVL’ 유동성 규모순 으로 리스트들을 정렬 하고자 합니다 https://wavescats.github.io/react/2022/07/10/react6.html (👆 리액트 Sort 수익률순 정렬하기 참고) 앞서 해결했던 코드로 ‘TVL 유동성규모순’ 정렬도 해보려했는데 👆 정렬을 해주긴 하는데 천단위(1,000) 를 넘어가면서 쉼표( , ) 를 인식못하고 정렬를 해주는듯 했습니다 ex) $ 1,393 -> $ 3,565,130 -> $ 3,868 ListSort.js 👉 리팩토링 작업 ... Read More

🦁 [PROJECT LION] 블록체인 스쿨 1기 NFT 블록체인 마켓 앱 만들기 with 그라운드X 3기 수강하게된 계기 & 목표 ‘프로젝트 라이언’ 에서 진행하는 NFT 블록체인 마켓 앱 만들기 with 그라운드X ‘2기’를 수료한 적이 있습니다 ‘2기’ 수강 당시에는 제가 개발지식이 전무한 상태라 해커톤 과정은 부담되어 ‘VOD 과정’ 에 참여했었습니다. 그땐 혼자 독학하듯이 녹화된 동영상을 보고 따라 만들기만 했으나 이번 ‘3기’ 에서는 동료분들과 함께 소통하며 빌드업 해나가는 ‘해커톤 과정’ 으로 참여하게 되었습니다 해커톤에 참여하여 같이 하게 될 동료분들... Read More

sort를 이용하여 가격순 정렬하기 ‘APR’ 수익률을 기준으로 리스트들을 정렬 하고자 합니다 백엔드서버가 없으니 더미데이터 (dummy data) 를 준비합니다 👇 [ { "pair": "KSP + oUSDT", "logo1": "https://s.klayswap.com/data/img/token/0xc6a2ad8cc6e4a7e08fc37cc5954be07d499e7654.svg", "logo2": "https://s.klayswap.com/data/img/token/0xcee8faf64bb97a73bb51e115aa89c17ffa8dd167.svg", "project": "K... Read More

무한스크롤 의 구현방식은 여러가지 입니다 (infinite-scroll-component / intersection-observer / 스크롤 위치 감지 등) 저는 스크롤 위치가 ‘scrollHeight’ 의 맨 끝 지점(100) 에 왔을때 서버에서 데이터를 10개씩 추가로 불러오는 방식을 구현해봤습니다 1. 서버에서 데이터 받아오기 1-1. fetch 또는 Axios 를 이용하여 서버에서 데이터를 받아오고 1-2. useState 빈배열을 ‘두개 생성’ 합니다 1-3. 배열 하나는 데이터를 보여주고 1-4. 배열 하나는 남은 데이터를 저장하는 용도입니다 2. 저장소에서 데이터 꺼... Read More

🦊[BEB 4기] 17주차 후기 / 회고 1. 학습내용 회고 두번째 프로젝트를 진행중이다 이번에는 2주동안 진행하는거라 여유가 조금 있었다 나는 프론트엔드 파트쪽도 맡아서 진행했는데 디자인적인 부분을 다루는게 특히 재미있었던거 같다 CRUD 게시판을 만드는게 1차적 목표였다 📋 우리가 흔히 쓰는 게시판 글쓰기 & 보기& 삭제 & 수정 이런 기능을 구현해내는게 생각보다 쉽지않아서 고생했지만 이번 프로젝트로 진짜 많은걸 배우는 중이다 2. 학습감정 회고 프로젝트 팀 총 4명 중에 2명이 갑작스런 결원으로 인해 내가 많은걸 감당해내야 했다 근데 나는 오히려 이건 기회라고 ... Read More

#1 프로젝트 보완해야 할 사항 Component 간 MetaMask 연결유지 기능 Wallet 부분에서 지갑과 연결된 상태정보를 다른 컴포넌트에서도 유지될수 있게 하는 기능이 쉬워보였는데 생각보다 구현이 잘 안됨 MetaMask 가 계속 연결은 되어있으나 그 연결되어있다는 정보를 다른 컴포넌트에 가져와서 web3 로직을 짜야하는데 그 정보만 분리해서 가져오는게 힘들었다 👉 리액트 함수 안에 함수(변수)를 export 할수는 없을까? 👉 리액트 컴포넌트 메인 함수 안에 MetaMask 가 연결된 정보가 담긴 변수를 export 할수는 없을까? 해결 방법 😎 MetaMas... Read More