홈페이지 컴포넌트 + 카드 레이아웃 제작

[Yenowme]

• 그리드 라이브러리 사용해서 메인 레이아웃 구성
• 반응형 페이지 적용

TODO

• 그리드 라이브러리 SSR 적용 안되는 문제 수정 예정
• 로컬 데이터 fs로 가져오기 기능 추가해야함

[netlify]

✅ Deploy Preview for crabft ready!

Name	Link
🔨 Latest commit	0f08135
🔍 Latest deploy log	https://app.netlify.com/sites/crabft/deploys/6267e892e32c210009172402
😎 Deploy Preview	https://deploy-preview-60--crabft.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Yenowme]

그리드 라이브러리의 SSR 미지원에 따른 해결방법

1. SEO를 속이기

CSR이 되기 전에 자체적으로 비슷한 레이아웃을 제작해서 HTML에 띄워보면 어떨까?

• 단점
  • 레이아웃 쉬프트 현상이 매우 크게 발생하며 사용자 경험이 매우 떨어질 수 있음

2. 네이티브 CSS속성 사용해보기

아직 지원되는 브라우저가 거의 없다. 파이어폭스만 특정 브라우저에서만 가능할지도.

3. 스켈레톤을 추가하기

위와 비슷한 느낌으로, 핀터레스트처럼 첫번째 줄만 렌더를 해서 HTML로 전달 후 CSR로 나머지 줄을 렌더하는 방법

• SSG블로그를 제공하는 서비스에. 로딩(깜빡임)이 있다는게 부자연스러움

4. 디자인 수정..

• SSR이 지원되되록 정적인 그리드를 제공하는 디자인으로 시안 수정

[JaeSeoKim]

네이티브 CSS속성 관련 아티클

https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

[Yenowme]

#61 이슈로 제작 후 해결