JS' 공부흔적

이 글을 통해서 아래 메뉴를 구현할 수 있다. hover 시에는 컴포넌트가 보이도록, 벗어나면 다시 사라지도록 구현해야 한다. 우선 뼈대를 구성할 건데 styled-components를 사용하여 스타일링했다. 일정 커뮤니티 const MenuUl = styled.ul` list-style: none; display: flex; align-items: center; gap: 48px; position: relative; & span { cursor: pointer; } `; ul의 기본 스타일을 없애고, 메뉴 사이에 gap을 줬다. SubHeader는 각 메뉴에 마우스를 호버 하면 나타나는 서브 메뉴이다. 간단하게 아래와 같이 작성했다. const SubHeader = ({ tab }) => { const..

개발을 하다 보면 프로젝트 전체에 기본적으로 적용하고 싶은 스타일이 있을 것이다. 예를 들어 나의 경우에는 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라는 기능을 제공하고 있다는 것을 알게 되었다. ..