nft minting, staking 페이지를 만들며 NFT dApp 만드는 일련의 과정들을 정리해보자. minting page nft에서 말하는 민팅은 두가지 뜻이 있다. 하나는 판매자 입장에서 가상화폐로 NFT를 만들어 낸다는 뜻이고, 다른 하나는 구매자 입장에서 NFT를 구매한다는 뜻도 된다. 지금 다루고 있는 dapp상 민팅 페이지는 NFT를 구매할 수 있는 페이지를 말한다. minting 과정 1. web3 지갑 연결 web3 지갑은 dpp과 상호작용하고 이더리움 블록체인에서 거래를 수행하는데 사용된다. 지갑 자체가 암호자체를 보관하는 것은 아니고, 디지털 자산에 액세스할 수 있는 정보를 저장한다. web에서는 직접적으로 스마트 컨트랙트와 상호작용할 수는 없다. 그래서 JSON-

v13 변경사항에 대해 알아보자. app/ Directory *app/ 디렉토리 구조는 beta버전이기 때문에 실제 프로덕션 레벨에서는 권장되지 않는다. 기존에는 pages 디렉토리 안에 파일을 생성하여 Automating Routing을 실행했지만, 13버전부터는 app/이라는 새로운 디렉토리가 등장하였다. 파일 시스템 기반에서 디렉터리 기반 라우팅 시스템으로 전환하였다. 현재는 pages와 app 디렉토리가 공존하는 베타 버전으로 제공된다. app 디렉토리 안에는 layout.js, page.js, head.js파일이 존재한다. *dev server를 돌리면 자동적으로 head.js와 layout.js를 생성해준다. ![](https://velog.velcdn.com/images

업데이트된 next.js 13를 사용해보자. (환경설정편) Next.js란 next.js는 react에서 SSR을 쉽게 구현할 수 있도록 Vercel에서 만든 프레임워크이다. Next.js를 사용하는 이유 초기 웹사이트는 사용자가 다른 페이지로 이동할 때마다 서버에 요청을 해서 새로운 html을 불러와 매번 새로고침되는 방식이었다. 이를 보완하고자 나온 것이 단일 페이지로 최초 한 번 페이지 전체를 로드하는 SPA의 CSR방식이고, 대표적인 SPA 라이브러리가 react 이다. 하지만, 검색엔진 최적화(seo)문제나 초기 페이지 로딩이 오래 걸린다는 문제점이 존재한다. 검색엔진봇은 js를 해석하기 힘들기 때문에 html에서 크롤링을 하는데, CSR방식은 client에서 페이지를 구성

firebase 사용해서 게시판 CRUD기능을 만들어보자. Firebase v9 firebase는 벡엔드 기능을 클라우드 서비스 형태로 제공하기 때문에 백엔드없이 어플리케이션을 만들 때 사용하면 유용하다. firebase가 버전 업데이트를 하면서 문법 등에 많은 변화가 생겼다. firebase SDK 설정 및 구성 firebase 프로젝트 생성 후 Firebase를 초기화하여 사용하려는 제품의 SDK를 사용하기 .env 환경변수는 노출되면 보안상 위험하기때문에 env파일을 활용해야 한다. 변수명의 생성은 무조건 REACT_APP으로 시작 프로젝트 최상단에 위치할 것 개발 환경에서 개발서버가 실행중인 경우 환경변수 변경은 서버를 재시작해야 적용됨 create addDoc 메소드를 사용하여 구현한다. addDoc(' 키를 통해 가져온 DB ' , ' payload ') read read는 query, getDocs 메소드가 있다.

차세대 상태관리 라이브러리 'zustand'에 대해 알아보자. 왜 Zustand인가? 프론트 분야는 변화가 빠르게 성장한다. 그 중에서도 특히 상태관리는 다양한 툴들이 등장하고 발전해 나가고 있다. 가장 오래되고 유명한 상태관리를 떠올리면 단연 '리덕스'일 것이다. 하지만 요즘에는 여러가지 이유로 '리덕스'보다는 다른 도구를 선택하는 추세다. 리덕스의 단점 개념이나 사용법 등 러닝 커브가 높은 편이기 때문에 빠른 시일내에 도입해야 하는 프로젝트의 경우 좋은 선택이 아니다. 보일러 플레이트 코드(액션 타입, 액션 생성함수, 리듀서)가 많다. 작은 기능이라도 리덕스를 구현하는 순간 몇 개의 파일들을 준비해야 한다. npm trend 주목받고 있는 라이브러리로 'jotai

메타마스크 테스트 네트워크의 지갑주소, 잔고를 화면에 뿌려보자. Web3-react란? 리액트에서 web3의 Dapp과 관련된 특정 데이터를 최신상태로 유지해주는 state machine으로 기본 블록체인 API가 ethers.js인 react 라이브러리이다. *web3js web3.js는 내부적으로 HTTP나 IPC(프로세스 사이에서 통신을 가능하게 하는 기술)를 통해 JSON-RPC API를 호출하도록 되어있다. 이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본을 가지고 있다. 이더리움 노드들은 JSON-RPC로만 소통할 수 있기 때문에 web3.js로 개발자들이 쉽게 개발할 수 있도록 자바스크립트 인터페이스로 상호작용할 수 있도록 도와주는 역할을 한다.

또 다른 상태관리 라이브러리 'Recoil'에 대해서 알아보자. Recoil? 페이스북에서 만든 상태 관리 라이브러리이다. 대표적인 상태관리 라이브러리 'redux'는 react만을 위한 상태관리 도구가 아니기에 react에 최적화되지도 않았고, 러닝커브도 높았다. 이에 비해 recoil은 hook을 써봤다면 쉽게 사용할 수 있는 수준이다. Recoil 사용하기 전역에서 사용할 수 있도록 root에 recoilRoot 감싸주기 atom 기존의 상태관리 라이브러리에서 쓰이는 store와 유사한 개념으로, 상태의 단위를 말한다. atom의 상태가 업데이트되면, atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더링된다. useRecoilValue 컴포넌트와 atom을 연결하기 위한 도구 useSetRecoilState vaule를 수정할 수 있는 함수로, setState와 같은 방식으로 작동한다. use

리액트 쿼리를 사용해서 server와의 비동기 로직코드를 줄여보자. React Query? state를 관리하는 라이브러리로 server와 client 사이의 비동기 로직들을 쉽게 만들어주는 도구이다. 그래서 React Query를 사용하면 뭐가 좋은데? 첫번째, 일련의 코드를 확 줄여준다. 데이터를 가져오기 위한 일련의 필수적인 코드들이 있다. 예를들어, 서버와 통신하기 위해서 fetch함수를 만들고, 받아온 데이터를 담을 state를 만들어주고, 받아오는 상태에 따라 loading 화면을 보여주기 위해 state를 만들고 세팅해주는 등의 세트 코드들이 있다. 하지만, react query와 함께라면 코드를 획기적으로 줄일 수 있다. 두번째, **데이터를 캐시에 저장해둔

다른 두 배열을 한 배열처럼 만들어보자. 해결상황 하드코딩된 부분을 맵을 돌려서 예쁘게 만들어보자. 목표: 서로 다른 두 배열을 가지고 하나의 맵을 돌려 화면에 나타내야 한다. -> zip array 활용하기 zip 기본 예제 요소의 갯수가 정해져 있는 배열, 튜플형태 zip 적용하기 우선 데이터에서 필요한 부분을 뽑아 배열형태로 만들어준다. 첫번째 배열에 map을 돌려서 배열의 첫번째 요소로 넣어주고, 두번째 요소로 인덱스값을 통해 두번째 배열의 값을 뽑아주는 튜플형태로 리턴해준다. 리팩토링 한번 더 간결하게! 완성된 화면 위 : 3 아래 : 1 왼쪽 : 0 오른쪽 : 1

ref를 prop으로 전달하는 방법에 대해 알아보자. ref forwardRef 알아보기 이전에 ref개념에 대해 간단하게 짚고 넘어가자. react를 사용할 때 DOM에 접근해야 하는 상황이 종종 발생한다. js에서 특정 DOM에 접근하기 위해서 getElementById와 같은 DOM Selector를 사용하는 것처럼 react에서는 ref를 사용한다. 위의 예시와 같이 부모컴포넌트에서 inputRef객체를 자식인 Input컴포넌트에 ref prop으로 넘긴다. 자식 Input컴포넌트는 ref로 넘어온 inputRef 객체를 다시 내부에 있는 엘레먼트의 ref prop으로 넘겨주게 된다. 하지만 실행시켜보면 ref는 prop이 아니다 라는 오류가 뜬다. 리액트에서는 key,ref처럼 특수목적으로 사용되어 일반적인 용도로 사용할 수 없는 prop이 있기 때문이다. 이때 React컴포넌트에서 ref를 prop으로 사용하려면 react에

useSelector, useDispatch, useCreate를 사용해서 리덕스 상태를 조회하고 사용해보자. useSelector useSelector Hook을 사용하면 connect함수를 사용하지 않고도 리덕스의 상태를 조회할 수 있다. 개념적으로 mapStateToProps와 비슷하다. connect함수와 useSelector 차이점 connect 함수는 해당 컨테이너 컴포넌트의 부모 컴포넌트가 리렌더링될 때 해당 컨테이너 컴포넌트의 props가 바뀌지 않았다면 리렌더링이 자동으로 방지되어 성능이 최적화된다. 이에비해, useSelector를 사용하여 리덕스 상태를 조회했을 때는 성능 최적화가 이루어지지 않기때문에 React.memo를 컨테이너 컴포넌트에 사용해줘야한다. export default React.memo(Container); useDispatch useDispatch Hook은 컴포넌트 내부에서 스토어의 내장함수 dispatch를

리덕스를 편리하게 사용할 수 있게 도와주는 🎁종합선물세트 '리덕스 툴킷'에 대해 알아보자. Redux Toolkit이란? 리덕스를 사용하다보면 액션타입,액션생성함수, 리듀서 등 반복되는 코드,즉 보일러플레이트 코드때문에 피로감을 느낄 수 있다. 이때 리덕스 툴킷을 사용하면 코드를 좀 더 간결하게 만들어 줄 수 있다. 리덕스 툴킷은 리덕스의 종합선물세트로 redux thunk, immer, createaction 등이 내장되어 있다. configureStore toolkit을 사용하기 전에는 createStore()를 호출하고 root reducer함수를 전달하여 redux store를 사용했다. Toolkit의 configureStore는 createStore를 활용한API로 createStore를 래핑하여 만들어진 함수이기때문에 기본적으로 createStore와 동일한 기능을 제공한다.(store 생성) (no toolkit) (with toolkit) crea

'리덕스 미들웨어'를 사용해서 비동기 작업을 처리해보자. 리덕스 미들웨어란? 미들웨어는 액션과 리듀서 사이의 중간자로, 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행할 수 있게 해준다. 리덕스는 액션 객체가 생성되고, 디스패치를 통해 스토어에 상태 변화를 알리면 리듀서는 정해진 로직에 따른 액션을 처리한 후 새로운 상태값을 반환하는 동기적인 흐름을 통해 이뤄진다. 하지만 외부 데이터를 요청하는 비동기적인 요소들을 처리해야 할 경우가 있을텐데 이때 사용하는 것이 '리덕스 미들웨어'이다. ![](https://images.velog.io/images/jo_love/post/b1d8e170-b071-426c-b828-e27a7067c850/%E1%84%85%E1%85%B5%E1%84%83%E1%85%A5%E1%86%A8%E1%84%89%E1%85%B3-%E1%84%86%E1%85%B5%E1%84%83%E1%85%B3%E1%86%AF

리액트 개발 라이프를 도와줄 ui 컴포넌트 개발환경 '스토리북'에 대해서 알아보자. Storybook 스토리북은 각종 라우팅과 스테이트들로 연결되어있는 리액트 presentational component들을 노멀라이즈시켜 독립된 환경에서 돌아가게 도와주는 라이브러리이다. 리액트용으로 개발이 시작되었고, 현재는 뷰, 앵귤러까지 지원가능하다. 그렇다면 storybook이 ui컴포넌트 개발을 어떻게 도와준다는 것인지 왜 만들어졌는지에 집중해보자. 탄생배경에 대해서 알아보려면 우선 react의 패턴에 대한 설명이 필요하다. presentational & container pattern react를 사용할 때 흔히 presentational & container 디자인 패턴을 사용한다. 로직을 수행하는 container, state조작이 없고 뷰만 보여주는 presentational 컴포넌트로 분리된 패턴을 말한다. ![](https://images.vel

리액트 페이징처리를 도와주는 라이브러리들을 비교하고 상황에 맞는 라우터를 적용해보자. Redirect(with public route& private route) 사용자의 로그인 상태나 권한에 따라 접근할 수 있는 경로가 다르다. 이 과정을 처리하기 위해서 PrivateRoute를 컴포넌트를 만들어, 로그인한 유저에게는 인증이 완료된 경우에만 접근할 수 있는 페이지(마이페이지)를, 그렇지 않은 사용자가 접근하고자 한다면 다른 페이지로 redirection(회원가입페이지)한다. 컴포넌트 또한 렌더링할 컴포넌트를 prop으로 넘겨받은 후, 로컬스토리지에 저장된 토큰으로 인증이 확인된 유저들만 해당 컴포넌트를 리턴해주도록 한다. ![](https://images.velog.io/images/jo_love/post/ba11ddc3-935d-48c5-9242-4b08cac58c9d/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E

자바스크립트 프레임워크인 앵귤러,뷰와 달리 라이브러리인 리액트는 자체적으로 상태관리 도구를 제공하지 않기 때문에 상태관리를 위해서 'Redux'와 사용된다. 리액트에 redux를 적용하여 사용해보자. 구체적인 실습예제 만들어보기 1)컴포넌트 구조 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이션 컴포넌트 + 컨테이너 컴포넌트를 분리하는 것이다. 이 패턴을 사용하면 코드의 재사용성이 높아지는 장점이 있다. 프레젠테이셔날 컴포넌트: 단순히 props를 받아와 화면에 ui를 보여주기만 하는 컴포넌트 컨테이너 컴포넌트: 리덕스와 연동되어 있는 컴포넌트로 리덕스로부터 상태를 받아오거나 리덕스 스토어에 액션을 디스패치하기도 한다.

형제 컴포넌트 간의 상태 전달을 Context API를 통해 실현해보자. 내가 원하는 작업은 형제 컴포넌트(quiz, result) 간의 데이터 전송이고, 검색해 본 결과 전역상태관리를 할 수 있게 해주는 context api를 사용해야 한다는 것을 알게 되었다. Context API란? 전역상태관리로 유명한 리덕스와 마찬가지로 글로벌하게 상태관리가 가능하다. Context ApI는 따로 설치하지 않아도 리액트에서 기본으로 지원하는 API기 때문에 호출해서 쓰기만 하면된다. *Context API vs Redux Context는 수단일 뿐 상태관리 자체는 useState와 useReducer 로 하게 된다. 리덕스와의 주요 차이는 '성능'이다. Redux는 컴포넌트에서 전역상태의 특정 값을 의존하게 될 때 해당 값이 바뀔 때에만 리렌더링이 되도록 최적화가 되어있기 때문에 전역상태 중 의존하지 않는 값이 바뀌게 될 때에는 컴포넌트에서 낭비 렌더링이 발생하지

데이터로 받아온 문자열에 줄바꿈을 적용해 원하는 형태로 만들어보자. API를 통해 받아오는 데이터를 수정하는 상황. 원하는 구조 실제 렌더링된 구조 시도 정규식을 활용한 replace 메소드 백엔드에게 띄어쓰기 할 부분마다 를 넣어달라고 부탁하고, repalce메소드로 을 띄어쓰기로 바꾸려는 시도를 했다. 렌더링이 되지 않는다... next... 해결방법 step1. 데이터 형태 파악하기 받아온 데이터를 보면 모두 문자열로 처리되어 들어오는 것을 확인할 수 있었다. 내가 만들어야 될 형태는 이다. step2. 기준으로 split 해주기 step3. React jsx에 적용하기 map으로 요소 하나 하나를 돌면서 사이에 로 띄어쓰기를 만들어주었다.

http통신을 위한 API로 기존의 사용해오던 fetch 대신 'axios'를 리액트에 사용해보자. Axios Promise를 사용하는 http비동기 통신 모듈로, 자바스크립트 라이브러리이다. 패키지 설치가 필요하고, npm i axios -g 필요한 곳에 import하여 모듈을 불러와야한다. import axios from 'axios' fetch과 달리, axios는 json을 자동으로 변환해주기 때문에 json화 코드가 불필요하다. axios에 비동기 처리하기 앞에서 말했듯이 axios는 비동기 방식으로 HTTP데이터 요청을 하기 때문에 비동기 처리과정이 필요할 때가 있다. async await 사용 `Warning: An effect function must not return anything besides a function, which is used for clean-up. ` useEffect함수는 다른 함수를 반환하면 안된다.

useState + 타이핑 useState()와 같이 Generics를 사용하여 해당 상태가 어떤 타입을 가지고 있을지 설정하면 된다. 함수형 컴포넌트는 타입스크립트없이 컴포넌트를 작성하는 것과 별 차이가 없다. hooks는 class 컴포넌트와 달리, useState를 사용할 때 Generics를 사용하지 않아도 타입스크립트가 타입을 유추하기 때문에 생략해도 상관없다. useState + Generics를 사용하는 경우 그렇다면 useState가 타입을 지정해야할 때는 언제일까? 상태가 null일 수도 있고, 아닐수도 있을때 Generics을 사용할 수 있다. useState에서 빈배열을 사용하는 경우 타이핑 문제를 일으킨다. ts내에서 해당 배열이 어떤 타입으로 이루어진 배열인지 추론하지 못하고 'never'를 보여준다. 이 경우에도 Generics를 사용하여 해결한다. 이외에도 상태의 타입이 까다로운 구조를 가진 객체이거