개발할래 운영할래?

상태관리 라이브러리 비교 각 라이브러리 사용성을 비교하기 위해 하나의 예시를 가지고 라이브러리 마다의 코드를 비교해 봤다. 예시 비즈니스 로직 : 옷을 판매하는 서비스를 운영중이며, 옷 상품을 등록하는 화면의 경우이다. url은 다음과 같다 : /regist/clothes/:category :category - path variable 이며 예시로는 신발(shoes), 상의(top), 하의(pants) 가 있다. 옷 상품 등록 화면의 일부 컴포넌트들은 카테고리 마다 다른 정보를 받도록 화면을 렌더링 해야 한다. if-else 조건문을 이용한다면 신규 category가 추가됨에 따라 UI 로직이 너무 더럽혀질 것이기에, map 을 이용해서 category 값에 따라 해당 컴포넌트들을 렌더링 하려 한다. e..

회사에서 NextJS 프로젝트를 하면서 useEffect hook에서 BFF 에 호출하는 로직을 추가했다. function useAxiosCall(apiUrl: string) { const [data, setData] = useState(null); useEffect(()=>{ Axios.get(apiUrl).then(res => { setData(res.data); }); }, []); } 해당 axios 호출에서 예외가 발생하는 경우가 있었고, 익숙하듯 try...catch 문으로 감싸줘 봤다. function useAxiosCall(apiUrl: string) { const [data, setData] = useState(null); useEffect(()=>{ try{ Axios.get(apiUr..

https://dhsimpson-ml-and-sw.tistory.com/78 에서 이어지는 글입니다. web3 의 확장성 향상 동향 1. L2 레이어, Rollup 이더리움 블록체인 기반의 Dapp 을 만들 땐 크게 "요금, 처리시간" 이라는 두 가지 문제가 있다.비싼 요금은 해커들로 하여금 해킹 성공에 대한 메리트를 떨어뜨리므로 해킹 시도 부터 망설이게 dhsimpson-ml-and-sw.tistory.com Rollup 외에도 샤딩을 통해서도 확장성 향상이 가능하다. 샤딩은 '여러 체인으로 나누어 Tx 를 분할 처리' 하는 기술이다. 샤딩은 분할처리 통해 처리시간(블록 생성 시간), Tx 처리량 측면의 확장성 문제를 해결한다. L1, L2 에서 모두 샤딩 기능이 있는데, L1 의 샤딩은 메인 블록체인..

이더리움 블록체인 기반의 Dapp 을 만들 땐 크게 "요금, 처리시간" 이라는 두 가지 문제가 있다.비싼 요금은 해커들로 하여금 해킹 성공에 대한 메리트를 떨어뜨리므로 해킹 시도 부터 망설이게 만들어 준다. 반면에 Dapp 을 사용하는 유저들은 Tx 가 발생할 때마다 비싼 요금을 지불해야 한다. 예를 들자면, 대표적인 NFT 거래소 Open Sea 에서 NFT 를 하나 업로드 하려면 4~10 만 원(2021년 기준)을 수수료로 지불해야 한다. (이는 NFT 를 처음 판매하려는 작가들로 하여금 NFT 작가 데뷔를 하는 데에 망설임 point가 될 수 있다.) (물론 현재는 Polygon 이라는 L2 솔루션이 적용됐다.) 처리시간 또한 보안 측면에서 장점을 가져다 주지만, '12초' 라는 시간은 5G 시대의..

react-query 는 브라우저 cache(& stale)를 이용하므로 컴포넌트가 destroy 되고 다시 생성할 때 캐싱 된 데이터로 빠르게 컴포넌트를 생성할 수 있다. react-query 에선 observer 패턴이 사용된다. useQuery에 전달하는 'key'가 observer 패턴에도 이용된다. https://velog.io/@hyunjine/Inside-React-Query 기본적으로 브라우저에 focus 됐을 때 refetch 한다. (ex 다른 tab 보다가 react-query가 있는 화면에 돌아올 때) 참고 : https://velog.io/@blackeichi/react-query-focus%EC%8B%9C-refetch%EB%B0%A9%EC%A7%80%ED%95%98%EA%B8%..

참고 : [모노레포 새 프로젝트 환경설정하기] 참고 한 포스트는 모노레포 기준이지만, 아래에서 셋팅 할 일반 레포 (react app 하나만 있는 repo) 에도 적용 가능 1. cra with typescript yarn create react-app newproject --template typescript 2. set yarn version as berry yarn set version berry 3. change typescript version [tsconfig.json] yarn remove typescript yarn add -D typescript@4.9.3 (yarn berry 와 매칭 가능한 버전 중 최상위 버전) 4. set eslint [.eslintrc.json] yarn add ..

1. react-query 의 isLoading, error 를 Suspense 및 ErrorBoundary 로 대체했다. (좀더 선언적이며 JSX/TSX 친화적이게) [commit link] a. 우선 react-query client 에 'suspense' 를 사용한다고 {suspense: true} option을 줘야 한다. b. react-query의 useQuery 훅이 반환하는 isLoading,error 를 각각 suspense, errorBoundary 로 대체한다. 빨간색 표시 : isLoading -> suspense (참고 : Suspense with React-Query 사용법) 보라색 표시 : error -> ErrorBoundary c. ErrorBoundary 는 아직까진 Re..

1. 어떤 챌린지 이고 어떤 강의일까? 원티드 프리온보딩 챌린지란? 원티드에서 매달 프리온보딩 챌린지를 하고 있다. 강의도 해 주면서 원티드를 통해 채용연계(물론 지원은 스스로 해야하죠 ^^7) 및 상금 수여까지 한다. (높은 강의 퀄리티를 보면 채용연계 보단 공짜로 개발자 교육시켜주고 싶어서 안달난 것 같은...크흠... 원티드 애용하겠읍니다.) 회차가 꽤 된 것 같던데, 지난 11월에야 이런 좋은 교육을 알게 됐다니. 후회가 된다. 12월 챌린지(monorepo) 때 강의 내용이 너무 좋았어서 이번 강의도 신청하게 됐다. 이번 챌린지의 주제/내용 React Query 를 적용해 TODO List CRUD 기능이 있는 웹서비스를 만들어 보는 주제였으며, 강의를 들으면서 사전과제를 발전시키는 방식으로 과..

이슈 회사의 front end 프로젝트는 VueJS 로 돼 있고 점진적으로 NextJS 로 이관하고자 새로 NextJS 레포지토리를 만들어 작업하고 있었다. 그 와중에 VueJS 프로젝트를 수정할 일이 생겼는데, VueJS 프로젝트 dev server 를 실행했더니 무슨... hash 값을 생성하는 데에서 버그가 발생하며 app이 종료됐다. 원인 무슨 이유인가 싶어 구글링 해 보니,NodeJS 버전 이슈란다. VueJS 는 16.x.x 버전을, NextJS 는 18.x.x 버전을 사용하고 있는데, NextJS 를 개발할 때 nvm 으로 버전을 변경해서 발생했던 것이다. 해결(찜찜한 해결) 단순히 NodeJS 버전을 변경해 주기만 하면 되는데, IntelliJ (얼티밋) 에서 edit configurati..

UseEffect 란? UseEffect 는 함수형 컴포넌트에서 sied effect(callback) 를 실행할 수 있게 도와주는 Hook 이다. (React v16.8 에 추가) 즉, 유저가 버튼을 클릭하거나 어떤 상호작용을 통해 컴포넌트 state(변수)가 변경시켰을 때, callback을 수행하도록 할 수 있는 Hook. UseEffect 가 실행될 때 useEffect 는 다음 상황에 실행된다. 1. 처음 component 가 렌더링 될 때 2. component의 state(변수) 가 변경될 때 Dependancy Array (의존성 배열) useEffect 는 '어떤 상태(변수)가 변했음'을 감지하고 callback 을 실행시켜 준다. '어떤 상태' 를 이 useEffect 가 가지는 '의존..