개발새발 로그

요새는 리액트만 공부해서 그런지 이런 고민이 생겼다. "자바스크립트로 이런 기능 한번 만들어보세요!" 했을 때 어떻게 할 것인가?기능을 구현할 수야 있겠지만 과연 그 기능을 남들이 봤을 때 "옳은 방식"으로 만들까? 다시한번 자바스크립트를 공부하려고 마음을 먹었고, 내가 과거에 배웠던 자바스크립트를 다시 꺼내왔다.이번에 두 번째로 보는 것인데 다시 복습하면서 중요한 점들을 상기시키려고 한다.  📖명령형 프로그래밍 방식과 선언형 프로그래밍 방식명령형 프로그래빙 방식이란?프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종이다. 자연 언어에서의 명령법이 어떤 동작을 할 것인지를 명령으로 표현하듯이, 명령형 프로그램은 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이..

에러핸들링이란 예상하거나 예상치 못한 상황에서 에러가 발생했을 때 자바스크립트에서 지원하는 기본적인 기능들로 예외 처리를 하여 어플리케이션이 중단되는 것을 막고, 실행 흐름이 이어 갈 수 있도록 복구하는 것을 말합니다. 에러핸들링이 왜 중요한가? 1. 안정적인 서비스 에러 핸들링이 되어있지 않다면 어플리케이션의 규모가 커지고 코드양이 많아져 로직이 복잡해진다면 예외나 에러가 발생할 상황이 많아지고, 관리하기 힘들어진다. 2. 사용자 경험 에러 핸들링이 되어있지 않은 상태에서 서버와 통신하는 과정에 에러가 발생했을 때 어플리케이션이 중단되고, 사용자는 멈춰있는 화면을 보게 된다. 시간이 지날수록 사용자는 서비스를 이탈할 가능성이 높아진다. 에러의 종류 1. 컴파일 에러 자바스크립트 엔진이 코드를 읽으면서 ..

버튼을 누르면 차트를 변경하는 로직에서 중요한 부분을 잘라왔다. 버튼에서 click메소드를 지정하고 아래와 같이 selectedData를 바꿔준 다음에 바뀐 데이터를 토대로 y축과 차트 값을 바꿔준 것이다. 차트값을 바꿀 때 d3에서 제공하는 효과르 적용할 수 있다.

데이터를 로딩하는 D3함수 종류 d3.csv(url [[ , row], callback]) d3.tsv(url [[ , row], callback]) d3.text(url [ , callback]) d3.xml(url [ , callback]) d3.html(url [ , callback]) d3.json(url [ , callback]) 데이터별로 가져오는 방법 csv const csvData = d3.csv("./data/movie.csv"); console.log("csv",csvData); d3,csv함수는 Promise를 반환한다. 데이터를 가져오는 d3함수는 Promise를 반환한다. 그래서 async/await를 사용하는 것이 좋다. async function getData() { const..

https://d3js.org/d3-scale d3-scale | D3 by Observable d3js.org 선형 척도 x값을 넣었을 때 f(x)로 결과값을 나타내는 것 선형척도(scaleLinear) const x =d3.scaleLinear(); x.domain([0,10]); x.range([0,100]); console.log(x(0)); // 0 console.log(x(10)); // 100 d3의 scaleLinear를 호출하면 선형척도 함수를 반환한다. x는 domain과 range 메서드로 값을 설정한다. f(x) = y = x * 10으로 인해 0을 넣으면 0이 되고, 10을 넣으면 100이 된다. 이게 가능한 이유는 domain과 range를 설정해줘서 가능했다. domain과 r..

데이터 조인 - 데이터를 무언가와 결합하는 것 Enter, Update, Exit라는 개념이 있는데 인터렉티브 시각화에서 많이 사용한다. 1. selection.join(enter[ , update][ , exit]) - 신규 요소를 추가 - 필요없는 기존 요소는 제거 - 반환 할 땐, 신규요소 + (유효한) 기존 요소를 정렬하여 모두 반환 - update와 exit도 가능해서 애니메이션이나 추가, 제거 시 다른 동작을 설정, 기존 요소 업데이트 등이 가능하다. 예제 svg.selectAll("rect") 현재 svg요소안에 아무것도 없는 상태라고 가정하고 위 명령어를 실행하면 빈 배열을 가지고 오게 된다. 그럼 데이터를 바인딩해보자 svg.selectAll("rect") .data(orgData) 그렇..

https://d3js.org/getting-started Getting started | D3 by Observable d3js.org https://observablehq.com/ Build expressive charts or dashboards with code | Observable Filter, sort, and interact with data visualizations in the same notebook, at the same time, to uncover insights, answer questions, and get to aha moments faster. observablehq.com ObservableHq D3 코드를 웹상에서 만들고 확인하기에 용이하다. 깃허브와 같이 공유하는 공..

SVG 태그로 여러가지 도형 그리기