본문 바로가기

Front-End97

[Highcharts] Series What is a series? 시리즈란 데이터의 묶음으로 선형 그래프나 칼럼들의 집합을 예로 들 수 있다. 모든 차트에 표시되는 데이터는 시리즈 객체로부터 온다. 시리즈 객체는 아래와 같은 구성을 가진다. series: [{ name: '', data: [] }] 주의: 시리즈 객체는 배열이다. 즉 여러개의 시리즈를 포함할 수 있다는 의미이다. Name 키워드는 시리즈에 이름을 부여하는데 이름은 시리즈에 호버링 하면 나타나며 범례에서도 나타난다. The data in a series 실제 데이터의 특성은 배열로서 표현되고 세 가지 방법으로 나타낼 수 있다. 1. 숫자 값 리스트: 이 경우, 숫자 값은 y값으로 해석되고 x값은 0에서 시작해 1씩 증가하거나 pointStart과 pointInterval .. 2022. 5. 12.
[Highcharts] Bubble legend Bubble legend Introduction 버블 범례는 추가적인 엘리먼트로 차트 범례 어디서든 붙일 수 있다. 버블 범례는 버블 시리즈의 크기를 간단하고 투명한 방식으로 크기를 표할 수 있다. Demo with autoranges Demo with the bubble legend styled in a similar way to the series Demo with ranges Installation 사용을 위해선 highcharts-more.js 라이브러리가 필요하다. 버블 범례를 나타내기 위해서는, legend.bubbleLegend.enabled값을 true로 바꾸면 된다. Configuration bubbleLegend의 코드는 세팅하기 매우 쉬우며 다양한 커스터마이징이 가능하다. minSiz.. 2022. 5. 12.
[Highcharts] Axes Axes x축과 y축은 cartesian coordinate system 데이터 값을 가지는 모든 차트에 기본적으로 표시된다. 아래는 축 요소에 대한 대략적인 개념도이다. Axis labels, tickmarks and gridlines 축 레이블, 틱마크 그리고 그리드 라인은 밀접하게 연관되어 있고 함께 확장된다. 포지셔닝은 차트에서 데이터가 표시되는 가장 최적화된 핏으로 계산된다. TICKS 틱마크는 축에 따라 그어진 선들이며 재량 단위를 보여준다. 틱 사이의 공간은 tickInterval과 tickPixelInterval 옵션에 의해 결정된다. 레이블과 그리드 선은 틱 마크와 같은 공간에 놓인다. tickInterval 옵션은 축에서 틱간의 거리를 결정한다. 기본값은 null인데 이는 선형 그리고 .. 2022. 5. 8.
[Hightcharts] Title과 Subtitle Title and subtitle 타이틀은 기본 설정값으로 차트의 최상단에 위치한다. 그리고 섭 타이틀이 그 아래 표시될 수 있다. 타이틀과 섭타이틀은 아래 예시처럼 설정할 수 있다. title: { text: 'My custom title' }, subtitle: { text: 'My custom subtitle' } 타이틀과 섭타이틀은 기본 설정 특성에 따라 이동될 수 있다. (align, float, margin, verticalAlign, x, y) 2022. 5. 6.
[Highcharts] highchart 차트 개념이해 다음 주부터 프런트엔드 개발자로 일을 하게 되었다. 그동안 PM으로 개발자분들에게 작업을 구걸하는(?) 일만 하다가 직업 코드를 짜는 입장이 되니, 기분이 싱숭생숭하다. 보아하니 highcharts 라이브러리로 데이터 시각화 작업을 많이 하는 듯하여, 관련 라이브러리에 대해 본격적으로 공부해 보려고 한다. 우선 highcharts 라이브러리는 각종 지도나 그래프 등 차트를 자바스크립트(혹은 타입 스크립트)를 이용해 프로그래밍적으로 쉽게 구현할 수 있도록 각종 기능을 지원하는 라이브러리다. 대충 코드를 훑어보니 객체 형식으로 개발자가 쉽게 차트를 만들 수 있도록 구현해놓은 점이 눈에 띄었다. 이번 포스팅에서는 highcharts 라이브러리에서는 차트를 어떻게 구성하고 명명하는지 개념을 알아보자. Under.. 2022. 5. 6.
[HTML] tabindex란? 토이 프로젝트를 진행하다가 엔터를 누르면 로그인 버튼 혹은 ok 버튼이 클릭되도록 설정을 하려고 했다. 근데 input 태그에서는 onKeyDown 속성이 잘 작동하지만 div 태그에서는 작동이 되지 않는 문제가 발생했다. 이것저것 찾아보니 미국 성님들께서 tabindex 속성을 부여해야 한다는 글을 발견했다. 실제로 tabindex 속성을 넣으니 잘 작동되었다. 그렇다면 tabindex란 무엇일까? Use the tabindex attribute tabindex는 HTML 엘리먼트가 포커스를 받을 수 있도록 하는 글로벌 특성을 말한다. 엘리먼트에 접근하기 위해 tabindex의 값에 0 혹은 음의 값을 넣어주어야 한다. tabindex의 값이 0 혹은 양의 수를 넣으면 해당 엘리먼트는 tab키를 이용해.. 2022. 4. 23.
[Redux] Redux Persist VS Local storage 오늘 토이 프로젝트에서 Firebase 구글 로그인 기능을 구현하고 흐뭇한 마음으로 이런저런 버튼을 클릭을 하고 있을 때였다. 새로고침 버튼을 누르니 로그인 상태가 풀려버리는 것이었다...! 아차 싶었다. 로그인 상태를 Redux state에 유저정보와 함께 저장해 관리하려고 했는데 생각해보니 Redux는 새로고침과 동시에 모든 State를 초기화한다는 사실을 깜빡했다. 문제 해결에는 두 가지 방안이 있다. 하나는 Redux-persist 라이브러리를 이용해 Redux State를 초기화되지 않고 유지할 수 있도록 해주는 방법이고 다른 하나는 local storage를 이용해 상태를 기록하는 것이다. (물론 Rest api를 이용해 서버로부터 계속 정보를 받아오는 방법도 있겠지만 이는 배제하도록 하겠다... 2022. 4. 15.
[React] 외부 클릭 시 메뉴창 닫기 오늘 토이 프로젝트를 진행하면서 메뉴 버튼 밖을 클릭했을 때 메뉴 컴포넌트가 닫히는 UI를 구현하고 싶었다. 방법에 대해 한참을 고민하다 보니... 최상의 컴포넌트에서 props drilling을 통해 메뉴를 닫는 기능을 구현할까... 하는 생각이 들었지만 어엿한 프론트엔드 개발자를 꿈꾸는 나에게 이것은 올바른 해결법이 아니라는 판단이 들었다. 그래서 구글링을 해보니 해당 방법을 Effect 훅과 Ref 훅을 이용해 해결하는 방법에 대해 참고할 수 있었다. 전체 코드는 이러한데 한번 부분 부분 살펴보자. const Deck = ({data}: Props) => { const [openInnerMenu, SetOpenInnerMenu] = useState(false); const InnerMenuHandl.. 2022. 4. 8.
[React] dotenv 사용시 주의할 점 React의 경우 dotenv를 사용할 때 조금 주의할 점이 있다. 1. import dotenv???? 많은 기술 블로그에서 dotenv를 import 해야 한다고 나와있는데 사실 React는 그런 거 필요 없다. 오히려 import 하면 아래와 같은 에러를 만날 것이다. ERROR in ./node_modules/dotenv/lib/main.js 1:11-24 없이도 그냥 process.env로 접근 가능하다. 2. REACT_APP_ 으로 env 설정하기 필자는 이부분에서 시간을 많이 낭비했다. express에서 env 설정하던 기억이 남아 REACT_APP_없이 env를 설정했는데, React에서는 자체 변수와의 충돌을 피하기 위해서 REACT_APP_이 있어야 인식이 가능하다. 아래와 같이 .e.. 2022. 4. 5.
[React] React는 MVC 패턴일까 Flux 패턴일까? MVC 패턴에 대해 공부하다 문득 드는 생각이... React는 그럼 어떤 패턴이지...?? 정답은, React는 MVC가 될 수도 있고 Flux가 될 수도 있다. 다시 한번 짚고 넘어가야 할 부분은 React는 프레임워크가 아닌 라이브러리라는 점이다. 그리고 React는 오로지 View에 집중한 라이브러리다. 즉 나머지 부분을 어떻게 개발자가 만드느냐에 따라 MVC가 될 수도 있고 Flux가 될 수도 있다는 것이다. 하지만 React의 경우 Redux를 사용해 대부분 Flux 패턴을 따라 작성된다. (하지만 주의해야 할 점은 Redux는 Flux 패턴을 유사하게 따라 하는 라이브러리이지 완벽하게 Flux 패턴을 구현하지 않았다. 실제로 Redux에는 Dispatcher에 대한 개념이 없다.) Flux의.. 2022. 3. 29.
[React] State vs Props 리엑트에서 데이터를 다룰 때 크게 State와 Props이라는 개념을 이용한다. 이번 포스팅에서는 이 둘이 뜻하는 바와 차이점에 대해 알아보자. State란? The state is a built-in React object that is used to contain data or information about the component. state는 컴포넌트에 대한 데이터나 정보를 담는 리엑트 내장 객체다. Props란? Props stand for "Properties." They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attribu.. 2022. 3. 28.
[React] Hooks 완벽정리 React Hooks 리엑트 훅이란 리엑트 16.8 버전에서 새롭게 소개된 기능이다. 훅을 이용하면 클래스를 작성할 필요 없이 리엑트의 기능들을 사용할 수 있게 된다. 훅이란 함수 컴포넌트가 리엑트 상태나 라이프사이클 기능으로 '걸려들어가는' 함수들을 말한다. 클래스 안에서는 작동하지 않는다. 훅은 backward-compatible이라서 기존의 기능을 파괴하지 않는다. 여기서 backward-compatible이란 이전의 시스템과 상호작용하는데 문제가 없는 특성을 가르킨다. 또한 기존의 리엑트 개념과도 다르지 않다. React Rules 훅은 리엑트 함수의 최상단에서 호출되어야 한다. 훅은 리엑트 함수에서만 호출 가능하다. (일반 자바스크립트의 함수로 훅을 호출하는 것은 안되나, 커스텀 훅을 이용한 호.. 2022. 3. 28.

티스토리툴바