Today I Learned
- lighthouse로 성능 개선하기
- 마이페이지 CSS 수정
styled-components 페이지에 따라 조건부 스타일링하기
관심 카테고리 설정을 할 때 같은 컴포넌트를 재사용하고 있는데 어떤 페이지에서 사용하는지에 따라 스타일링을 다르게 주고 싶었다. 회원가입 페이지의 경우에는 해당 컴포넌트 container의 padding과 box-shadow 값을 없애고 싶었다.
어떻게 할까 고민하다가 router 정보를 props로 전달하고 삼항연산자로 처리하는 방식으로 해결했다.
const router = useRouter();
...
<S.CategoryContainer path={router.pathname}>
일단 컴포넌트 내에서 Next.js에서 제공하는 useRouter의 pathname 정보를 해당 styled-components에 props로 전달한다.
export const CategoryContainer = styled.div<{ path: string }>`
box-shadow: ${(props) =>
props.path === '/signup' ? 'none' : '0px 4px 4px rgba(0, 0, 0, 0.25)'};
padding: ${(props) => (props.path === '/signup' ? 0 : '19px')};
border-radius: 20px;
margin-bottom: 35px;
background-color: white;
width: 100%;
`;
그리고 props로 받은 path가 '/signup' 즉 회원가입 페이지일 때 box-shadow와 padding을 없애도록 처리했다.
<SelectMyRegion width={'100%'} path={'/signup'} />
+) 생각해 보니까 굳이 router.pathname 사용하지 않고 사용하는 컴포넌트에 따라 임의로 props를 넘겨주면 된다..
overflow-y 속성
overflow-y: auto;
- visible: 특정 요소가 박스를 넘어가더라도 그대로 보여준다.
- hidden: 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리한다. (세로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 가로 스크롤바는 나타남)
- scroll: 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인할 수 있도록 스크롤바를 표시한다. (세로 스크롤바 항상 표시)
- auto: 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인할 수 있도록 스크롤바를 표시한다. (내용이 넘칠때만 세로 스크롤바 표시)
그동안 scroll 속성만 이용하다가 auto를 적용하면 내용이 넘치지 않을 대는 스크롤바를 없앨 수 있다는 것을 알게 됐다..! 😯
출처 https://electronic-moongchi.tistory.com/62
회고
오늘 인프런 성능 개선이나 메타 태그 강의를 팀원들과 함께 보고 직접 프로젝트에 적용도 해봤다. 그리고 vercel에서 dev 브랜치용 도메인을 추가해서 개발 단계에서 배포한 것을 확인해 볼 수 있게 되었다! 또 오늘은 분양모음집의 도메인을 구매한 역사적인(?) 날이기도 하다 ㅎㅎ 아직 중간발표 이후의 작업 내역은 반영되지 않았지만 도메인 자랑하기!