이 글은 https://youtu.be/2LhoCfjm8R4 강의의 2번째 강의를 요약하였습니다.
[ 웹 기술을 이용하는 이유 ]
시각화를 하는데 다른 기술(파이썬, R, 자바 등)이 아니라 웹 기술을 이용하는 이유는?
1. 웹 브라우저를 이용하여 누구나 접근 가능하다.
2. 내 컴퓨터에 설치할 필요가 없다.
3. 모던 자바스크립트 기술을 이용할 수 있다.
4. 커스텀 디자인 작업이 가능하다.
5. 상호 작용이 가능하다.
우리가 데이터 시각화를 하기 위해 쓰이는 기술은 위와 같습니다.
1. HTML : 웹 페이지의 내용과 간단한 형식을 표현합니다. 일종의 뼈대(Skeleton)과 같습니다.
2. CSS : 웸 페이지를 꾸밀 수 있습니다. 일종의 Skin(피부), Theme(테마)와 같습니다.
같은 HTML을 CSS를 어떻게 사용하느냐에 따라 보이는 양식이 완전히 달라집니다.
CSS Zen Garden: The Beauty of CSS Design
So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi
www.csszengarden.com
위의 Zen garden 에 들어가보셔서
오른쪽 테마들을 클릭해보시면 똑같은 HTML을 CSS를 어떻게 이용하느냐에 따라 완전히 달라진 모습을 보실 수 있습니다.
3. SVG : SVG는 Raster 와 다르게 벡터를 활용했기 때문에 이미지를 확대/축소해도 픽셀이 깨지는 현상이 없습니다.
https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg
File:Ghostscript Tiger.svg - Wikimedia Commons
commons.wikimedia.org
SVG를 설명할 때 대표적으로 쓰이는 호랑이 그림입니다.
html 소스를 보면 수많은 stroke로 연결되어 있음을 알 수 있습니다.
3. JS : javascript를 이용하면 동적인 홈페이지를 만들 수 있습니다.
4. D3 : Data Driven Documents의 약어로 우리가 데이터 시각화를 할 때 사용할 라이브러리 입니다.
5. React : 가장 많이 쓰고있는 프론트엔드 프레임워크인 리액트죠. 컴포넌트와 상태관리를 통해 더 효율적인 코드를 작성할 수 있습니다.
[ 얼굴 그리기 ]
강의를 보고 복사 붙여넣기 하지말고 직접 코드를 입력하라고 하십니다.
tag는 브라우저가 element로 렌더링하고, 이러한 element들은 nested tree 구조 안에서 생성됩니다. 이 전체 문서를 DOM(Documnet Object Model)이라고 부릅니다.
svg는 default width와 height를 가지고 있기 때문에 width와 height를 입력하지 않으면 그림이 잘릴 수 있습니다.
body 태그는 default margin이 있습니다.
margin: 0과 overflow: hidden 을 이용하여 default margin을 없애고 스크롤 바를 없앱니다.
위는 inline css로 리팩토링 해줍니다.
리팩토링은 코드를 cleanup 해주는 것입니다. 이를 해주지 않으면 tecnhincal debt이 쌓이는데요, 여유가 된다면 기술적 채무는 바로 갚아주는 것이 좋습니다!
cx는 center x, cy는 center y 입니다. fill로 배경색을 채우고, stroke로 테두리 색을 정합니다. stroke가 있으면 배경과 물체를 구분하기 쉬워집니다. stroke-width로 테두리 두께를 정할 수 있습니다.
자세한 코드는 https://vizhub.com/curran/fbf0dfea4bcc41f898f3ab9f10c4a279 에 있습니다.
[ React 적용하기 ]
UNPKG
UNPKGunpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:unpkg.com/:package@:version/:file Examples Using a fixed version: You may also use a semver range or a
unpkg.com
강의에서는 웹 브라우저에서 코드를 작성하기 때문에 리액트를 사용할 때 npm이 아니라 cdn을 사용하고 있습니다. 더 풀어서 설명하자면 웹 브라우저로 코드의 결과를 보기 때문에 npm으로 리액트를 설치할 수 없습니다. 그래서 html 내에 <script src="https://unpkg.com/react@17.0.2"></script> 를 넣어서 리액트를 사용합니다. 이 방법을 cdn이라고 합니다.
수업에서 제공하는 VizHub를 사용할 땐 위의 cdn 방식으로 하시면 되고, 로컬 컴퓨터에서 리액트 코드를 개발하시면 npm으로 설치하여 사용하시면 되겠습니다.
코드 : https://vizhub.com/curran/3a00f5c877ac4e30b7269c17f29d2e4d?edit=files&file=index.html
Smiley Face Part II
Smiley face implementation with React.
vizhub.com
이전의 html만 사용하던 코드와 비교하면 변수와 연산을 할 수 있게 되서 원의 좌표를 자동으로 계산해 준다는 것을 알 수 있습니다. 또한 html을 JSX로 표현하는 것으로 바뀌었습니다.
'개발' 카테고리의 다른 글
| [D3JS] 4. 얼굴 그리기 with React & ES6 (0) | 2021.10.09 |
|---|---|
| [D3JS] 3. React + d3 얼굴 그리기 (0) | 2021.10.04 |
| [D3JS] 데이터 시각화란 무엇인가 (2) | 2021.09.25 |
| "나는 LINE 개발자입니다"를 읽고 (0) | 2021.09.12 |
| React에서 setInterval 제대로 쓰는 방법 (0) | 2021.07.29 |
댓글