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

검색 엔진 최적화를 위해 sitemap xml 파일이 필요하여 로직을 구상하였습니다. XML 파일은 수동으로 작성해도 되고 generator 사이트도 있어서 프로젝트 폴더에 넣어주기만 하면 되지만, 동적 라우팅을 사용하는 경우는 수동으로 작성하기에는 한계가 있을 것입니다. 현재 저에게 필요한건 메인 페이지와 트렌드 페이지, 동적 경로를 사용하는 post/[id] 단 세 개의 경우입니다. // sitemap.xml.js import client from "@libs/server/client"; const generateSitemap = (data, origin) => { let xml = ""; data.pages.map((page) => { xml += ` ${origin + page.location} ..

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