개요사내 프로젝트를 진행하던 와중, 한 개발자 분이 Higher Order Component(이하 HOC) 패턴으로 어떤 컴포넌트를 작성했습니다.React Query를 기반으로 데이터 fetching 과 함께 prop drilling으로 response를 조작하여 전달하는 컴포넌트였는데, 동작에서는 사실상 문제는 없었지만 HOC 패턴은 현대 React 코드에서는 잘 사용하지 않는 패턴입니다.이는 React 공식 문서에서도 명시하고 있는 부분입니다.어떤 디자인 패턴이 왜 나왔는지, 어떤 경우에 사용하는지에 대해서 정확히 인지한다는 것은 단순히 기술을 알고 적용하는 것에 비해서 훨씬 깊은 생각과 경험을 제공하는 것 같습니다.React 생태계에서 HOC 패턴은 컴포넌트 로직을 재사용하기 위한 강력한 디자인 패..

개요airbnb 가이드 스타일로 eslint를 셋업하고 Next.js page 구성 요소를 구현하기 위해 화살표 함수를 사용하니 eslint 에러가 발생했습니다.const HomePage: NextPage = () => ( HomePage ); 크리티컬한 이슈 내용은 아니지만 소소하게 정리하려 합니다.function-component-definitionairbnb는 이름 추론을 이유로 화살표 함수보다 함수 선언을 선호한다. 어떤 내용인지 보겠습니다.const add = (a, b) => a + b; 여기서는 함수의 이름이 없습니다.함수를 정의하는 것과 동시에 add 라는 변수에 할당되었습니다.화살표 함수는 보통 익명 함수로 사용되며, 변수에 할당된 이름을 통해 호출됩니다.function sub..

개요CSR, SSR, SSG는 각 장단점을 가지고 있고 용도가 달라서 컨텐츠에 맞게 사용하면 되는 렌더링 기법입니다.그 중 Next.js의 ISR에 관해 비용적인 측면에서 이야기를 해보려 합니다.개발자가 설정한 임의의 주기 혹은 시점에 정적 파일을 재생성 한다는 것은, 얼핏 들었을 때 과도한 자원 소모를 야기할 수도 있다는 생각이 들었습니다.보통 프론트엔드에서 정적 파일은 빌드 타임에 생성되는 것인데, 빌드라는 단어 자체가 무거운 이미지를 연상하게 되는 것 같습니다. 그래서 Next.js의 SSG(ISR)과 SSR의 비용 효율에 대해 공식 문서와 사람들의 포스팅을 보며 나름의 판단을 내려보았습니다.Incremental Static Regeneration?Next.js 는 사이트를 구축한 후 생성된 정적 ..

개요FLUX 패턴의 대표격인 Redux는 React와는 상관이 없고 바닐라 js에서도 사용할 수 있는 상태 관리 라이브러리지만 40%가 넘는 React 개발자가 사용하고 있습니다. 그럼에도 Redux는 꽤 말이 많습니다. 비동기 처리를 위한 미들웨어 사용과 익숙치 않은 동작원리 라던지, 상태 초기화와 동기화에서 유지관리해야할 코드도 많아집니다.Props Drilling을 최소화 함으로써 복잡도를 낮추는데 의의가 있는 것인데, 오히려 복잡한 구조로 인해 복잡도가 올라갈 수 있고 이것에 대해 지적하는 개발자들이 생기기 시작합니다.개발자는 장애물이 커지면 돌아갈 길을 모색하는 모양입니다. SWR은 Next.js를 만든 Vercel 팀의 "데이터를 가져오기 위한 React Hooks" 입니다. 사실 SWR은 상..