SSLAB (4) 썸네일형 리스트형 D3.js with React D3.js는 데이터에 기반해 문서를 조작하는 자바스크립트 라이브러리이다. D3는 HTML, SVG, CSS를 이용해 데이터를 생동감 있게 표현한다. const svgElement = d3.select(ref.current); svgElement.attr('width', width).attr('height', height); svgElement.append('g').attr('transform', `translate(${margin}, ${margin})`); React와 D3.js 모두 DOM에 대한 제어권을 갖기 때문에 이를 컨트롤 해주어야 한다. 해당 프로젝트에서는 useRef 훅을 통해서 할당받은 reference를 svg에 지정하고 아래 코드와 같이 select한다. 그리고 svg에 크기와 색상과.. DECK.GL Deck.GL은 WebGL 기반의 데이터 시각화, 분석 프레임워크이다. deck.gl은 visual layers의 스택으로 데이터(JSON 객체)를 표현한다. 리액트의 패러다임을 공유하며 react, mapbox GL와 상성이 좋다. 데이터를 자체적으로 가공한 뒤 렌더링 할 수 있다. interactive한 이벤트를 처리할 수 있다. Mapbox, Google Maps와 함께 사용할 수 있다. 데이터를 여러층으로 설정하여 표현할 수 있다. webGL에 대한 지식이 있으면 커스터마이징 할 수 있다. 2D 지도 위에 3D로 데이터를 표현할 수 있다. 많은 양의 데이터를 처리하기에 용이하다. GeoJSON으로 작업하기 https://deck.gl/playground/ deck.gl Playground deck.. git branch 관리요령 Github에 이슈 생성 해당 이슈에 대한 branch를 dev branch로부터 생성. 여기서, branch 이름은 f#-issue_name_simple 로 지정 할 것. f는 feature의 약자. #은 github issue 번호. issue_name_simple은 해당 이슈에 대한 간략한 제목 작업시에 특정 작업이 frontend이냐, 혹은 backend냐에 따라 f#-frontend, f#-backend 두 개의 브랜치를 둬서 관리 해당 이슈 작업 완료 시, f#-frontend 및 f#-backend의 작업내용을 먼저 f#-{simple_issue_name} 브랜치에서 병합 한 이후, 그 브랜치를 dev 브랜치에 병합. main -> dev -> f#-{simple_issue_name} -> .. Header Layout 프로젝트를 진행하며 레이아웃의 구현에 대한 큰 틀을 이해할 수 있었다. 기본적으로 페이지는 헤더와 바디로 구성되어 있다. 이번 글에서는 그 중 header파트에 대한 구현을 기록하려 한다. 프로젝트를 통틀어 Material-UI를 이용해 구현했다. 가장 상위 컴포넌트인 AppBar는 두개의 하위 컴포넌트로 이루어져 있다. 그것이 ToolBar와 Drawer이다. 둘은 같은 level에 존재하며 ToolBar가 코드의 윗 부분에 있다. ToolBar는 화면의 가장 상단에 표시되며 drawer을 위한 햄버거, 사이트명, 유저의 간략한 정보등을 표시한다. 사이트 이름은 process.env를 통해 나타낼 수 있다. ToolBar의 햄버거 아이콘의 클릭 여부에 따라 지정해놓은 state인 open이 결정되고 o.. 이전 1 다음