logo
Published on

2021년 8월 넷째 주 내가 배운 것들

Authors
  • avatar
    Name
    Bora Choi
    Twitter

이번주 새로 알게된 내용 🤓

  1. styled component css 선택자
  • styled component를 사용할때 선택자로 변수를 사용할 수 있다. :after을 이용해 프로그래스 바를 만들어야했는데 마지막아이템에는 :aftercontent:none속성을 부여하고 싶었다. 부모컴포넌트에가서 스타일링을 하려했는데 생각해보니 그렇게하면 스타일이 컴포넌트에 종속되지 않는 문제점이 있었다. 이를 해결하기 위해 해당컴포넌트에서 부모로 올라가서 자식으로 내려와서 어쩌구저쩌구 이런 과정을 거쳤는데 컴포넌트 자체를 선택자로 지정할 수 있다는 사실을 알게 되었다.

    const Mycomponent = styled.div`
    {...}`
    
    const WrapperComponent = styled.div`
    {...}
    
    &:last-child > ${Mycomponent}:after { 
        {...}
    }
    `
    
  1. flexbox 특성
  • 새 프로젝트에서 화면을 퍼블리싱 하면서 flexbox를 많이 사용하는데 제대로 알지 못하고 사용한다는 느낌이 강했는데 이번기회에 다시 알게 되었다. 이 내용은 다시 정리해서 포스팅으로 올릴 계획이지만 대충 알게된것을 끄적여보자면...
    • flex item은 자동으로 컨테이너의 높이만큼 늘어난다. (이는 align-items속성의 기본값이 stretch이기때문 )
    • flexbox의 flex item에 width를 지정해도 제대로 먹히지 않는다. 아이템의 기본 고정 값을 주고싶다면 flex-basis 속성을 사용 할 것.
    • flex-growflex-shrink 속성을 사용해 아이템이 얼마나 유연한지 설정할 수 있다.
    이전까지 내가 알던 내용은 display:flexjustify-content:center align-items:center하면 가운데 정렬이 된다이게 끝이 었는데 특징들과 속성들을 배운것 같다.
  1. React의 HTML 어트리뷰트
  • styled component를 사용하면서 React컴포넌트에 다양한 어트리뷰트 값을 넘겨주는데 bgColor라는 어트리뷰트를 넘기면 콘솔에 자꾸 오류가 떴다. 알고보니 어트리뷰트 값을 카멜케이스를 사용해서 나온 오류. bgcolor라고 소문자로 바꿔주니 콘솔에 있던 오류 내용이 사라졌다.

이번주를 보내며

이번주는 퍼블리싱 관련해서 깨닫는게 많은 한주였다.
공부할때 js나 react위주의 공부를 했었는데 퍼블리싱에 대한 공부는 많이 부족했던거 같다.
프론트엔드 개발자라면 눈에 보이는 화면을 만들어 내는것도 중요하기 때문에 앞으로는
퍼블리싱 공부도 게을리하지 말아야지!