즐겁게, 코드

내용 : 파일명 변경 후 임포트 시 Already included file name~ 에러가 출력됨. 원래 SignUpModal 이라는 이름의 파일을 SignupModal로 변경했더니 갑자기 빨간 줄이 그어지면서 알 수 없는 오류가 출력됩니다. 아마 바벨이나 웹팩 문제인줄 알고 발만 동동 구르실 수 있는데, 다행히 타입스크립트 설정으로 고칠 수 있는 문제였습니다. Already included file name~ 에러가 출력된다면 tsconfig.json의 옵션 중 forceConsistentCasingInFileNames 가 true로 되어 있을 것입니다. forceConsistentCasingInFileNames 옵션을 false로 설정해주면, 문제가 해결됩니다. (+ 설정을 변경했음에도 문제가 해결..

📋 내용 : styled-components를 사용해 스타일할 때, 자기 자신에 선택자 지정하기 const Container = styled.div` display: flex; width: 1200px; height: 800px; `; styled-components를 사용해 위와 같은 컴포넌트를 만들었다고 가정하자. 그런데 말 그대로 이런 스타일의 컴포넌트를 만든 것인데, :hover나 ::after 등의 의사 선택자(Pseudo-selector)는 어떻게 지정할까? 아주 간단하다. const Container = styled.div` display: flex; width: 1200px; height: 800px; &::after { content: ""; width: 30px; height: 30px..

📋 내용 : 타입스크립트 사용 시, 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 다름이 아니라 이렇게 한국어 라벨을 사용하면 문자를 인식하지 못하고 "??" 라는 기호로 치환되는 문제였는데요, 문제의 원인이 도저히 감이 오지 않아 어쩔 줄을 몰라하고 있었습니다. 😂 📪 이슈를 남깁시다 아무튼 이렇게 이슈를 남기고 답변을 ..