Image Sprite
Image Sprite는
.icon1 {
background-image: url(../sprites/icons.png);
background-position: 0px 0px;
width: 24px;
height: 24px;
}이런 식으로 배경을 잘라서 사용하는데 크기는 어떻게 조정해야할까?
첫번쨰는 CSS3의 zoom을 사용하는 것이다.
<style>
.icon {
background-position: 0px 0px;
background-image: url('./sprite.png');
width: 64px;
height: 64px;
zoom: 2;
}
</style>
<body>
<div class="icon"></div>
</body>정말 간단하게 조절할수 있지'만' firefox 및 몇몇 브라우저에서는 이 속성을 아예 지원하지 않는다
범용적으로 사용할 수 있는 것은
background-size
를 사용하는 것이다.
<style>
.icon {
width: 50px;
height: 50px;
background-position: 0px -50px;
background-image: url('./mySprite.png');
}
.icon1 {
width: 25px;
height: 25px;
background-position: 0px -25px;
background-image: url('./mySprite.png');
background-size: 100% 1000%;
}
</style>
<body>
<div class="icon"></div>
<div class="icon1"></div>
</body>
이 mySprite 이미지를 잘라
이런식으로 맞출수 있다.
1x3의 사진에서 빨강만을 사용하고 싶으면
background position으로 시작점을 잡고
background-size를 사용해 세로로 3배만큼 확대한 뒤
이것을 width와 height을 통해서 다시 조절하는 방법인거 같다.
주의할점은 size로 확대하였으니
크기를 변경할떄 position의 값도 조절해주어야한다는 점이다.
React SSR 구현
Next.js를 사용을 했지만, 이것을 사용하지 않고 순수하게 React로만 SSR를 구현하는 것이 많은공부가 되겠다는 생각이 들어 찾아보았다.
참고한 글은 이거다.
Next.js 처럼 Server-side-rendering 구현하기
안녕하세요. Next.js 없이 Client-side-rendering을 Server-side-rendering 으로 바꾸는 방법을 작성해보았습니다.
minoo.medium.com
아직 성공하지는 못해서 내일 해봐야하는데,
배운 것을 정리하자면
@loadable-component
코드스플리팅용 라이브러리인데, React.lazy, suspense와 사용방법이 유사하다!
React 18에서는 lazy와 Suspense가 지원하지만 아직까지는 정식 버전이 아니므로, 안정적인 사용을 위해서라면 loadable component을 사용하는 것이 좋을것 같다.
const News = loadable(
() => import(/* webpackChunkName: "News" */ './pages/News')
);const OtherComponent = React.lazy(() => import('./OtherComponent'));
사용방식은 별반 다를게 없다.
SSR을 위한 준비로는 다소 까다로운 webpack 설정과, 프론트 용 서버를 구축해야하는데,
내일 이것을 분석하자.
'TIL' 카테고리의 다른 글
| TIL 2021-12-28 Github-action, Cron (0) | 2021.12.29 |
|---|---|
| TIL 2021-12-28 SSR 구현,RTK-Query, 프그머 추석 트래픽 (0) | 2021.12.28 |
| TIL 2021-12-22 RTK-Query, Image sprite, (0) | 2021.12.22 |
| TIL 2021-12-21 Redux ToolKit과 createAsyncThunk, Figma 아이콘 제작 (0) | 2021.12.22 |
| TIL 2021-12-11 Graphical Model (0) | 2021.12.11 |
