어쩌다 의료영상 데이터를 계속 접하고 개발하는 일을 하다보니..DICOM 관련 문서를 제대로 읽고 정리해보고자 한다.Oleg Pianykh, *Digital Imaging and Communications in Medicine (DICOM): A Practical Introduction and Survival Guide* (Springer, 2008) 정리참고 챕터: Ch 1–4 + Ch 5.1–5.3 이 글에서는 "DICOM이 도대체 뭔가?" 부터 시작해서,DICOM의 가장 기본 단위인 VR (Value Representation, 데이터 표현 방식) 까지 정리할 예정이다.1. DICOM이란?DICOM = Digital Imaging and COmmunications in Medicine흔한 오해부터 ..
Suspense가 무엇인고...? Suspense란?Suspense는 React 컴포넌트를 잠시멈추고 기다릴 수 있도록하는 기능이다. 로딩 중인 컴포넌트 대신 사용자에게 일시적인 UI(fallback)을 보여주고 준비가 되었을 때 실제 컴포넌트를 보여준다. Suspense 기본 문법import { Suspense } from 'react';로딩 중...}> MyComponent 가 로드 중일 경우 대신 fallback{로딩 중...}을 대신 보여주고 로드가 완료되면 로 대체된다. Suspense가 사용되는 경우1️⃣ React.lazy()로 지연 로딩을 하는 경우 import { Suspense, lazy } from 'react'const LazyComponent = lazy(() => impo..
Next.js 란?React 기반의 FullStack 웹 프레임워크이다. React 는 오직 화면을 그리는 렌더링 로직만 담당하기 때문에 라이브러리지만 Next.js 는 React 위에 서버 사이드 렌더링, 라우팅, 데이터 로딩, 정적 생성 등을 얹은 풀스택 도구를 제공하기 때문에 프레임워크이다. 특징React 기반의 풀스택 프레임워크로 프론트와 백엔드를 통합해서 개발이 가능하다. PageRouter 와 AppRouter 를 모두 지원한다. Nested Layout (layout.tsx - page.tsx) 구성이 가능하다. 다양한 렌더링 방식을 지원한다. (SSG, CSR, SSR, ISR)Tailwind, Typescript를 지원하며, Core Web Vitals에 최적화되어있다. PageRoute..
타이머 함수들과 process.nextTick() 의 이벤트 루프를 살펴보자! 위 그림을 보면, 바깥의 원이 전체적으로 Event Loop를 의미하고, 원에 걸쳐있는 블록들은 각각의 이벤트 루프 단계를 의미하며, 원안의 블록들은 Microtask Queue (우선 처리되는 작은 작업들) 를 의미한다. process.nextTick()Node.js 전용 함수이다. 가장 우선순위가 높은 Microtask 이다. 현재 실행 중인 콜스택이 끝난 직후 바로 실행된다.process.nextTick(() => console.log('nextTick')); -> Promise 보다도 먼저 실행된다. Promise .then(), .catch() 등으로 등록한 비동기 작업들이다.Microtask Queue에 쌓인다...
PreRendering 이란?HTML을 미리 만들어두는 과정이다. 서버에서 React 컴포넌트를 실행하여 그 결과물인 HTML(DOM 문자열)을 브라우저에 먼저 보내는 것을 말한다.이를 통해 사용자는 자바스크립트가 로딩되기 전에도 빠르게 콘텐츠를 볼 수 있고, 이는 SEO에 유리하며 초기 로딩 속도를 개선할 수 있다. Hydration 이란?미리 렌더링된 HTML에 Javascript에 붙이는 과정이다. 서버는 React Component를 HTML로 렌더링한다.클라이언트(브라우저)는 이 HTML을 받아 React가 DOM 트리를 동일하게 다시 그려본다. (virtual DOM)그 후 이벤트 핸들러와 상태(state)를 연결해 실제로 작동 가능하게 만드는 것이 hydration이다.❓Hydration이..
❓ 전통적인 js 비동기 프로그래밍의 역사1) Callback2) Promise3) Generator4) Async / Await Promise 란?비동기 작업의 성공/실패 결과를 다루기 위한 객체이다. promise는 callback pattern의 단점을 극복하기 위해 출현하였다. callback pattern 은 콜백 지옥, 가독성 저하, 에러 처리 어려움 등의 문제가 있었다.callback pattern 과 다르게 promise는 안전하며, 유지보수 쉬운 코드작성이 가능하다. promise는 다음 3가지 상태를 가진다. pending: 아직 완료되지 않음fulfilled: 성공적으로 완료됨 (resolve)rejected: 실패함 (reject)pending → fulfilled or reje..