Leaflet은 오픈 소스 자바스크립트 라이브러리로, 주로 OSM(OpenStreetMap) 같은 무료 지도 데이터를 사용하거나, 타일 기반의 지도 데이터를 불러와 사용할 수 있다. 기본적인 사용 방법만 익히면 별도의 API KEY 설정 없이 간단하게 사용 가능하고, 비용 지불의 걱정이 없다. react-leaflet 같은 라이브러리를 통해 React에서…

데이터 시각화란 데이터를 그래프, 차트, 지도, 인포그래픽 등 시각적인 형태로 표현하여 복잡한 정보나 패턴을 쉽게 이해할 수 있도록 하는 방법이다. 대량의 데이터를 시각적으로 표현함으로써 숨겨진 경향, 상관관계, 이상치 등을 더 직관적으로 파악할 수 있게 하며, 이를 통해 의사 결정 과정에서 통찰력을 제공한다. 차트는 데이터를 시각적으로 표현하여 정보를 …

웹 개발에서는 다양한 기기에 대응하는 화면을 제공하는 것 또한 중요하다. React에서 사용자의 기기 정보를 탐지하여 적절한 UI를 제공할 수 있는 라이브러리인 react-device-detect에 대해 다루어 보았다. react-device-detect란? 몇몇 사이트들은 모바일 접속을 한 경우 특정 창을 띄우거나, 모바일 버전이 개발되지 않았다면 제한…

360도 회전하는 이미지를 볼 수 있고, 더 나아가 드래그 이벤트를 통해 그 물체를 조작해 볼 수 있는 기능은 다양한 웹사이트에서 사용되고 있다. 주로 자동차, 신발, 시계 등의 상품을 관찰할 수 있게 서비스하는 경우가 많다. 이 포스트는 360 뷰어를 구현할 수 있는 다양한 방법 중 react-360-view 라이브러리를 통해 구현하는 법과 오류 방지 …

웹 페이지 개발을 하다 보면 이미지의 로딩에 의해 렌더링이 부자연스럽거나 끊기는 현상이 종종 발생한다. 이를 처리하기 위한 다양한 방법 중 프리 로딩(Pre Loading)을 예제를 통해 적용시켜 보았다. Image Pre Loading 이미지 프리 로딩 (Image Pre Loading)이란 사용자가 실제로 요청하기 전에 미리 이미지를 다운로드하여 캐시…

레포트 제출 용도로 작성했던 React Tutorial입니다. 이 글은 웹개발 및 React 입문자를 대상으로 작성되었습니다. 설치 및 실행, 기본 구조, 컴포넌트 및 Props 등에 대해 기초적인 부분만 다룹니다. Phase 1. React란? React는 Facebook에서 개발한 Javascript 기반 오픈 소스 라이브러리입니다. 최근 들어 웹개발…

React-Quill은 간편하게 사용할 수 있는 Rich Text Editor이다. 하이퍼링크, 글꼴, 색상, 스타일, 이미지 등의 양식을 쉽게 구성할 수 있다. React-Quill 구성하기 React App에 react-quill을 설치한다. App.js에 다음과 같이 Quill 에디터를 구성하였다. 상단 버튼을 클릭하면 콘솔에서 에디터의 value를…

지난 포스팅에서 작성했던 Express 서버를 Heroku에 배포해보려고 한다. > React에서 Open API XML 데이터 파싱하기 (with Express) Heroku Heroku는 여러 프로그래밍 언어를 지원하는 클라우드 PaaS로, 백엔드 서버를 이 플랫폼에 배포할 수 있다. 얼마 전 무료 서비스가 중단되었지만, 학생 개발자 프로그램으로 플랫…

React 환경에서 XML로 구성된 공공데이터포털 API를 Express 서버로 파싱하기 XML 형식의 Open API 예전 프로젝트에서 공공데이터포털에 있는 XML(Extensible Markup Language) 형식의 API를 다룬 적이 있다. 데이터를 이용하여 원하는 형태로 구현하는 것 까지는 문제가 없었지만, GitHub Page, Vercel …

루프백 주소(Loopback Address)로 설정된 개발 서버를 다른 디바이스에서 테스트하고 싶을 경우 IPv4 주소:포트번호를 입력하여 접속하는 방법에 대하여 Loopback Address 개발을 하다 보면 자주 만나게 되는 127.0.0.1은 특수 목적을 지닌 IPv4 주소로, 루프백 주소(Loopback Address)라고 한다. 자기 자신을 가리…