[TIL] 왜 이렇게 바쁜가요?😭

지속적인 폰트 렌더링

styled-components의 Globalstyles.js에 폰트를 적용했던게 문제였다.

폰트 부분만 CSS파일로 빼고 index.js에 import시키면서 해결했다.

 

이런 현상을 FOUT(Font Of Unstyled Text)라고 한다. css가 적용되기 전에 텍스트가 보여지는 현상이다.

styled-components의 globalstyle에서 font-face를 적용하면 일어나는 문제라고한다.

 

[Fix] 폰트 깜빡임 · Issue #23 · Trys-Ketch/trys-ketch-client

 

[React] 리액트 깜빡임 해결기(feat. 폰트)

 

react + ec2 + github actions

프로젝트 배포를 s3에서 ec2로 변경하게 되면서 ec2 환경에서의 CI/CD는 어떻게 이루어지는지 찾기 위해서 레퍼런스를 찾았다.

 

Deploy React app to AWS EC2 using GitHub Actions - Lightrains

 

합성 컴포넌트

 

쉽게 말하면, 컴포넌트의 요소들을 필요한 것만 추가해서 사용할 수 있도록하는 컴포넌트이다.

 

1. contextAPI로 관리하는 방법

	
const FlyOutContext = createContext();
 
function FlyOut(props) {
  const [open, toggle] = useState(false);
 
  const providerValue = { open, toggle };
 
  return (
    <FlyOutContext.Provider value={providerValue}>
      {props.children}
    </FlyOutContext.Provider>
  );
}

2. Object 형태로 export하면서 관리하는 방법

// export
export const Dialog = Object.assign(DialogMain, {
  Dimmed: DialogDimmed,
  Title: DialogTitle,
  Subtitle: DialogSubtitle,
  Description: DialogDescription,
  Comment: DialogComment,
  CheckButton: DialogCheckButton,
  CheckBox: DialogCheckBox,
  TextButton: DialogTextButton,
  Button: DialogButton,
  LabelButton: DialogLabelButton,
  Divider: DialogDivider,
});

// Usage
<Dialog>
    <Dialog.Title>제목</Dialog.Title>
</Dialog>

 

 

밑의 두 글은 강추한다.

합성 컴포넌트로 재사용성 극대화하기 | 카카오엔터테인먼트 FE 기술블로그

[리액트 디자인 패턴] Compound Component Pattern (합성 컴포넌트 패턴) 알아보기

 

사운드 관리

사운드를 관리하기 위해서 howler.js를 제일 먼저 고려했다. 크로스 브라우징과 모든 코덱 지원 가능하며, 외부 종속성이나 플러그인도 없이 100% javascript api로 만들어져서 7kb로 굉장히 가볍다.

 

howler.js - JavaScript audio library for the modern web