Dev Diary 💻

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을 사용할..

이 글은 udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강좌를 바탕으로 정리한 내용입니다 1. 환영 pass 2. TypeScript란 무엇이며 왜 사용해야 하는가? 타입스크립트는 자바스크립트의 superset 입니다. 새로 만들어진 언어가 아닌 자바스크립트 언어를 사용해 새로운 기능과 장점을 추가하는 언어입니다. 코드를 실행하여 타입스크립트 코드를 JS로 컴파일하는 강력한 컴파일러입니다. 타입을 추가하여 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 미리 확인할 수 있습니다. 개발 중 런타임 에러로 발생하는 에러를 초기에 수정할 수 있습니다. 단점) 브라우저와 같은 자바스크립트 환경에서 실행할 수 없습니다. node.js도 마찬가지입니다. 3..

Intro 안녕하세요. 많은 분들께서 듀얼 모니터를 사용하고 계실텐데요, 선을 연결할 때마다 가끔 모니터 방향이 인식이 안돼서 불편한 경험들이 있을 겁니다. 이번 시간에는 맥북 듀얼 모니터 방향을 인식하게 하는 방법에 대해 알아보겠습니다. How to Set 1. 가장 먼저 displayplacer를 설치해줍니다. brew tap jakehilborn/jakehilborn && brew install displayplacer 2. 명령어를 실행합니다. 해당 명령어를 실행하면, 제일 아래 displayplacer "id:~~~ " 부분이 나오는데요 이 부분을 복사합니다. displayplacer list 3. .zshrc 파일을 열어 alias를 등록합니다. alias display='displayplac..