개발 블로그

1. 클라우드 컴퓨팅네트워크와 클라우드의 차이네트워크는 물리적인 통신 장치와 연결망을 의미한다. ex) LAN, WAN, 인터넷 등클라우드는 네트워크를 활용하여 가상화된 서버, 스토리지, 어플리케이션 등을 제공하는 IT 서비스이다.네트워크는 연결망을 구축하는 인프라이고 클라우드는 그 기반 위에 구축되는 서비스이다. 클라우드 컴퓨팅의 장점민첩성(Agility): 짧은 시간 내에 서비스를 배포. 리소스를 빠르게 구동.탄력성(Elasticity): 빠른 규모 조정비용 절감: 사용한만큼만 지불전 세계에 배포: 광범위한 네트워크 액세스 클라우드 컴퓨팅 배포 모델프라이빗 클라우드 배포(= 온프레미스 배포)하이브리드 배포클라우드 배포 EC2 인스턴스 유형범용: 균형있게 리소스가 고르게 분포.컴퓨팅 최적화: 고성능 프..

개요신규 프로젝트에서 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# oryarn add next@latest react@..

개요CIDR은 IP 주소를 보다 효율적으로 할당하고 라우팅하기 위해 도입된 방식입니다.기존의 클래스 기반 주소 체계는 A, B, C와 같은 고정된 크기의 주소 블록만을 제공하여 실제 네트워크의 크기와 상관없이 불필요하게 많은 주소가 할당되거나, 반대로 필요한 만큼의 주소를 할당받지 못하는 비효율적인 문제가 있었습니다.이러한 한계를 극복하기 위해 주소 할당에 유연성을 제공하고 IP 주소 자원의 고갈 문제를 해결하기 위한 CIDR이 등장하게 되었어요. 기존 클래스 기반 주소 체계IPv4 주소는 32비트(2^32)로 구성되며, 0.0.0.0 ~ 255.255.255.255까지의 숫자 조합으로 표현됩니다.IPv4 주소 할당 초기 방식으로, IP 주소를 A, B, C, D, E의 5가지 클래스로 구분하여 관리했었..

개요Suspense는 아직 준비되지 않은 UI 일부에 대해 로딩 상태를 선언적으로 표시할 수 있게 해주는 기능입니다.처음에는 React 16.6에서 실험적인 기능으로 소개되었는데 React 18에서 정식으로 릴리즈되면서 기능이 확장되었습니다.기존에는 주로 React.lazy와 함께 코드 스플리팅을 위해 사용됐으나 React 18부터는 코드뿐만 아니라 데이터 로딩이나 SSR 측면에서도 활용할 수 있게 되었습니다.추후에는 거의 모든 비동기 작업에 Suspense를 적용할 수 있도록 React 팀이 지속적으로 기능을 확장해 나갈 계획이라고 합니다. import { Suspense, lazy } from 'react';const LazyComponent = lazy(() => import('./LazyCompo..

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