TIL-23.05.03

 

 

문제점

코인( ex)비트코인) 들에 대한 데이터를 제공해주는 api를 이용해서 각 코인별로 데이터를 보여주는 프로젝트를 진행하고있다.

이번 프로젝트의 스타일링은 styled-components만을 사용해 진행하고있는데, 각각의 요소들의 스타일링을 진행함에 있어 

태그가 기본적으로 가지고 있는 수치들때문에 중복적용되는 속성들이 눈에 보일 정도로 많았다

태그들이 기본적으로 가지고 있는 스타일링 수치들을 초기화하는 방법이 있지 않을까? 라는 질문에 방법을 찾았다

 

 

시도한점

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
*{
  box-sizing: border-box;
}
body {
  line-height: 1;
  font-family:'Source Sans Pro', sans-serif;
  background-color: ${(props) => props.theme.bgColor};
  color: ${(props) => props.theme.textColor};
}
a{
  text-decoration: none;
  color:inherit;
}
menu, ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
`;

Reset css라고 불리우는 속성데이터는

https://github.com/zacanger/styled-reset/blob/master/src/index.ts 를 참고했다

스타일 컴포넌트를 글로벌하게 적용시키기위해 createGlobalStyle을 스타일컴포넌트로부터 임포트해왔고

해당 변수를 최상위트리(App.tsx)에 위치시켜 전역적으로 적용하게끔 작성했다.

이렇게 처음에 세팅을 해놓으니 각각의 컴포넌트마다 스타일링을 할때 기본값을 제거해주기위해 중복적으로 사용해오던 속성들을 안써줘도되니 코드가 깔끔해졌다.

 

 

 

알게된점

Reset css를 적용함으로서 불필요한 코드들의 중복성을 제거할수있으니 

앞으로 프로젝트를 진행할때 다른 프론트엔드 팀원들과 Reset css를 적용할지 말지를 우선 상의해야겠다.