[React] Dashboard 만들기 - 01 Setting

내 프로젝트에 응용할 부분이 많을 것 같아서 아래 유튜브 영상을 보고 대시보드를 따라 만들어보기로 했다.
아래 영상에서 setting up project 부분에 해당하는 부분을 따라한 뒤 정리하였다.

1. 리액트 프로젝트 생성하기

우선 프로젝트 파일을 생성한다.

npx create-react-app stock-dashboard

2. App.css 파일 수정하기

@import

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

Google Fonts에서 Roboto 폰트를 가져온다.

:root

:root {
  scroll-behavior: smooth;
  --primary: #4154f1;
  --second: #717ff5;
  --bgColor: #f6f9ff;
}

:root는 CSS에서 가장 상위 수준의 선택자로, 전역 변수처럼 사용할 수 있는 CSS 변수를 정의할 때 사용한다.
위의 코드에서는 scroll-behavior: smooth를 사용하여 스크롤 동작을 부드럽게 만들어줬고, 색상 변수 --primary, --second, --bgColor를 정의하였다.

글로벌 스타일 설정

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* 선택자를 사용하여 모든 HTML 요소에 적용할 글로벌 스타일을 설정했다. 모든 요소의 기본 여백 및 패딩을 0으로 초기화하고, box-sizing: border-box를 설정하여 패딩과 테두리를 포함하여 크기 계산을 하도록 설정했다.

body

body {
  font-family: 'Open Sans', sans-serif;
  color: #444444;
  background: var(--bgColor);
}

body 요소는 웹페이지의 전체 내용을 담는 가장 큰 컨테이너이다. 기본 폰트와 글자 색상, 배경색을 설정하는 코드이다.

a(링크) 스타일

a {
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: var(--second);
  text-decoration: none;
}

링크 요소인 a태그의 기본 스타일을 설정하는 코드이다. text-decoration: none을 사용해 링크 밑줄을 제거하고, cursor; pointer를 사용해 링크 위에 커서를 올리면 손가락 모양으로 바뀌도록 설정했다. 또 a:hover를 통해 호버 상태에서의 스타일도 지정해주고 있다.

헤더 요소 스타일

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', sans-serif;
}

제목 요소(h1부터 h6)의 폰트를 Nunito 폰트로 지정해 주었다.

전체 코드

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  scroll-behavior: smooth;
  --primary: #4154f1;
  --second: #717ff5;
  --bgColor: #f6f9ff
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #444444;
  background: var(--bgColor);
}

a {
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: var(--second);
  text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Nunito', sans-serif;
}

3. bootstrap 사용하기

npm i bootstrap bootstrap-icons remixicon echarts react-apexcharts boxicons

프로젝트에서 사용할 라이브러리들을 설치해준다.