firebase 사용해서 게시판 CRUD기능을 만들어보자. Firebase v9 firebase는 벡엔드 기능을 클라우드 서비스 형태로 제공하기 때문에 백엔드없이 어플리케이션을 만들 때 사용하면 유용하다. firebase가 버전 업데이트를 하면서 문법 등에 변화가 생

차세대 상태관리 라이러리 'zustand'에 대해 알아보자. 프론트 분야는 변화가 빠르게 성장한다. 그 중에서도 특히 상태관리는 다양한 툴들이 등장하고 발전해 나가고 있다. 가장 오래되고 유명한 상태관리를 떠올리면 단연 '리덕스'일 것이다. 하지만 요즘에는 여러가지 이

메타마스크 테스트 네트워크의 지갑주소, 잔고를 화면에 뿌려보자. Web3-react란? 리액트에서 web3의 Dapp과 관련된 특정 데이터를 최신상태로 유지해주는 state machine으로 기본 블록체인 API가 ethers.js인 react 라이브러리이다. *w

또 다른 상태관리 라이브러리 'Recoil'에 대해서 알아보자. Recoil? 페이스북에서 직접 만든 상태 관리 라이브러리이다. Recoil 사용하기 전역에서 사용할 수 있도록 root에 recoilRoot 감싸주기 atom 기존의 상태관리 라이브러리에서 쓰이는

리액트 쿼리를 사용해서 server와의 비동기 로직코드를 줄여보자.state를 관리하는 라이브러리로 server와 client 사이의 비동기 로직들을 쉽게 만들어주는 도구이다.그래서 React Query를 사용하면 뭐가 좋은데?첫번째, 일련의 코드를 확 줄여준다. 데이

다른 두 배열을 한 배열처럼 만들어보자.하드코딩된 부분을 맵을 돌려서 예쁘게 만들어보자.목표: 서로 다른 두 배열을 가지고 하나의 맵을 돌려 화면에 나타내야 한다. \-> zip array 활용하기요소의 갯수가 정해져 있는 배열, 튜플형태우선 데이터에서 필요한 부분을

forwardRef

selector 알아보자

리덕스를 편리하게 사용할 수 있게 도와주는 🎁종합선물세트 '리덕스 툴킷'에 대해 알아보자.리덕스를 사용하다보면 액션타입,액션생성함수, 리듀서 등 반복되는 코드,즉 보일러플레이트 코드때문에 피로감을 느낄 수 있다.이때 리덕스 툴킷을 사용하면 코드를 좀 더 간결하게 만들

'리덕스 미들웨어'를 사용해서 비동기 작업을 처리해보자. 리덕스 미들웨어란? 미들웨어는 액션과 리듀서 사이의 중간자로, 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행할 수 있게 해준다. 리덕스는 액션 객체가 생성되고, 디스패치를

리액트 개발 라이프를 도와줄 ui 컴포넌트 개발환경 '스토리북'에 대해서 알아보자. Storybook 스토리북은 각종 라우팅과 스테이트들로 연결되어있는 리액트 presentational component들을 노멀라이즈시켜 독립된 환경에서 돌아가게 도와주는 라이브러리이

리액트 페이징처리를 도와주는 라이브러리들을 비교하고 상황에 맞는 라우터를 적용해보자. Redirect(with public route& private route) 사용자의 로그인 상태나 권한에 따라 접근할 수 있는 경로가 다르다. 이 과정을 처리하기 위해서 Priva

자바스크립트 프레임워크인 앵귤러,뷰와 달리 라이브러리인 리액트는 자체적으로 상태관리 도구를 제공하지 않기 때문에 상태관리를 위해서 'Redux'와 사용된다. 리액트에 redux를 적용하여 사용해보자. 컴포넌트 구조 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프

형제 컴포넌트 간의 상태 전달을 Context API를 통해 실현해보자.내가 원하는 작업은 형제 컴포넌트(quiz, result) 간의 데이터 전송이고, 검색해 본 결과 전역상태관리를 할 수 있게 해주는 context api를 사용해야 한다는 것을 알게 되었다.전역상태

데이터로 받아온 문자열에 줄바꿈을 적용해 원하는 형태로 만들어보자.API를 통해 받아오는 데이터를 수정하는 상황.원하는 구조실제 렌더링된 구조정규식을 활용한 replace 메소드백엔드에게 띄어쓰기 할 부분마다 < br >를 넣어달라고 부탁하고, repalce메소드

비교하기 서버와 통신하여 받아온 데이터를 콘솔에 보여주기 문제점: 빈배열이 나온다. 아마도 비동기방식때문에 서버를 기다리지 않고, 콘솔을 먼저 찍어 보여주는 듯하다. 원래코드 useEffect(() => { axios.get(${QUESTIONAPI}) .t

useState 함수형 컴포넌트는 타입스크립트없이 컴포넌트를 작성하는 것과 별 차이가 없다. hooks는 class 컴포넌트와 달리, useState를 사용할 때 Generics를 사용하지 않아도 타입스크립트가 타입을 유추하기 때문에 생략해도 상관없다. useStat

리액트 + 타입스크립트 기본세팅방법에 대해 정리해보자.react + ts + prttier에 eslint 설정, airbnb 규칙 적용(tslint대신 eslint설치)npm i -D eslint eslint-config-airbnb eslint-config-prett

리액트 훅스 두번째 시간, useReducer, useMemo, useCallback, useRef에 대해 알아보자.useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 hook이다. 리듀서

함수형 컴포넌트에서 react hooks를 사용하여 상태 관리를 해보자. React Hooks란? react Hook를 한마디로 요약하면, 클래스형 컴포넌트를 사용하지않고도 함수형 컴포넌트에서도 state 를 운용할 수 있는 기능을 말한다. 기존의 함수형 컴포넌트는