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

개요 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..