즐겁게, 코드

📋 내용 : 타입스크립트 사용 시, Cannot find module... 이 출력되는 문제 외부 파일을 불러올 때, 일치하는 타입 선언을 찾지 못했다는 오류가 자주 목격됩니다. 타입스크립트는 해석할 수 없는 타입에 대해 이런 오류를 출력하는데요, 타입 추론을 돕기 위해 d.ts 라는 이름의 파일을 만들어 활용할 수 있습니다. // types.d.ts // 예시. yml 형식의 파일을 불러와 사용하고 싶을 때 declare module "*.yml" { const data: any; export default data; } // 비슷하게, svg 파일을 불러온다고 하면 이렇게 사용하면 됨! declare module "*.svg" { const data: any; export default data; }..

📋 내용 : 타입스크립트 코드에서 require.context를 인식하지 못하는 문제 Building a Blog with Next.js | CSS-Tricks In this article, we will use Next.js to build a static blog framework with the design and structure inspired by Jekyll. I've always been a big fan of how css-tricks.com next.js 기반 블로그 튜토리얼을 따라가던 중, 이 부분에서 문제가 생겼습니다. // api/index.ts import matter from "gray-matter"; export async function getAllPosts() { // 타..

📋 내용 : react-chartjs를 사용할 때, 차트의 라벨 숨기기 react-chartjs를 사용할 때, 차트의 라벨을 숨기고 싶을 수 있습니다. 스택오버플로우의 답변은 legend: {display: false} 를 적용하면 된다고 하는데, 최신 버전에서는 이렇게 해도 라벨이 감춰지지 않습니다. const options = { scales: { yAxes: [ { ticks: { beginAtZero: true, }, }, ], }, legend: { display: false, }, }; 최신 chartjs 버전 (21년 5월 기준 ^3.2.1)에서는 legend를 plugin으로 감싸야 정상적으로 적용됩니다. const options = { scales: { yAxes: [ { ticks: {..

📋 내용 : react-chartjs로 생성한 차트 사이즈 조정하기 chart.js를 리액트에 이식한 react-chartjs-2를 사용하면 예쁜 차트를 그릴 수 있습니다. 다만 차트의 크기가 생각보다 훨씬 크거나 작을 수 있는데, 아래처럼 인라인 스타일을 적용해도 제대로 반영이 되질 않습니다. 이는 설정 객체 중, responsive 라는 속성의 값을 false 로 지정해 해결할 수 있습니다. const options = { // responsive 속성을 false로 지정한다. responsive: false, scales: { yAxes: [ { ticks: { beginAtZero: true, }, }, ], }, };

🛠 내용 : react-globe.gl 라이브러리를 사용할 때, 한글 라밸이 깨지는 문제 WebGL 기반 3D 지구를 모델링할 수 있는 vasturiano 님의 react-globe.gl 라이브러리를 사용하던 중, 큰 문제가 생겼습니다. vasturiano/react-globe.gl React component for Globe Data Visualization using ThreeJS/WebGL - vasturiano/react-globe.gl github.com 다름이 아니라 이렇게 한국어 라벨을 사용하면 문자를 인식하지 못하고 "??" 라는 기호로 치환되는 문제였는데요, 문제의 원인이 도저히 감이 오지 않아 어쩔 줄을 몰라하고 있었습니다. 😂 📪 이슈를 남깁시다 아무튼 이렇게 이슈를 남기고 답변을 ..