목록웹 개발 (224)
dukDukz
[브랜치] main mybranch mybranch 에서 내 작업을 함 협업자가 main 에 커밋함. 더보기 힌트: You have divergent branches and need to specify how to reconcile them. 힌트: You can do so by running one of the following commands sometime before 힌트: your next pull: 힌트: 힌트: git config pull.rebase false # merge (the default strategy) 힌트: git config pull.rebase true # rebase 힌트: git config pull.ff only # fast-forward only 힌트: 힌트: Yo..
https://www.youtube.com/watch?v=oUTDNC4fKkU * 크게 주목해야 할 것은 ERC1155가 NFT의 수량을 포함한다는 사실이다. 그래서 technically unique 하지 않다는 설명이 포함 되어 있는것이다.
https://grahams.tistory.com/203 [react.js]classNames 사용방법 설치 yarn add classnames 사용방법 ClassNames.js import React from 'react'; import classNames from 'classnames/bind'; import styles from './ClassNames.scss'; const cx = classNames.bind(styles); cons.. grahams.tistory.com https://react.vlpt.us/styling/02-css-module.html 2. CSS Module · GitBook 02. CSS Module 이번에는 CSS Module 이라는 기술에 대해서 알아봅시다. 리액트..
https://techblog.woowahan.com/6339/ Store에서 비동기 통신 분리하기 (feat. React Query) | 우아한형제들 기술블로그 오늘은 주문에서 사용하는 FE 프로덕트의 구조 개편을 준비하며 FE에서 사용하는 Store에 대해 개인적인 고민 및 팀원들과 검토하고 논의했던 내용을 소개합니다. 이 과정에서 생긴 여러 가지 의 techblog.woowahan.com 여기를 읽어보면 왜 react-query가 필요한지 알 수 있다. 간단하게 정리하자면 Store에서 비동기 통신을 분리함으로써 store에서는 온전히 상태관리만 할 수 있게 하는 것이다. 그리고 react-query를 쓰면 로딩, 에러 처리가 엄청 간단해진다. https://www.youtube.com/watch?..
https://velog.io/@betterplaywon/React-02.-%EC%9A%B0%EB%8B%B9%ED%83%95%ED%83%95-%EB%A6%AC%EC%95%A1%ED%8A%B8 React 02. 오류 수정 1초만에 끝날 오류 해결을 4시간 동안 끙끙댄 남자가 있다?! velog.io index.html 파일에서 지워줘야함 아니면 주석처리 필요함
App.js import './App.css'; import React from 'react'; import CounterContainer from './containers/CounterContainer'; function App() { return ( ); } export default App; 카운터를 구현하기 위해 redux 를 사용해보자. 폴더 트리를 확인해보자 index.js App.js components > Counter.js containers > CounterContainer.js modules > index.js modules > counter.js 중요한 것만 보자면 이렇게 되어있다. 1. modules > counter.js 리듀서가 있는 곳이다. /* eslint-disable d..
import React, { useReducer, useState } from "react"; const ACTIONS = { INCREMENT: "increament", DECREMENT: "decreament" }; function reducer(state, action) { switch (action.type) { case ACTIONS.INCREMENT: return { count: state.count + 1 }; case ACTIONS.DECREMENT: return { count: state.count - 1 }; default: return state; } } export default function App() { const [state, dispatch] = useReducer(redu..
useCallback은 useMemo 와 비슷한 훅이다. useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 컴포넌트에 함수를 선언하면 컴포넌트가 리렌더링 될 때마다 새로 만들어진다. 크게 리소스를 낭비하지는 않지만, useCallback을 어떻게 쓸지는 알아놔야 한다. 컴포넌트에서 props 가 바뀌지 않았으면 Virtual DOM 에 새로 렌더링하는 것 조차 하지 않고 컴포넌트의 결과물을 재사용 하는 최적화 작업을 할건데요, 이 작업을 하려면, 함수를 재사용하는것이 필수입니다. App.js import React, { useState, useCallback } from "react"; import List..