와.. 이걸 내가 해냄ㅠㅠ깃허브에서 서비스와 스토리북을 동시에 배포하고자 했다.처음에는 깃허브 액션(GitHub Actions) 스크립트를 두 개로 나눠서 각각 진행하려고 했지만...결론: 한 개의 스크립트에서 모든 배포를 진행해야 한다.기본적으로 알아야 할 GitHub Pages의 URL 구조GitHub Pages의 기본 URL은 아래와 같은 구조를 가진다:https://.github.io//여기서 나는 다음과 같은 요구사항이 있었다:/ 하위에는 서비스를 배포/storybook 하위에는 스토리북을 배포심지어 SPA(Single Page Application)의 특성상 새로고침 시에도 404가 뜨지 않게 처리해야 한다.이렇게 설정하려면 단순히 두 개의 배포 스크립트를 작성한다고 끝나는 게 아니다.GitH..
팀 프로젝트를 진행하며 프로젝트 스타일링 방법을 선택하기전 각각의 장점과 단점을 찾아보았다. 이것말고도 더 많은 장단점이 있지만 선택에 중요한 판단이 되고 공감가능한 장단점을 위주로 찾아보았다. CSS 단점 모든 클래스의 이름이 전역적으로 존재하기 때문에 별도의 class 명명 규칙이 필요하다 하나의 요소에 여러 css 가 적용될 수 있어, 개발자가 모든 스타일을 기억해야한다. js의 상태 값을 공유하기 어렵다. css 로드 순서에 따라 우선순위가 달라지기 때문에 css 로드 순서를 기억해야한다. 하위 컴포넌트가 부모 컴포넌트의 스타일링에 영향을 받는다. ⇒ 유지보수의 측면에서도, 협업의 측면에서도 단점이 명확함 CSS-in-JS 장점 class 명이 빌드 타임에 유니크하게 변경되어 명명규칙이 필요없음 ..
블록 수준 요소에는 미리 정의된 100% 너비가 있음 인라인 요소에는 미리 정의된 너비나 패딩이 없음 auto 값으로 width 속성이나 margin을 적용한다면 효과가 없음 태그 내에 존재하는 공간만 소비하도록 바인딩된 요소를 만들기 때문 따라서 직접 width값을 지정해줘야 auto가 적용
grid-column-gap minmax() repeat와 같이 쓰면 좋다. 최소 간격과 최대 간격을 지정해줌 .gird { grid-template-columns: repeat(6, minmax(150px, 1fr)); } auto-fill / auto-fix repeat()와 함께 사용된다. repeat()함수의 파라미터로 열 또는 행의 개수를 미리 지정해 주지 않고, 설정된 너비가 허용하는 한 최대한 셀을 채우게 된다 .gird { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .gird { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } auto-fit: 그리드 컨테..
