Dev Diary 💻

Intro 안녕하세요. 이번 시간에는 인텔리제이에서 commit 시 렉걸릴 때 해결방법에 대해 알아보겠습니다. How to do Preferences > Version Control > Commit 메뉴에 들어갑니다. 여기서 Analyze code, Check TODO 등이 설정되어 있으신 분들은 해제하시면 commit 렉이 발생하지 않습니다.

Intro 안녕하세요. 이번 시간에는 Chart.js에서 line 차트 border line 굵게 지정하는 방법에 대해 알아보도록 하겠습니다. How to do const options: ChartOptions = { // other options elements: { line: { borderWidth: 2, }, }, // other options }; borderWidth 숫자를 크게 지정할 수록 border line 굵기가 굵어집니다 :)

Intro 안녕하세요. 앞선 포스팅에서 Multi type chart를 구현하는 방법에 대해 알아봤는데요, 이번 시간에는 Chart.js에서 Multi-Axis 를 설정하는 방법에 대해 알아보겠습니다. Multi-Axis 은 데이터의 단위 차이가 커서 한꺼번에 표현할 때 유용합니다. How to do 제 경우 series1, series2 두 데이터에 상응되는 y축을 오른쪽과 왼쪽에 표시하고 싶었습니다. 각각 사용하고자 하는 축이 다르기 때문에 yAxisID 속성을 활용하여 a, b 두개를 지정했습니다. 이후 options에서 해당 yAxisID를 사용해 position을 right, left로 설정해줬습니다. const series1: number[] = [] const series2: number[]..

Intro 안녕하세요. 이번 시간에는 react + typescript 에서 Chart.js 를 사용하는 방법에 대해 알아보겠습니다. How to do 제 케이스의 경우 막대(bar) 그래프와 선(line) 그래프를 함께 그려주고 싶었습니다. 이를 위해 먼저 MutiTypeChart 컴포넌트를 만들었습니다. # MutiTypeChart Component props로 data, height, options 을 정의합니다. 멀티타입 차트를 위해서는 Chart Component 를 사용하면 됩니다. import React from 'react' import { BarController, BarElement, CategoryScale, Chart as ChartJS, ChartData, ChartOptions,..

Intro 안녕하세요. 이번 시간에는 MUI Typography Component 에서 variant 속성을 커스텀 하는 방법에 대해 알아보겠습니다. MUI Typography variant Typography 의 기본 variant 속성은 다음과 같습니다. h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2 가 있습니다. 이 외에도 직접 커스텀하여 variant를 추가하고 싶을 때가 있을 겁니다. const theme = createTheme({ components: { MuiTypography: { defaultProps: { variantMapping: { h1: 'h2', h2: 'h2', h3: 'h2', h4: 'h2', h5: 'h2', ..

Intro 안녕하세요. 이번 시간에는 MUI의 Dialog 에서 background color 를 바꾸는 방법에 대해 알아보겠습니다. How to do {/* ... your content ... */} 위와 같이 PaperPorps 속성을 사용하여 backgroundColor를 지정해줄 수 있습니다. https://stackoverflow.com/questions/41158325/how-to-create-material-ui-dialog-with-transparent-background-color

Intro 안녕하세요. 이번 시간에는 Mac에서 문장 텍스트 및 단어 단위로 부분 선택하는 단축키에 대해 알아보도록 하겠습니다. How to do 텍스트 부분 선택 Shift + ⬅️ / ➡️ 방향키를 누르면서 Shift 를 함께 누르면 텍스트를 부분적으로 선택할 수 있습니다. 단어 단위로 텍스트 부분 선택 Option + Shift + ⬅️/➡️ 방향키를 누르면서 Option(or Alt)와 Shift 를 함께 누르면 단어 단위로 텍스트를 부분 선택할 수 있습니다. 위 방법을 통해 단축키를 이용해 Mac에서 원하는 텍스트 부분을 선택할 수 있습니다 :)

Intro 안녕하세요. 이번 시간에는 Mac 맥북에서 문장 맨앞, 맨뒤로 이동하는 방법에 대해 알아보도록 하겠습니다. How to do 문장 맨앞 이동 : Command + ⬅️ 문장 맨뒤 이동 : Command + ➡️ 쉽지만 간단한 단축키 사용으로 업무 효율성을 올릴 수 있습니다 :)

Intro 안녕하세요. 이번 시간에는 Chart.js에서 Y축 최대값을 동적으로 설정하는 방법에 대해 알아보도록 하겠습니다. Case 우선 Chart 컴포넌트를 활용하는 부분은 아래와 같습니다. option에 따라 표시하는 데이터를 다르게 retrun 하고 있습니다. 데이터가 동적으로 달라지다 보니 y축 범위 최대값도 해당 datasets에 맞게 다르게 표시해야 했습니다. const getData = (option: string): ChartData['datasets'] => { if (option === 'hourly') { return [ { fill: false, ..., data: [0, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 3..

Intro 안녕하세요. 이번 새로 프로젝트를 시작하면서 yarn 에서 yarn berry를 도입하기로 결정했습니다. 이번시간에는 Yarn Berry에 대해 알아보도록 하겠습니다. What is yarn berry? Yarn Berry는 JS 패키지 매니저인 Yarn의 다음 버전입니다. yarn version 2부터 yarn berry라고 부릅니다. What is the difference between yarn and yarn berry? 가장 달라진 점은 Plug'n'Play (PnP) 시스템이라고 할 수 있습니다. PnP 시스템은 node_modules 폴더를 사용하지 않고, 패키지의 종속성을 프로젝트의 단일 디렉토리 트리에 직접 설치합니다. 일반적으로 npm 이나 yarn version 1을 사용할..