오늘도 디벨롭✨ 오늘도 디벨롭✨

📊 이번에 새롭게 시작하는 프로젝트에 차트 라이브러리가 필요했다. 차트 라이브러리를 선택하기에 앞서 고려해야 했던 점은 디자인팀 시안을 최대한 반영할 수 있도록 어느 정도 커스텀이 가능해야 했고, nextjs를 고려하여 svg로 제공이 돼야 했다. 팀원들과 여러 차트 라이브러리를 찾아보고, 논의한 끝에 Recharts를 사용하기로 결정했다. 🤔 Recharts란?공식문서 https://recharts.org/en-US 리액트 컴포넌트를 기반으로 데이터를 차트로 시각화해 주는 라이브러리이다. ⚙️ 설치하기npm install recharts 📂 연습하기어떤 식으로 데이터를 전달해서 쓰는지 간단하게 확인하고 싶어서 유튜브 강의인 [ Build Charts in React With Recharts in..

💬 팀 프로젝트 들어가기 전에 Storybook 찍먹 스터디를 진행해 보기로 했는데, 미리 예습을 해두고 가면 좋을 것 같아서 적어보는 기록 첫 번째 🙌 📑 Storybook이란?UI 컴포넌트와 페이지를 독립적으로 구축할 수 있도록 도와주는 개발 도구이다. Storybook을 활용하여 UI에 대한 문서화를 하거나 테스트 혹은 디자인 시스템으로 활용이 가능하다. ⚙️ Storybook 설치하기Storybook은 기존 프로젝트에 설치하거나 새로운 프로젝트를 생성할 때 추가할 수 있다. 1. 리액트 프로젝트를 생성한다.2. 가장 최신 버전의 storybook을 설치한다. npx storybook@latest init위 명령어는 필요한 의존성 패키지 설치 및 기본 스토리북 설정을 자동으로 추가해 준다.설치..

💬 패캠 실시간 강의(실무 CSS 레이아웃)를 듣고 새롭게 알게 된 내용을 기록합니다.🙌 📑 CSS를 공부할 때는.. 속성들의 기본 값을 알아두는 것이 중요하다. 예로 flex에서 flex-shrink는 1이 기본값이다. 그래서 따로 기본 값을 정해주지 않으면 화면이 줄어들 때 요소도 같이 줄어든다. 이처럼 속성의 기본 값을 알아두면 내 의도와는 다르게 동작하는 CSS에 대해 좀 더 빠르게 파악할 수 있다. 📑 CSS 변수 JavaScript에서 데이터를 변수에 담아 재사용하는 것처럼 css도 속성 값들을 변수에 담아 전역적으로 사용할 수 있다. :root는 html을 의미하는데, 선택자 우선순위에 따라 적용되는 순서가 다르기 때문에 :root를 더 많이 사용하는 것 같다. (가상 클래스 우선순위가 태그..