react

[TIL] 무한 스크롤

[TIL] 무한 스크롤 날짜 2022.06.30. 목표 없음 내용 React - 무한 스크롤 Scroll Event 브라우저 크기와 스크롤 위치에 따라 스크롤 const { innerHeight } = window; // 브라우저창 내용의 크기 (스크롤을 포함하지 않음) const { scrollHeight } = document.body; // 브라우저 총 내용의 크기 (스크롤을 포함한다) const { scrollTop } = document.documentElement; // 현재 스크롤바의 위치 // scrollTop과 innerHeight를 더한 값이 scrollHeight보다 크다면 if (Math.round(scrollTop + innerHeight) >= scrollHeight) { 결론 ..

[TIL] TDD vs BDD

[TIL] TDD vs BDD 날짜 2022.06.27. 목표 없음 내용 Redux vs Context API 공통 - 전역 상태 관리 Redux Context API를 기반으로 제작 디버깅이나 로깅 등의 상태 관리 이외의 여러 기능이나 미들웨어 지원 Context APi 단순 전역 상태 관리 React 자체 내장되어 있어 바로 사용 가능 TDD vs BDD TDD(Test Driven Development) 테스트 작성 후 정상적으로 돌아갈 때까지 테스트하면서 코드를 작성하는 작업 모듈과 계층 간의 커플링 최소화 프로젝트의 유지보수와 확장에 용이 BDD(Behavior Driven Development) - TDD에서 파생된 개발 방법론 사용자의 행위를 포함한 테스트 작성 후 정상적으로 돌아갈 때까지 ..

[Project] OpenSea 클론코딩

OpenSea 클론코딩 팀명 씨냅스(Seanapse) 프로젝트 목표 OpenSea의 Front-end, Back-end 아키텍처 이해 OpenSea API 동작원리 이해, API 레퍼런스 참조 OPenSea 구현에 필요 요소 이해 및 구현 프로젝트 기간 2022년 6월 13일 ~ 2022년 6월 17일 ( 5일 ) 기획 - 1일 / 개발 및 배포 - 3일 / 회고 - 1일\ 프로젝트에서의 역할 팀장 역할 수행 NFT 생성 페이지 구현 hardhat을 통한 ERC-721 컨트랙트 배포 IPFS API 사용하여 파일 업로드 프로젝트 배포 구현 기능 기본 기능 사용자는 메타마스크 지갑을 연동하여 로그인할 수 있다 token uri에 들어갈 내용을 프론트에서 입력 주요 기능 사용자는 판매되는 nft의 정보 목록..

[TIL] Why 토큰 이코노미? React에서 useState의 set함수는 비동기

[TIL] Why 토큰 이코노미? React에서 useState의 set함수는 비동기 날짜 2022.06.16. 목표 OpenSea 클론코딩 마무리 내용 React - useState의 set함수는 기본적으로 비동기 set함수에 값을 넣어 state를 변경하게 되면 비동기적으로 처리 import React, {useState} from 'react'; const App = () => { const [value, setValue] = useState(''); const countHandler = () => { setState(value + 1); } return( {value} count ); } export default App; set함수에 콜백함수를 넣어 동기적으로 처리 ..

[TIL] react, ethers, payable, file

const CreateInputElement = ({ name, placeholder = "", onChange = () => { }, value=undefined }) => { return ( { value === undefined ? : } ); }[TIL] 한줄 요약 날짜 2022.06.15. 목표 OpenSea 클론코딩 - IPFS 연동 FBI 개인 프로젝트 - 글쓰기 구현 내용 react - input value warning 해결 문제 - value에 undefined가 들어갈 수 있어 발생 해결 1번째 방법const provider = await new ethers.providers.Web3Provider(window.ethereum); const signer = await provider...

[TIL] 경고와 버전 이슈

[TIL] 경고와 버전 이슈 날짜 2022.06.14. 목표 OpenSea 클론코딩 - Create 페이지 구현 내용 함수 컴포넌트 내부 Styled-Components 경고 해결 함수 컴포넌트 내부에 Styled-Components를 선언하면 다음과 같은 경고 발생 const CreateWrapper = ({ children }) => { const Wapper = styled.div` `; return ( {children} ); } react_devtools_backend.js:4026 The component styled.div with the id of "sc-jqUVSM" has been created dynamically. You may see this warning because you&#..

[FBI Project] 00. 프로젝트 기획

FBI Personal Project 🐝 프로젝트 주제 스팀잇스타그램(Steemit + Instagram) ⏰ 프로젝트 기간 2022년 6월 2일 ~ 2022년 6월 16일 ( 2주 ) 🔍 프로젝트 배경 및 목표 소셜부분에서 최초의 dApp인 스팀잇(SteemIt)에 관심을 갖게 되었습니다. 게시글과 댓글을 작성하고, 대표적인 인스타그램이나 트위터와 같은 Social에서 좋아요 기능과 유사한 기능을 통해 보상을 받습니다. 이러한 탈중앙 소셜을 DeSo(Decentralized Social)라고 합니다. DoSo가 어떻게 동작하는지 전체적인 구조와 원리를 학습하고 최초의 DeSo dApp인 SteemIt을 클론코딩하는 프로젝트를 기획했습니다. 그러나, 스팀잇의 UI는 개인적으로 좋지 못하다고 생각이 들었습..