JS' 공부흔적

개발을 하다 보면 프로젝트 전체에 기본적으로 적용하고 싶은 스타일이 있을 것이다. 예를 들어 나의 경우에는 button 태그를 스타일링 할 때 아예 처음부터 커스텀하고 싶어서 all: unset;을 주고 시작한다. 이때 all: unset;을 button 태그마다 모두 써줘야한다. 또한, hover 시에 포인터 커서가 되도록 모든 button에 설정해야 한다. 이런 귀찮음을 방지하기 위해서 전역 스타일 적용이 필요한데, styled-components에서는 createGlobalStyle를 사용하면 된다. 우선 전역 스타일을 작성할 파일 하나를 만든다. 나의 경우, src\style\global\ 경로에 파일을 만들었다. createGlobalStyle은 일반적으로 styled-components를 사용..

오늘의집 클론코딩 프로젝트를 진행하는 도중에 mainColor를 전역 변수로 사용해야함을 느꼈다. 이전에 React Native 프로젝트에서는 Context API를 사용하여 전역 변수를 사용했고, 이번에는 Redux를 사용하여 상태 관리를 하기로 했기 때문에 처음에는 Redux에 전역 변수를 저장해야겠다고 생각했다. 그래서 Redux 내에 initialState에 변수를 선언해놓고 이것을 각 페이지에서 useSelector로 불러온 후, 해당 변수를 styled-components에 props로 전달해주었다. 페이지가 많아지다보니 이러한 작업이 번거롭다고 생각했고, 더 좋은 방법을 찾아보던 중에 styled-components에서 ThemeProvider라는 기능을 제공하고 있다는 것을 알게 되었다. ..