2022.05.28

1. 스타일드 컴포넌트의 장단점 

 

팀원 중의 한명이 정확한 styled-components의 장점을 물어보는데, 다른 것에 비해 굳이 styled-components를 쓰라고 설득을 잘

못하겠다. 그래서 우리가 쓰는 styled-components의 장점을 적어보려고 한다.

 

 

 

장점

 

1. 컴포넌트를 기반으로 CSS를 작성할 수 있게 해주는 라이브러리이다.

 

2. CSS in JS 방식으로 자바스크립트 코드에서 CSS를 작성할 수 있게 해준다.

(기존의 웹사이트는 HTML, CSS, JavaScript를 각자의 별도 파일로 두었는데, React, Vue와 같이 모던 자바스크립트 라이브러리가

인기를 끌고 '컴포넌트 기반 개발 방법'이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JS를 포함하는 패턴이 많이 사용되는 추세이다.)

 

3. 컴포넌트의 props값을 참조할 수 있으며, props 값에 따라 스타일을 다르게 코딩할 수 있다.

 

4. 스스로 className을 생성하기 때문에 중복이나 오타로 인한 버그를 줄여준다.

 

 

 

단점

 

1. 동적인 이벤트가 많은 사이트라면, 컴포넌트가 자주 렌더링 될 때 그 만큼 스타일 정보도 다시 읽어와야 한다.

2. 빠른 페이지로드에 불리하다.

3. 별도의 라이브러리를 설치해야하므로 번들의 크기가 커진다.

 

 

 

2. src 폴더를 벗어났는데 import 해올 때 Error.

Module not found: Error: You attempted to import ../../public/fonts/NotoSansKR-Black.otf which falls outside of the project src/ directory. 
Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

 

 

fonts 폴더를 src 폴더가 아닌 public 폴더에 넣고 import 해오려고 했는데 위와 같은 에러가 발생하였다.

그래서 src 폴더내에 styles 폴더안에 fonts 폴더 및 파일들을 넣어주고 나니까 해결되었다.

예전에 Next js를 쓸 때에는 public안에다가 넣어주었는데, 순수 리액트 라이브러리는 그게 불가능한가? 라는 의문이 들었다.

(따지고 보면 node modules도 src폴더 밖에 있는데 어떻게 import 해오는건지...)

 

 

3. 만약, JS와 HTML을 동시에 쓴다면, 확장자명을 jsx로 쓰기

 

그냥 App.js에서 jsx문법을 쓰려고 하니까 HTML 작성을 할 때 자동완성이 되지 않아서 당황하였다.

알고보니 확장자명을 jsx로 바꿔줘야지 자동완성이 제대로 이루어졌다.

jsx를 쓰는 이유는 리액트 공식문서에서 '자바스크립트 코드안에서 UI 관련 작업을 할 때 시각적으로 도움이 되고, 리액트가

도움이 되는 에러나 경고 메세지를 보여준다'고 한다. 

 

 

4. 폰트 로컬에서 불러오기

 

@font-face를 사용하여 폰트를 불러오는 과정에서 애를 많이 먹었다.

이게 폰트가 제대로 적용이 되었는지 안되었는지 구분도 제대로 가지 않았다.

다음과 같은 방법으로 불러오기에 성공했다.

//GlobalStyle.js

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
import NotoSansThin from '../styles/fonts/NotoSansKR-Thin.otf';
import NotoSansLight from '../styles/fonts/NotoSansKR-Light.otf';
import NotoSansRegular from '../styles/fonts/NotoSansKR-Regular.otf';
import NotoSansMedium from '../styles/fonts/NotoSansKR-Medium.otf';
import NotoSansBold from '../styles/fonts/NotoSansKR-Bold.otf';
import NotoSansBlack from '../styles/fonts/NotoSansKR-Black.otf';

const GlobalStyle = createGlobalStyle`
 ${reset};

 @font-face {
    font-family: "NotoSansKR-Thin";
        src: local("NotoSansKR-Thin"),
        url(${NotoSansThin}) format('woff');
        font-weight: 200;
        font-style: Thin;
}
@font-face {
    font-family: "NotoSansKR-Light";
        src: local("NotoSansKR-Light"),
        url(${NotoSansLight}) format('woff');
        font-weight: 300;
        font-style: Light;
}
@font-face {
    font-family: "NotoSansKR-Regular";
        src: local("NotoSansKR-Regular"),
        url(${NotoSansRegular}) format('woff');
        font-weight: 400;
        font-style: normal;
}
@font-face {
    font-family: "NotoSansKR-Medium";
        src: local("NotoSansKR-Medium"),
        url(${NotoSansMedium}) format('woff');
        font-weight: 500;
        font-style: Medium;
}
@font-face {
    font-family: "NotoSansKR-Bold";
        src: local("NotoSansKR-Bold"),
        url(${NotoSansBold}) format('woff');
        font-weight: 600;
        font-style: Bold;
}
@font-face {
    font-family: "NotoSansKR-Black";
        src: local("NotoSansKR-Black"),
        url(${NotoSansBlack}) format('woff');
        font-weight: 700;
        font-style: Black;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Noto Sans KR' , sans-serif;
}

 
 html,body{
     padding:0;
     margin:0;
     font-family: 'Noto Sans KR' , sans-serif;
 }


 a{
    text-decoration:none;
}


button{
    background:none;
    border:none;
    cursor:pointer;
}

li{
    list-style:none;
} 


`;

export default GlobalStyle;

 

 

5. GlobalStyle.js를 적용시키기

//App.js 

import React from 'react';
import GlobalStyle from './styles/GlobalStyle';

function App() {
  return (
    <div className="App">
      <GlobalStyle />
    </div>
  );
}

export default App;

App.js에 이런식으로 최상단에 놓이면 다 적용이 되는 형태이다. 그런데 최상단에 놓인다고 어떻게 모든 하위 컴포넌트들도 적용이 되는

원리인지 궁금했다.

 

 

6. eslint에서 설정해둔 jsdoc 해제하기

eslint.js 파일안에서 rules에 'require-jsdoc': 'off' 를 추가해주었더니 

팀원들이 일단 코드를 편하게 작성하게 잠시 jsdoc을 해제해두었다.

대신 자신이 작성한 함수나 코드에 대해서는 주석을 작성하기로 제안할 예정이다.

 

 

 

 

 

styled-components 관련 참고 블로그

 

https://velog.io/@gur0601/Styled-components%EC%99%80-SCSS-%EC%B0%A8%EC%9D%B4

Styled-components와 SCSS 차이, 장단점

 

https://velog.io/@ken1204/styled-components-%EC%84%A0%EC%A0%95%EC%9D%98-%EC%9D%B4%EC%9C%A0  

styled-components 선정의 이유

 

https://www.samsungsds.com/kr/insights/web_component.html

웹 컴포넌트 스타일링 관리 CSS-in-JS vs CSS-in-CSS