전체보기

이제 본격적으로 d3를 이용하여 어떻게 라인 차트를 그릴 수 있는지 알아보도록 하겠습니다. 물론, HTML, CSS, JS만으로도 충분히 그리는게 가능하지만, 저는 Next.js를 사용하여 라인차트를 그려 보겠습니다. 만약, svg에 대해 전혀 모르신다면 이전에 작성한 글을 참고하고 오시는 걸 추천드립니다. 포스트의 구성은 다음과 같습니다. 사전준비(설치, import) d3 사용 2-1. D3 기본 Flow 3-1. 라인차트 그리기 React에서 d3 사용하기 라인차트 그리기 최종 코드 1. 사전 준비 - prerequisite [ installation ] 가장 먼저 npm을 이용하여, 설치 해줍니다. (참고링크1 - d3: npm) npm install d3 물론, 아래처럼 바로 script에서 링..

여기에서는 d3에 대해 아주 기초부터 제대로된 data visualization까지 차근차근 다뤄볼 예정입니다. What is D3? 너무나 뻔하지만, 항상 어떠한 주제를 시작할 때 다루고자 하는 주제가 무엇인지 명확히 하는 것이 중요한 것 같습니다. D3는 Data-Driven Documents를 의미하며 Data를 Visualization해주는 매우 강력한 툴입니다. 특히, D3는 우리가 HTML, SVG, CSS를 사용함에 있어 많은 도움을 줍니다. 만약, SVG가 무엇인지 알고 있고, 바로 라인차트를 그리는 방법에 대해 알고 싶다면 다음 포스트로 바로 이동하셔도 무관합니다. What is SVG? D3에서는 SVG를 많이 다룹니다. 따라서, 본격적으로 들어가기 이전에 여기에서는 SVG에 대해 간단..

이 글에서는 Next.js에서 중요한 개념인 Pre-Rendering에 대해서 알아보고자 합니다. Rendering 과정 먼저, 사전 렌더링(pre-rendering)을 하지 않았을 때, 브라우저가 어떻게 화면을 렌더링 하는지에 대해 대략적으로 설명을 하고 사전 렌더링과의 차이점에 대해 정리해보고자 합니다. 만약, CSR방식에 대해 이미 익숙하다면 아래 CSR파트는 생략하셔도 무관합니다. [ CSR ] [[ 1 - React의 기본 동작 방식 ]] 일반적인 react Application은 CSR(Client Side Rendering) 방식으로 화면을 렌더링 합니다. CSR 방식에 대해 간단히 설명하자면, 아래 그림과 같습니다. 쉽게 말해서, 1. 가장 먼저 뼈대만 있는 HTML 파일을 서버로 부터 다..

이 글에서는 많은 사람들이 Next.js를 사용하는 이유, 즉 Next.js가 가지고 있는 강점에 대해서 정리해보고자 합니다. What is Next.js? 가장 먼저, Next.js는 무엇일까요? Next.js 공식 홈페이지에서도 언급하듯이, Next.js는 React의 Framework입니다. React를 이용하다보면, Routing과 같이 개발자들이 직접 개발해야 하는 필수적인 기능들이 있습니다. 이렇게 React를 이용할 때 필수적으로 개발해야 하는 기능들을 기본적으로 제공해주는 것이 바로 Next.js가 하고 있는 역할입니다. What kind of features Next.js can give you? 그렇다면, 정확하게 어떠한 기능들을 Next.js는 제공해주고 있을까요? 1. File-ba..

redis 공식 문서를 살펴보다, cache와 session store의 개념에 대해 비교하는 글을 보게 되었습니다. 제가 기존에 생각하던 session store와 조금은 차이가 있었기에 해당 글에 대해 정리해보고자 합니다. Cache Cache란 일반적으로 memory에 존재하는 데이터를 저장하는 장소를 의미합니다. 데이터를 가져 온다고 했을 때, 실제 DataSource(e.g. DB)에 접근하기 이전에, Cache를 먼저 확인하여, 찾고 있는 데이터가 있다면 해당 데이터를 리턴하는 방식으로 작동하며, 실제 DataSource에 접근하는 것에 비해 매우 빠른 속도를 자랑합니다. 이러한 Cache에 있어서 조금은 주의해서 기억해야 할 점은, Cache는 User Level 에서 데이터를 저장하는 것이..

원의 내각이 주어졌을 때, 원의 좌표(x, y)를 구하는 방법에 대해 정리해보고자 합니다. 구하는 방법은 매우 간단합니다. 반지름(r)이 1인 원이 있다고 가정 해봅시다. 그러면, 위 그림에서 볼 수 있듯이 내각(θ)를 가지는 x, y의 좌표는 (cosθ, sinθ)가 되게 됩니다. 즉, θ 각도를 가지고 있는 x좌표는 cosθ, y좌표는 sinθ를 이용하면 된다는 것 입니다. 그럼, 이제 어떻게 JS를 이용하여 좌표를 구할 수 있는지 코드로 알아보도록 합시다. 구현 코드 JavaScript에서는 sin과 cos을 구하는 메소드를 Math함수를 이용하여 제공( 참고링크 )하고 있습니다. const cos = Math.cos(0); const sin = Math.sin(1); 이때 주의 할 점은, 인자를 ..