반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- redis
- 쿠버네티스
- aws
- 소켓IO
- methodreference
- 배포자동화
- styled-components
- GHCR
- 예제
- yarn-berry
- 백엔드
- 배포
- Atomic Design
- git-hooks
- 인프라
- Kubernetes
- 개발
- 자동화
- 디렉토리이동
- 도커
- 롱 폴링
- 스타일 컴포넌트
- react
- Infra
- 캐시
- deployment
- docker
- Atomic Design 패턴으로 페이지 만들기
- backend
- 리액트
Archives
- Today
- Total
목록Styled Component 만들기 (1)
SLASH 기술 블로그
Styled Component 구현하기
시작하기 Styled Component는 CSS-in-JS를 선호하는 나에게 있어 굉장히 좋은 라이브러리이다. 또한 누군가가 React 프로젝트에서 Style을 선언하는 방식에 대해 고민을 하고 있다면 Styled Component를 소개 해 줄 것이다. 이번 글에서는 Styled Component가 어떤 원리로 CSS-in-JS를 구현 할 수 있는지 간단하게 구현해보면서 이해해보자. CSS-in-JS 핵심 문법 Styled-Components는 styled.{tagName}`` 이런식으로 선언하여 사용하게된다. 이때 ``안에다가 CSS코드를 작성하게 되는데 ``안에 있는 값을 파싱할 수 있게 해주는 것이 Tagged Template Literals 이다. Tagged Template Literals 이..
styled-component
2021. 4. 25. 22:52