본문 바로가기

전체 글235

[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.
[Agile] 개발과 연구의 애자일 방법론에 관하여 이전 회사에서는 B2B 커머스 기업이다 보니 플랫폼 개발이 순수하게 개발에만 초점이 맞춰져 있었다. 별도의 연구보다는 어떻게든 빨리 정확하게 만들어 시장에서의 테스트를 빨리 받는 것이 애자일 프로젝트의 목표였다. 하지만 새로 이전한 그리고 개발자로서 첫 커리어를 쌓게 된 지금 회사에서는 연구중심의 플랫폼 개발이 이루어지고 있다. 빅데이터와 머신러닝을 활용한 ESG 데이터 판매가 비즈니스 모델이기 때문에 정교한 데이터를 만들어 내는 것이 중요하기 때문. 처음 팀에 합류해서 업무 진행 상황과 방법등을 쭉 살펴보니 개발팀의 개발방식도 연구에 초점을 두고 진행되고 있었다. 개인적으로 연구자로서의 개발자분들은 처음 보다보니 내심 많이 놀랐다. 생각하는 방법과 업무 진행방식이 빠르게 어플을 빌드하는 개발자들과는 많.. 2022. 5. 11.
[Highcharts] Axes Axes x축과 y축은 cartesian coordinate system 데이터 값을 가지는 모든 차트에 기본적으로 표시된다. 아래는 축 요소에 대한 대략적인 개념도이다. Axis labels, tickmarks and gridlines 축 레이블, 틱마크 그리고 그리드 라인은 밀접하게 연관되어 있고 함께 확장된다. 포지셔닝은 차트에서 데이터가 표시되는 가장 최적화된 핏으로 계산된다. TICKS 틱마크는 축에 따라 그어진 선들이며 재량 단위를 보여준다. 틱 사이의 공간은 tickInterval과 tickPixelInterval 옵션에 의해 결정된다. 레이블과 그리드 선은 틱 마크와 같은 공간에 놓인다. tickInterval 옵션은 축에서 틱간의 거리를 결정한다. 기본값은 null인데 이는 선형 그리고 .. 2022. 5. 8.
[JS] CSV 데이터 다루기 토이 프로젝트 진행 중에 csv 파일로 대량의 데이터를 한 번에 업로드할 수 있는 기능을 구현하려고 하기 위해 자바스크립트로 어떻게 csv 파일을 읽어들이고 데이터를 다룰 수 있는지 여기저기 공부하다가 좋은 글이 있어 번역해 옮겨본다. JavaScript - Parse CSV data into an array 이번 튜토리얼에서는 HTML 엘리먼트로 CSV 파일을 어떻게 전달받고 자바스크립트 배열로 어떻게 내용을 파싱 할지에 대해 알아보겠다. CSV 데이터를 배열로 변환하기 위해선, readAsText() 메소드를 가지고 있는 자바스크립트의 FileReader 클래스를 사용해야 한다. readAsText() 메서드는 CSV 파일을 읽고 결과를 스트링 텍스트로 파싱 한다. 예를 들어 아래와 같은 CSV 파일.. 2022. 5. 7.
[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.
DB에 쿼리하기 VS 클라이언트에서 데이터 분류하기 바보 같은 질문에도 항상 현명한 답을 주시는 우리 토이 프로젝트 팀원님... 오늘은 sorting 기능을 구현하다가 문득 이런 의문이 들었다. 분류 옵션을 선택할 때 마다 데이터베이스에서 새로운 데이터를 받아온다면, 자원낭비가 아닐까? 만약에 데이터를 한번만 불러와 로컬에 저장하고 분류 옵션을 선택할 때마다 클라이언트에서 저장된 데이터를 분류해서 새로 랜더링 하면 되지 않을까? 바보같은 질문에 팀원님은 아주 좋은 질문이라며 좋아하셨다. 읭? 답변을 정말 상세하게 주셨는데 아래와 같다. A: 제가 생각하기에 분류와 그룹핑과 같은 기능을 데이터베이스 서버에서 실행하는 이유는 다음과 같습니다. 잘 구현된 데이터베이스 서버는 보통 클라이언트의 컴퓨터보다 더 많은 리소스를 가지고 있습니다. 따라서 클라이언트보다 .. 2022. 5. 4.
CSS와 JS 애니메이션 성능향상 팁 웹 애플리케이션의 성능과 관련된 포스팅을 지속하다가 이번에는 CSS와 JS의 성능 향상은 어떻게 해야 할지, 특히나 렌더링에서 많은 연산을 요구하는 애니메이션에 관해 최적화 방법이 궁금해 조사를 해보았다. 아래는 관련해 좋은 글이 있어 번역해 옮겨본다. Tips for Improving CSS and JS Animation Performance 화려한 애니메이션은 웹사이트를 다른 경쟁사보다 눈에띄게 하는 효과가 있지만, 역으로 최적화되지 않은 애니메이션은 성능 문제로 결과적으로 유저를 이탈시키는 결과를 일으키기도 한다. 만약에 애니메이션이 초당 60 프레인 이하로 렌더링 된다면 방문자는 이를 알아차릴 것이고 사용자는 안좋은 경험을 하게 된다. 이 가이드는 어떻게 CSS와 자바스크립트 애니메이션을 스무스하.. 2022. 4. 25.
웹사이트 로드타임 얼마나 빨라야 빠른 것일까? 빠른 웹사이트가 유저 입장에서 좋다는 점은 누구나 다 안다. 그렇다면 과연 빠르다는 건 얼마나 빨라야 빠른 것일까? 아마 어플의 성격과 특징에 따라 다를 것이다. 하지만 적어도 어느 정도의 기준이 있다면 좋을 텐데 말이다... 관련해서 좋은 글이 있어서 번역해 옮겨 본다. Website Load Time in 2021: How Fast Is Fast Enough? 오늘날, 빠르게 변화하는 디지털 세계에서 유저에게 빈틈없는 경험을 할 수 있는 웹사이트를 개발하는 것은 회사에게 아주 중요한 일이다. 회사들은 실시간으로 그리고 지속적으로 웹사이트의 기능을 모니터링하는 도구에 투자를 하고 있다. What Is Website Load Time? 웹사이트 로드 타임이란 웹사이트의 콘텐츠를 완전히 전달받는데 걸리는 .. 2022. 4. 25.
네트워크 패널 사용법 개발을 처음 배울 때는 그냥 기능이 잘 작동하는 데에만 초점을 맞춰 프로젝트를 진행했었지만, 이런저런 경험이 쌓이다 보니 자연스럽게 유저의 입장에서 개발을 진행하게 되는 듯하다. 그중 중요한 한 가지 고민되는 부분은 이렇게 코드를 짜면 유저입장에서 느리다고 생각되지 않을까? 와 같은 고민이다. 예를 들어 지금 진행하고 있는 토이프로젝트에서 화면을 새로고침 할 때마다 데이터를 새롭게 가져오는 방식이 과연 유저한테 좋은 방식일까? 이런 방식이 유저 입장에서 느리다고 생각되지는 않을까? 등과 같이 고민에 고민을 더하게 되는 듯하다. 오늘은 과연 내 웹앱이 느린지 안느린지 판별하는 방법에 대해 알아보려고 한다. How to Effectively Inspect Network Activity in Chrome De.. 2022. 4. 24.
[HTML] tabindex란? 토이 프로젝트를 진행하다가 엔터를 누르면 로그인 버튼 혹은 ok 버튼이 클릭되도록 설정을 하려고 했다. 근데 input 태그에서는 onKeyDown 속성이 잘 작동하지만 div 태그에서는 작동이 되지 않는 문제가 발생했다. 이것저것 찾아보니 미국 성님들께서 tabindex 속성을 부여해야 한다는 글을 발견했다. 실제로 tabindex 속성을 넣으니 잘 작동되었다. 그렇다면 tabindex란 무엇일까? Use the tabindex attribute tabindex는 HTML 엘리먼트가 포커스를 받을 수 있도록 하는 글로벌 특성을 말한다. 엘리먼트에 접근하기 위해 tabindex의 값에 0 혹은 음의 값을 넣어주어야 한다. tabindex의 값이 0 혹은 양의 수를 넣으면 해당 엘리먼트는 tab키를 이용해.. 2022. 4. 23.
[JS] 자바스크립트로 유니크한 ID 생성하기 이번 토이 프로젝트에서는 로그인되지 않은 게스트 유저도 자유롭게 단어장을 생성하여 사용하다가, 이후 회원가입을 하면 로컬에 저장되어 있는 단어장을 데이터베이스에 업데이트하는 신선한 시도를 해보려 한다. 토큰 저장용으로만 사용하던 로컬 스토리지를 게스트 유저에 한해서만 활용한다니 재미있는 작업이 될 듯하다. 그리고 또 다른 묘미는 필자가 웹 어플리케이션을 제작하고 다른 팀원이 모바일 어플을 제작하는 하나의 데이터베이스를 공유하는 두 개의 플랫폼 어플을 개발한다는 점이다. 그래서 여러 의논을 진행중에 있는데 한 가지 의논 거리는 단어장 데이터의 ID를 어떻게 생성할 것인가? 였다. 유저가 웹과 모바일 모든곳에서 단어장을 생성할 수 있기 때문에 혹여나 로컬 스토리지에 저장되어 있는 단어장의 ID가 중복된다면,.. 2022. 4. 17.

티스토리툴바