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..

사이드 프로젝트를 하다가 아래처럼 예쁜 체크박스를 구현할 일이 생겼다. 사실 예전에 React-Native에서도 비슷하게 체크박스 커스텀을 했었는데, 그 당시에는 button으로 구현했었다. CheckBox 컴포넌트가 있던데 왜 안 썼을까.. 그래서 이번에는 다른 방법으로 구현해보고자 했다. 우선 기본 틀을 잡았다. 기본 아이디어는 다음과 같다. input을 숨기고, label로 input 값을 컨트롤한다. 이때 전체를 label로 감싸서 텍스트 클릭으로도 컨트롤 할 수 있도록 한다. input 값의 변화에 따라 div 스타일이 달라진다. style 파일에는 기본적인 스타일링과 특히 input이 체크되었을 때와 아닐 때의 div 스타일을 정의한다. 이렇게 하면 아래와 같이 예쁜 커스텀 체크박스가 완성된다!

웹 페이지를 보다 보면 커서를 올려놓았을 때 해당 색상이 바로 변하는 것이 아니라 서서히 변하는 것을 볼 수 있다. 예를 들면 애플 홈페이지의 header navigation 부분이 있다. 이를 구현하기 위해서는 css의 transition 속성을 사용하면 되는데, 자세한 것은 문서를 참고하길 바란다. 간단한 예제로 분홍색 버튼에 커서를 올려놓았을 때 베이지 색으로 변하도록 구현하겠다. 아래와 같이 버튼을 만들고 간단하게 스타일링했다. 참고로 React와 styled-components를 사용한 예제이다. const Home = () => { return ( GET ); }; const Btn = styled.button` all: unset; margin-bottom: 20px; border: 1px ..

개발을 하다 보면 모달창을 자주 사용하게 된다. 모달창은 보통 화면에 한가운데에 위치하게 되는데 이를 라이징 테스트에서 원티드를 클론코딩하며 내가 겪었던 과정과 함께 기술하겠다. 원티드에서는 대표적으로 로그인 및 회원가입에서 모달이 필요한데, 우선 가장 쉽게 떠올렸던 방법은 모달의 width와 height를 고정값으로 정했다. width: 500px; height: 500px; top: calc(50% - 250px); left: calc(50% - 250px); 위와 같이 화면 중앙에 모달을 배치했었다. 그러나 모달마다 크기가 다르기 때문에 이는 분명한 한계점이 있다. 그래서 생각한 방법은 width는 고정값을 주고, height를 다르게 받았다. left: `calc(50% - ${width / 2}..

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