React에 HOC 라는 컴포넌트가 실무에서 auth 용도로 사용된다는 걸 얼핏 봤었다. HOC의 구조가 특이하다보니 자료를 찾아보면서도 이렇게 쓰면 되겠다 싶은 느낌이 잘 안오기도 했지만, 언제 사용하면 좋겠다 정도의 느낌만 있었다. 이번에 프로젝트를 하면서 HOC를 써보기 좋은 구조가 나와서 직접 구현해보고 공유해보려고 한다. 1. HOC가 뭐고 언제 유용한가요? 공식 문서에는 아래와 같이 나와있다. 고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다. 구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환..

라이엇에서 기본 제공해주는 API가 여러 가지가 있습니다. 계정 정보나 티어 같은 정보를 GET 할 수 있는 API부터 기본 챔피언 정보를 객체로 받아볼 수 있는 ddragon 까지 존재하는데, 그냥 가져다 써서 파싱하는 거보다 챔피언 툴팁에 curly 변수로 선언되어있는 변수를 치환하는 과정을 설명해보려고 합니다. 아무무 Q 스킬로 살펴보는 정보 객체 분석 주요깊게 봐야할 것은 툴팁인데, 롤 클라이언트나 전적검색 사이트에서 볼 수 있는 스킬 설명이라고 이해하면 됩니다. api에서 받아볼 수 있는 특정 스텟이나 내부에서 관리되는 상태가 있는 경우에는 커스텀된 태그가 있고 그 안에 Curly bracket으로 변수가 선언되어있습니다. 아무무의 Q스킬을 좀 더 자세하게 봐보겠습니다. "아무무가 붕대를 던져 ..

0. 배경 React의 props로 Generic을 넘겨줘야 할 일이 종종 있는데 대표적으로 드롭다운(셀럭터)를 만들 때가 바로 그렇다. 직관적으로 생각해보면 새로 컴포넌트 인스턴스를 생성할 때 적절한 타입을 캐스팅 해주면 되지 않을까 싶은데 React.FC에서 Generic이 지원되지 않는다는 점에서 문제가 일어난다. 이 글에서는 드롭다운에서 Generic을 왜 넘겨줘야하는지 그 전략과 어떻게 해결했는지 공유해보려고 한다. 1. 왜 제네릭을 사용하려고 하는가? onChangeSortFilter(item.customData)} /> 드롭다운을 구현할 때 크게 고려해야할 것은 두 가지이다. UI로 나타낼 string. 상태관리 등 내부 로직에 필요한 커스텀 데이터. 드롭다운을 클릭 했을 때 부모 컴포넌트에..

'React' refers to a UMD global, but the current file is a module 그냥 기본설정대로 CRA를 썼을 때는 매번 JSX나 TSX의 최상단에 import React from "react"; 이 코드를 넣어서 동작시켜야한다. 반면 Next.js와 같은 환경에서 동작시켰을 때는 저 코드 없이도 JSX를 사용할 수 있는데 그 설정 역시 공식문서에서 다뤄져 있었다. https://ko.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html Introducing the New JSX Transform – React Blog Although React 17 doesn’t contain new features..

1. 왜 CRA 안쓰나요? 한 귀로 흘려들었던 수많은 정보 중에 production 대상용 프로젝트는 CRA를 쓰지 않는다는 내용이 있었다. 이번 포스팅을 준비하면서 열심히 구글링해본 결과 그 이유는 아래 이유로 요약할 수 있다. 1. SSR 설정을 위해 eject를 하고 나면 결국엔 CRA를 쓰는 이유가 없기 때문에 2. build 명령어에서 development와 production에서 사용할 플러그인 선택이 불가능해서 (js 코드량을 최대한 줄이는 기적의 운영을 위해서) 3. react-scripts로 명령어가 추상화되어있어서 설정 flow 이해가 힘들어서 약간 다른 이야기를 해보자면, React를 처음 입문할 때 직접 설치하는 과정을 튜토리얼로 본 적 있었는데 강사님 스크립트를 따라치다가 뭔가 꼬..

문제 요약 위와 같은 모양으로 배열된 숫자 자판이 있습니다. 숫자 타자 대회는 이 동일한 자판을 사용하여 숫자로만 이루어진 긴 문자열을 누가 가장 빠르게 타이핑하는지 겨루는 대회입니다. 대회에 참가하려는 민희는 두 엄지 손가락을 이용하여 타이핑을 합니다. 민희는 항상 왼손 엄지를 4 위에, 오른손 엄지를 6 위에 두고 타이핑을 시작합니다. 엄지 손가락을 움직여 다음 숫자를 누르는 데에는 일정 시간이 듭니다. 민희는 어떤 두 숫자를 연속으로 입력하는 시간 비용을 몇몇 가중치로 분류하였습니다. 이동하지 않고 제자리에서 다시 누르는 것은 가중치가 1입니다. 상하좌우로 인접한 숫자로 이동하여 누르는 것은 가중치가 2입니다. 대각선으로 인접한 숫자로 이동하여 누르는 것은 가중치가 3입니다. 같지 않고 인접하지 않..