즐겁게, 코드

아마 리액트에서 가장 많이 사용되는 훅을 꼽아보라 하면 useState가 주인공이 될 것 같은데요, 오늘은 useState로 상태를 변경할 때 주의할 점에 대해 다뤄보려 합니다. const [state, setState] = useState(); useState 훅은 상탯값과 상태를 변경할 수 있는 함수(※ action, setter 함수 등으로 부르는데, 여기서는 세터 함수라고 부르겠습니다.)를 제공하는데요, 세터 함수를 사용하면 원하는 값으로 상탯값을 변경할 수 있습니다. import React, { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return ( {count} {/* 버튼을 ..

📋 내용 : 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, }, }, ], }, };

개인적으로는 색과 "선" 을 잘 사용하는 것이 감각적인 페이지 디자인의 성패를 결정한다고 생각하는데요, 사실 CSS에서 직사각형이 아닌 도형을 다루는게 마냥 쉽지는 않습니다. 😂 예를 들어 한쪽 귀퉁이가 접힌 사각형을 그려야 한다고 하면, 큰 사각형(하늘색)을 그린 후 흰색의 작은 사각형을 회전시켜 위에 포개는 방식으로 구현할 수 있습니다. 하지만 이건 너무 지저분하지 않나요? 모바일에서도 동일하게 보일 것이라는 보장도 없고, CSS의 신이 아닌 이상 몇 도를 회전시켜야 하는지 얼마나 Y축으로 이동시켜야 하는지 등을 한번에 예측하기 어렵습니다. 📎 clip-path 속성 그래서 이런 복잡한 도형을 구현할 때는 clip-path 라는 속성을 사용할 수 있습니다. clip-path 속성은 이미지나 요소를 말..

오늘은 진행중인 프로젝트에 라이센스 라벨을 부여하고 싶어 저장소를 온통 뒤져봤는데요, 아무리 찾아봐도 라이센스 관련 항목은 찾을 수 없었습니다... 😡 결국 구글링을 통해 찾아낸 방법을 소개해드리려 하는데요, 생각보다 훨씬 짧고 간단하니 가볍게 읽어주세요! 📋 깃허브 저장소별 라이센스 부여하기 첫 번째 방법은 저장소를 생성할 때 라이센스를 함께 부여하는 방식입니다. 이렇게 [Choose a license] 항목을 체크하고, 적용할 라이센스를 선택하기만 하면 끝입니다! 다만 이미 생성된 프로젝트에는 어떻게 라이센스를 부여할 수 있을까요? 저장소 메뉴 중 [Add file]을 누른 후, [Create new file]을 선택합니다. 그리고 License(확장자와 대소문자는 상관없습니다!) 라고 입력하면 [C..

function* f1() { yield 10; yield 20; return "완료"; } const gen = f1(); 제너레이터 문법을 알고 계신 분들이라도, 제너레이터를 어떻게 사용할 수 있는지에 대해서는 잘 모르는 분들도 계실 것입니다. (저도 잘 몰랐습니다..!) 오늘은 제너레이터를 통해 성능을 개선할 수 있는 지연 평가(lazy evaluation) 라는 기법을 간단히 구현해 보도록 하겠습니다. 📋 지연 평가 지연 평가는 자바스크립트에만 존재하는 개념은 아니고, 함수형 프로그래밍에서 등장한 개념입니다. 코드와 함께 지연 평가의 개념을 간단히 소개해보겠습니다. const a = 3 + 5; const b = 2 + 4; console.log(a); // 8 변수 a에는 3 + 5의 계산 결과..

널 병합 연산자(nullish coalescing operator)는 null 또는 undefined 값을 처리하기 위해 ES6에서 새롭게 등장한 문법입니다. 사용 방법 // ??을 기준으로 왼쪽 값이 null 또는 undefined라면 오른쪽 값이 대신 할당됩니다. const value = null ?? "Default value"; 널 병합 연산자를 사용하면 변수에 대입되는 값이 null 또는 undefined일 경우에 대신 대입할 값을 지정할 수 있습니다. (※ 리액트를 경험해보신 분들이라면, 리액트의 defaultProps 와 동일한 역할을 한다고 생각하시면 편합니다!) 널 병합 연산자를 사용하지 않을 때를 예로 들어 보겠습니다. let student = null; setTimeout(() => ..