일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 배포자동화
- 롱 폴링
- Kubernetes
- 리액트
- 인프라
- styled-components
- Infra
- 소켓IO
- 백엔드
- 도커
- 스타일 컴포넌트
- react
- redis
- docker
- 디렉토리이동
- yarn-berry
- 배포
- methodreference
- 자동화
- deployment
- 예제
- 캐시
- Atomic Design 패턴으로 페이지 만들기
- 쿠버네티스
- backend
- 개발
- GHCR
- git-hooks
- aws
- Atomic Design
- Today
- Total
목록예제 (2)
SLASH 기술 블로그
styled-component란 + 개인적인 생각이라는 글에서 나는 styled-component가 react에서 스타일을 다룰 때 좋은 것 같다고 했다. 이번 글에서는 나는 어떻게 코드를 작성하는지 보여주려고 한다. styled-component 사용법 보통 여러 styled-component 예제들은 상태의 따른 스타일 변경을 Props를 통해 아래와 같이 작성 할 것이다. 예제1. import React from 'react' import styled from 'styled-components' const Box = styled.div` ${(props) => props.hide && `display: none;`} ` const Example1 = () => { const [hide, setHid..
Styled-component를 알아보기 전에 React는 많은 회사에서 사용할 만큼 프론트엔드 개발자라면 꼭 한번쯤은 경험해봐야 하는 대중적인 UI 라이브러리로 자리 잡았다. 웹 사이트마다 같은 기능을 하는 버튼이나 검색창이라도 각각 다른 애니메이션 효과와 형태를 가지고 있다. 이렇게 HTML 태그에 스타일링을 할 수 있게 도와주는 것이 CSS였다. 하지만 CSS의 단점들을 보완하거나 더 좋은 방향으로 SCSS나 Styled-component와 같은 것들이 하나씩 등장 하게 되었다. 이번 주제에서는 Styled-component에 대해서 알아보고 개인적인 생각을 얘기 해보려고 한다. Styled-component란 Styled-component란 CSS-in-JS라고 하는 Javascript파일 안에서..