React와 같이 사용하는 css 라이브러리로 styled-components를 자주 사용한다. 그런데, 공통 스타일을 관리하려고 theme를 만들면 필요할 때마다 import를 해야한다는 불편함이 있었다. 또한 dark 테마와 같이 전체적인 스타일이 변경되야 하는 경우 처리하기가 매우 까다로웠다. 하지만 styled-components에서는 context API를 통해 theme를 관리할 수 있는데, ThemeProvider이다. ThemeProvider ThemeProvider는 context를 통해서 하위 컴포넌트에서 theme 속성을 전달하는 역할을 한다. 그래서 일관적인 theme를 유지할 수 있다. import { ThemeProvider } from 'styled-components'; co..

Next.js에서 styled-components를 같이 사용할 때 오류가 발생했다. 찾아보니 styled-components를 사용했을 때의 className과 실제 적용되었을 때의 className이 달라서 발생하는 문제였다. 최초 실행 시에는 css가 제대로 적용이 되었는데, 페이지 이동 & 새로고침이 발생했을 때 위와 같은 오류가 나오면서 css가 적용이 되지 않았다. 찾아보니 next.js에서 초기 렌더링은 ssr로 적용되고, 이후 페이지 이동 등은 csr로 렌더링이 된다. 초기 렌더링 시에는 ssr로 적용되기 때문에 문제가 없었지만 이후 csr로 적용되기 때문에 클래스 명이 맞지 않아서 발생한 것 같다. 해결 방법 구글에 검색 했을 때 기본적으로 해결하는 방법이 있었다. .babelrc에서 설..

0. 들어가며 들어가기에 앞서 개발환경 구성은 앞선 React Native 개발환경 구성 부분을 확인하시길 바랍니다. 1. 프로젝트 생성 React Native CLI를 사용해서 React Native 프로젝트를 생성한다. react-native init FirstApp 명령어를 사용하면 자동으로 최신 리액트 네이티브 버전으로 프로젝트가 생성된다. 하지만, 이번 버전을 사용하거나, 특정 프로젝트와 동일한 버전으로 프로젝트를 생성하고 싶은 경우에는 react-native init -version 0.59.10 FirstApp -version 옵션을 사용하면 지정할 수 있다. 프로젝트 구성이 다 된 경우에 IOS의 경우 yarn ios // or react-native run-ios 명령어를 통해서 프로젝트..

0. 사건의 발단 평화로운 어느날, Custom Webpack을 사용해서 만든 프로젝트에 styled-component를 사용할때 발생하였다.... 나는 분명 yarn add styled-component를 입력하고 package.json에 제대로 입력되어있는 것까지 확인하였는데, 왜 모듈이 없다고 나오는 것일까?! 1. 바로 해결 Holy!! yarn add styled-components 를 사용해서 설치해야하는 것이였다!?