개발 블로그

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

퍼사드는 성벽이라는 뜻으로 외부에서 내부의 로직을 알 수 없음을 의미한다.방대한 코드에 대해서 각각의 간략한 인터페이스를 제공해서 하위 시스템의 기능에 편하게 접근할 수 있다.또한 하나의 퍼사드가 생성되면 또 다른 시스템에서 호출할 수 있어 재사용하기 좋다.사용자는 서브 함수들에 대해 알 필요가 없고, 간단한 실행만으로 복잡한 로직을 구현할 수 있다는 장점이 있다.또한 외부에서 내부 로직에 의존하는 문제를 감소시킬 수 있어 유지 보수의 측면에서 유리한 측면이 있다. function checkValitaion(phoneNumber) { if (phoneNumber.length !== 11) return false; return true;}function getToken() { return Ma..

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

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

이전 블로그에서 이동된 글입니다.개요최근 면접을 준비하면서 http와 https의 차이점에 대해 공부하게 되었습니다. 면접에서 자주 등장하는 단골 질문이지만 이전에는 모호하게만 알고 있던 내용이었기 때문에 새롭게 정리해보게 되었습니다. 실제로 네트워크 상에서 어떤 과정이 발생하는지, https를 사용할 때 데이터가 어떻게 암호화되는지 등을 이해하고 싶었고, Wireshark라는 툴을 활용하게 되었습니다.Wireshark는 오픈 소스 패킷 분석 도구로, 네트워크에서 전송되는 패킷(네트워크 계층의 데이터 단위)을 실시간으로 수집하고 이를 화면에 표시해줍니다. 또한 다양한 조건으로 필터링하여 원하는 패킷 정보만 검색할 수 있습니다.http와 https를 모두 지원하는 웹사이트를 찾아서 각 프로토콜 환경의 패킷..

이전 블로그에서 이동된 글입니다. 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(){})스크롤 이벤트를 사용하여 요소의 위치를 관찰하는 방법은 성능상 문제를 발생시킬 수 있습니다. 스크롤 이벤트는 사용자가 스크롤을 할 때마다 호출되며 이벤트에 등록된 콜백 함수도 함께 실행됩니다. 간단한 동작이라면 상관없을 수도 있지만 여러 개의 이벤트가 함께 등록되고 복잡한 연산을 수행하게 된다면 브라우저의 메인 스레드에도 영향을 끼쳐 페이지가 버벅이는..