본문 바로가기
Dev/reactJS

React Js - Global CSS 설정 + styled reset. classNames/bind :global local css 동시 적용

by 하양동백 2021. 3. 10.

목차

    react module.css :global local css 동시 적용하는 방법.

    classNames/bind를 사용하고 있을 때

    className={cx("label","labelTst")}

    .labelTst는 app.module.css에 등록.


    React Js - Global CSS 설정 + styled reset

    1. css 초기화를 위해 styled-reset 설치
    2. styled-components는 local로 동작하기 때문에 global 한 css를 만들기 위해 GlobalStyles.js 생성
    • 설치
      • NPM설치 : npm install styled-reset styled-components
      • 얀 살치: yarn add styled-reset styled-components
    • 사용

    Components/GlobalStyles.js

     import { createGlobalStyle } from "styled-components";
     import reset from "styled-reset";
     ​
     const globalStyles = createGlobalStyle`
         ${reset};
         a{
             text-decoration:none;
             color:inherit;
         }
         *{
             box-sizing:boerder-box;
         }
         body{
             font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             font-size: 14px;
             background-color:rgba(20,20,20,1);
         }
     `;
     ​
     ​
     export default globalStyles;
    

    Components/App.js

    import React, { Component } from "react";
     import Router from "Components/Router";
     import GlobalStyles from "Components/GlobalStyles";
     ​
     class App extends Component {
       render() {
         return (
           <>
             <Router />
             <GlobalStyles />
           </>
        );
      }
     }
     ​
     export default App;

    이렇게 하면 button이나 input마다 작성할 코드가 줄어듦.

    렌더링 되는 모든 폰트에 광역 설정한 폰트가 적용되므로 중복 코드를 작성하지 않아도 됨.


    지역 가이드에가입하고 난 뒤 구글에서 자사 서비스로 다양한 이용자 혜택을 주는 것 같아서 베타 테스트도 참여해 보기로 했어요.

    딱히 베타테스터를 한다고 해서 뭔가 금전적인 대단한 혜택이 주어지진 않아요.

    다만 저 같은 블로거들에겐 남들보다 한 발 앞서서 새 프로그램의 기능을 테스트해 보고 글 쓸 기회가 주어진다는 거죠.

    최신 구글맵 앱인 구글 지도에서 주목할만한 기능은 지역 가이드의 참여가 편리해 졌다는 점과 지역가이드의 활동이 활발 해 짐에 따라서 지역 관련 특히 식당을 비롯한 서비스 업종에 대한 데이터 수집이 상당히 늘어서 그것을 기반으로 한 보다 정확하고 흥미로운 정보 제공이 가능해졌다는 점이죠.

    물론 한국에서는 아직 지도 데이터 반출이 되지 않아서 다음이나 네이버처럼 국내를 기반으로 한 서비스들에 비해 정확도나 기본정보가 여전히 부족하긴 합니다.

    하지만 저처럼 구글 가이드 혜택에 혹한 사용자들이 열심히 지역정보를 올린다면....

    다음이나 네이버는 따라가기 힘든 데이터의 축적이 일어나고 지도 데이터 반출은 의미 없어질지도 모릅니다.

    5천만 명의 절반만 안드로이드 기반 스마트폰을 들고 전국 방방곡곡을 누비기만 해도 구글은 앉아서 대한민국 구석구석의 정보를 gps로 정확하게 실측한 데이터를 소유하게 될 테니까요.

    반응형

    댓글