개발 블로그

개요신규 프로젝트에서 React와 D3를 사용한 차트 개발을 담당하게 되면서, 어떻게 하면 좀 더 가독성 좋고 선언적인 D3 코드를 작성할 수 있을지에 대한 고민이 있었습니다.이전 프로젝트에서 주로 사용된 방식은 DOM 요소를 직접 선택해서 데이터와 속성을 추가하는 방식이었습니다. 하지만 이러한 방식이 React에서는 효과적이지 않으며, 한 줄로 길게 체이닝을 이루는 코드가 가독성 면에서 좋지 않다고 생각하여 이를 해결하기 위한 몇 가지 개선안들을 찾아보게 되었습니다.  React에서 D3 라이브러리를 효율적으로 활용하기 위한 여러 가지 방법들을 프로젝트에 적용해보며 새롭게 알게된 점들을 예제코드와 함께 간단히 정리해 보았습니다. D3.js란?D3.js는 차트, 선 그래프 등과 같은 재사용 가능한 데이터..

next.js 12.2버전부터 안정화된 기능입니다.Pgaes Router 기반으로 작성하였습니다. On-Demand Revalidation 방식은 원하는 시점에 정적 페이지를 업데이트할 수 있는 기능입니다. 전체 사이트를 새롭게 배포하지 않고도 특정 페이지를 업데이트할 수 있다는 점에서 기존의 ISR 방식과 유사하지만, 특정 시간마다 재검증이 이루어지는 것이 아니라 필요한 시점에 재검증을 수행할 수 있다는 점에서 차이가 있습니다. Incremental Static Regeneration (ISR)먼저, ISR을 사용하기 위해서는 getStaticProps 함수의 리턴값으로 revalidate 속성을 추가해야 합니다. export async function getStaticProps() { const r..

개요Next.js 12.1버전으로 개발했던 프로젝트를 13버전으로 업그레이드하면서 경험한 내용을 정리해 보았습니다.얼마 전 Next.js 13.4가 릴리즈되면서 App Router의 안정화, Turbopack의 베타 버전 적용 등의 큼직한 변경점들이 있었습니다. 완전히 적용시키기에는 아직 이해가 부족한 부분이 있어서 일단 기존의 페이지 라우터 방식을 유지하면 점진적으로 업그레이드를 진행하려고 합니다.먼저 새로워진 next/image, next/link 컴포넌트에 대한 변경사항에 대해 살펴보고, 프로젝트에 필요한 리팩토링도 진행해 보았습니다. Command 실행하기npm i next@latest react@latest react-dom@latest eslint-config-next@latest# oryar..

이전 블로그에서 이동된 글입니다. Next.js 12버전을 기준으로 작성한 글입니다. Next.js는 서버사이드 렌더링(SSR)을 지원하는 React 프레임워크입니다. 기존의 전통적인 SSR 방식은 웹페이지 이동 시에 페이지를 요청할 때마다 서버로부터 새롭게 생성된 HTML 파일을 받아와 화면에 렌더링하였습니다. 이러한 방식은 서버 자원을 많이 소모하고 불필요한 트래픽을 유발했습니다. Next.js는 초기 페이지 로딩에 대해서는 SSG, SSR 방식으로 동작시킬 수가 있고, 이후의 요청에 대해서는 기본적으로 CSR 방식으로 동작하기 때문에 SSR 방식의 장점인 SEO에 유리하면서도 CSR의 이점을 활용할 수 있습니다. Next.js의 렌더링 방식 Next.js에서는 서버사이드 렌더링(SSR), 정적 사이..

이전 블로그에서 이동된 글입니다.기존 스크롤 이벤트 사용 시 문제점페이지의 특정 요소가 화면에 보여지고 있는지 확인하기 위해서는 브라우저의 스크롤에 이벤트를 등록하고, 스크롤할 때마다 요소의 위치를 확인하고 해당 위치에 도달하였는지 계산하는 콜백 함수를 등록해야 합니다. document.addEventListener("scroll", function(){})스크롤 이벤트를 사용하여 요소의 위치를 관찰하는 방법은 성능상 문제를 발생시킬 수 있습니다. 스크롤 이벤트는 사용자가 스크롤을 할 때마다 호출되며 이벤트에 등록된 콜백 함수도 함께 실행됩니다. 간단한 동작이라면 상관없을 수도 있지만 여러 개의 이벤트가 함께 등록되고 복잡한 연산을 수행하게 된다면 브라우저의 메인 스레드에도 영향을 끼쳐 페이지가 버벅이는..