스켈레톤 UI
간단한 스켈레톤 UI로 로딩중을 이쁘게 표현할수 있다.
구현 자체는 어렵지 않을텐데,
중요한 부분은 아마 약간의 번쩍임이 있는 애니메이션일 것이다.
border-radius: 25px;
background: ${Palette.gray_2};
display: flex;
position: relative;
overflow: hidden;
&::after {
position: absolute;
transform: translateX(-100%);
border-radius: 2px;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(
90deg,
rgba(196, 196, 196) 0,
rgba(222, 222, 222, 0.2) 60%,
rgba(222, 222, 222, 0.5) 80%,
rgba(196, 196, 196, 0)
);
animation: shimmer 2s infinite;
content: '';
height: 100%;
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
}
after 의사코드를 통해서 이를 구현할수 있는데,
번쩍이는 부분은 다른 색상을 가진 after의 블럭이 원래 element를 지나면서 발생하는 효과인 것이다.
line gradient를 통해서 지나갈때 그다지 이질적이지 않은 색상을 가진 after 블럭을 만들고, 이를 transformX를 통해서 좌에서 우로 이동하도록 하면 된다.
레포지토리 통합
Express와 Next.js를 통한 CRUD 사이트를 만들면서 별도의 레포지토리를 통해 관리했었는데,
이를 하나로 묶고 제대로 commit을 관리하고 싶다는 생각이 들어 두 레포지토리를 통합해야겠다는 생각이 들었다.
이럴떄 사용하는 것이 git subtree다
이는 하나의 레포지토리에 다른 레포지토리를 서브 디렉토리로 중첩할수 있도록 해준다.
git subtree add --prefix <하위디렉토리 폴더명> <옮길 레포지토리 git> <브랜치명>으로 이루어져있으며, 하위 레포지토리의 기록을 무시하려면 --squash 플래그를 뒤에 붙이면 된다.
나같은 경우에는 새로운 레포지토리를 생성해 frontend와 backend 폴더를 만들어 두 레포지토리를 각각 집어넣었다.
