본문 바로가기

분류 전체보기321

React 컴포넌트 설계에 대해.. 컴포넌트의 개념 시스템을 구성하는 요소 중 하나의 단위로써, 공통되는 부분을 모듈화하여 재사용할 수 있는 단위, 데이터를 보여주기 위한 UI 요소이다. 설계를 위한 원칙 확장성 재사용성 관심사에 따른 코드 분리 단일 책임 원칙 의존성을 컴포넌트가 직접 참조하지 않고 외부로부터 주입 역할은 드러내고 구현은 감추기 - 순수함수 선언형 프로그래밍 무엇을 할 것인가에 초점을 두고 결과만 기술하여 어떻게 해야하는지는 기술하지 않는 프로그래밍 기법 의도에 집중한 프로그래밍 방법 / 단방향 데이터 바인딩 처리 명령형 프로그래밍 무엇을 어떻게 할 것인가 리액트의 공식문서 상 선언형 프로그래밍 된다고 기재됨 설계를 잘하면 리액트는 데이터가 변경될 때 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다. ex. React.l.. 2023. 7. 18.
자바스크립트 - 멀티미디어 파일 데이터 자료형 정리 (Blob, File, FileReader, TypedArray) 일을 하다보니 영상 자료를 다루게 되었고 자료형을 정확히 정리할 필요가 있다고 여겼다. Blob 객체 자바스크립트에서 텍스트, 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용하는 자료형 파일류의 불변하는 미가공 데이터를 나타내는 객체 텍스트와 이진 데이터의 형태로 읽을 수 있으며 ReadableStream으로 변환 후 메서드를 사용하여 데이터를 처리할 수 있다. 멀티미디어 파일의 데이터들을 최적화하기 위해 비동기 처리로 읽어올 땐 블롭으로 바로 변환시키는 것이 아닌, ArrayBuffer로 변환을 해주고 이 값을 Uint8Array 등의 DataView로 처리해줘야 한다. Blob은 File 인터페이스를 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 확장한 것이므로 모든 블.. 2023. 7. 17.
DICOM 네트워킹 용어 DICOM Network protocol 서로 다른 어플리케이션들이 DICOM 데이터를 교환할 때 사용되는 표준화된 방법을 정의한 것이며 어플리케이션 간 규칙이므로 TCP/IP의 상위 layer에 정의된 규칙 DICOM은 영상 데이터 뿐만 아니라 DICOM 데이터를 교환하기 위해 전송되는 메세지 역시 DICOM 표준에서 정의하는 형식을 따라야 한다. 즉, DICOM 영상의 저장 방법 및 데이터 교환을 위한 Communication방법들은 모두 DICOM 표준에 정의 되어 있다. UID DICOM에서 사용되는 Unique ID, 세계적으로 유일한 값이어야 한다. UID 생성 규칙 ISO ID(1) ANSI ID(2) 국가코드(한국-410) 제조사의 코드 예를 들어, DICOM은 1.2.840.10008 이.. 2023. 7. 16.
Toast UI (feact. React) 사용기 3 - Grid 테이블을 만들자 언제나처럼 설치부터 npm install --save @toast-ui/react-grid import 'tui-grid/dist/tui-grid.css'; import Grid from '@toast-ui/react-grid'; 예제를 보며 적용해보기 https://github.com/nhn/tui.grid/tree/master/packages/toast-ui.react-grid const data = [ { id: 1, name: "Editor" }, { id: 2, name: "Grid" }, { id: 3, name: "Chart" }, ]; const columns = [ { name: "id", header: "ID" }, { name: "name", header: "Name".. 2023. 7. 13.

티스토리툴바