본문 바로가기

분류 전체보기321

크롬 개발자 도구 살펴보기 Network 웹 페이지에서 발생하는 모든 네트워크 트래픽을 알려주며 어떤 리소스가 어느 시점에 로드되는지, 리소스의 크기 등을 확인 가능 Performance 웹 페이지가 로드될 때 실행되는 모든 작업을 시각화 개발자도구의 Performance 탭에 직접 들어가도 되고, Lighthouse의 View Original Trace 로 접근해도 된다. CPU 차트 시간에 따라 CPU가 어떤 작업에 리소스를 사용하고 있는지 비율 자바스크립트는 노란색, 렌더링/레이아웃 작업은 보라색/페인팅 작업은 초록색/기타 시스템 작업은 회색 어느 타이밍에 어느 작업이 주로 진행되고 있는지 파악 가능 빨간색 짙은 선은 병목이 발생한 지점 Network 차트 CPU 차트 및 막대 형태로 표시 진한 막대는 우선 순위가 높은 네트.. 2023. 7. 26.
웹 페이지 최적화의 종류 최적화의 종류 로딩 성능 서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할 때 성능 다운로드해야 하는 리소스 수를 줄이거나 크기를 줄이는 것에 중점, 코드를 분할하여 차등을 두어 다운로드하는 방법 등을 사용 렌더링 성능 리소스를 가지고 화면을 그릴 때의 성능 자바스크립트 코드에 크게 영향이 있고 코드를 얼마나 효율적으로 작성했느냐에 따라 화면이 그려지는 속도와 사용자 인터렉션의 자연스러움이 달라진다. 브라우저의 기본 동작 원리나 사용하는 프레임워크 라이프사이클 등의 이해가 필요 최적화 툴 Squoosh 웹에서 서비스 되는 이미지 압축 도구 간편하게 이미지 포맷이나 사이즈를 변경 가능 (Resize, Compress) compress의 압축 포맷과 Quality 를 70~80 정도로 변.. 2023. 7. 25.
React Chart 라이브러리 소개 기본적으로 차트 라이브러리는 자바스크립트 기준으로 만들어져 있다. Chartjs, C3js, D3js ... 이러한 라이브러리를 리액트에서 사용해주기 위해선 리액트 래퍼 형식으로 된 라이브러리를 사용해줘야 한다. Chartjs : 일반적인 차트 그릴 때 사용, 단순하고 유연, 간단한 데이터 표현에 최적되어 있으나 확장성은 부족하다는 평이 있다. D3js : 라이브러리 패키지의 크기가 작은 편이며 svg 를 활용한다. 웹 표준에 가깝고 활용가 높지만, 러닝커브가 높으며 이미지 요소가 많아질 경우 canvas에 비해 성능이 좋지 못할 가능성이 있다. 회사에서 쓸 라이브러리라 라이선스를 고려하여 오픈 소스라서 제한 없이 사용할 수 있는 리액트 전용 차트 라이브러리를 정리했다. react-chartjs-2 ht.. 2023. 7. 24.
DICOM 의 기본 개념 DICOM Digital Image and Communication in Medicine 의료 영상과 더불어 연관된 정보가 함께 포함되어 있는 파일이자 표준 데이터 포맷이다. 다만, 항상 의료 영상을 포함하고 있는 것은 아니며, 의료 영상 자체는 포함할 수 있는 데이터 중 하나일 뿐이며 영상 자체를 포함하지 않은 DICOM 형식도 존재한다. DICOM의 기본 단위 SOP Service Object Pair 영상 정보: Information Object = IOD(Information Object Definition) 영상 정보에 대한 규정 data 형식만 나열되어 있고, 실제 data value가 들어갈 자리는 빈칸으로 남아있음 → 여기에 실제 data value가 들어가게 되면 Information O.. 2023. 7. 23.

티스토리툴바