-
Chart.js 시작하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 이번에 프로젝트를 하면서 차트를 그리기 위한 용도로 Chart.js를 사용하게 되었습니다. 워낙에 기능도 많고 괜히 복잡해보여서(구현하려는 기능에 따라 뒤에 복잡한 부분이 분명 있기도 합니다만…😌) 선뜻 시작하기가 어려웠습니다. 뭐든 시작이 제일 어려운 법인데, 이번 시간에는 저처럼 차트를 ‘구현해야만’ 하는 상황에서 Chart.js를 “덜 어렵게” 시작할 수 있도록 Chart.js의 기본 사용 방법 및 커스텀을 위해 제공되는 옵션들에 대해 간단히 소개해드리고자 합니다.😺 설치하기 리액트에서 Chart.js를 사용하려면 chart.js 뿐만 아니라 리액트에서 Chart.js를 렌더링하기 위해...
anne's profile imageanne
2021-07-20 17:00
-
Next.js active link 스타일링
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 메뉴(네비게이션)에서 현재 사용자가 들어와있는 메뉴, 즉 active link를 표시하고 싶을 때 사용할 수 있는 방법에 대해 소개해드리고자 합니다. React Router를 사용할 때는 <NavLink> 컴포넌트의 activeClassName이나 activeStyle을 사용하여 비교적 간편하게 active link를 스타일링할 수 있는데요, 이와 달리 Next.js에서는 아쉽게도 이러한 기능을 따로 제공하지는 않는다고 합니다. 이를 직접 구현할 수 있는 여러가지 방법들 중 제가 사용했던 방법에 대해 정리해보도록 하겠습니다~ 준비물 각 페이지에 공통적으로 들어가는 메뉴 컴포넌트 → MyMenu import...
anne's profile imageanne
2021-06-28 17:00
-
웹팩5(Webpack5)
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 웹팩4 릴리즈 이후 거의 2년 만인 작년 10월 10일, 웹팩5가 릴리즈 되었습니다. 아직 1년이 채 안됐는데요, 웹팩5로 넘어오면서 이전과 어떤 점이 달라졌는지 알아보겠습니다. 상당히 많은 업데이트가 있었기 때문에 General direction에 안내되어 있는 내용 위주로만 정리해보았습니다. 더 자세한 내용은 Webpack 5 release 전체 문서를 참고해주세요. 주요 변경 사항 Persistent Caching - 파일시스템 캐시를 이용한 더 빠른 빌드 웹팩5에서는 아래와 같이 미리 설정을 할 경우 파일시스템 캐시를 사용할 수 있고...
anne's profile imageanne
2021-05-28 17:00