반응형 웹개발/리액트4 📚 Storybook을 사용해보자! 📢 개발환경: React.js, typescript, styled-components 사용 ❗ 혹시 storybook 세팅이 되어있지 않다면 이전 게시물을 참고하자! 2021.07.25 - [웹개발/개발환경 설정] - next.js 에 typescript, storybook 설정하기 next.js 에 typescript, storybook 설정하기 🎠 내 tmi... 쿠키파킹의 웹사이트는 원래 react.js로 개발했었다. 쿠키파팅 서비스에는 디렉토리 공유 기능이 있다. 우리는 사용자들이 카톡으로 공유 링크를 전달하는 경우가 많을 것이라고 예측 carpediem9911.tistory.com storybook을 사용하기 위해 블로그 글을 읽어보니 addon-knobs를 사용해서 컴포넌트 props를 제어하.. 2021. 7. 27. ReactComponent를 통해 svg 를 컴포넌트처럼 사용하기 ReactComponent를 통해 svg 파일을 컴포넌트처럼 사용하면 fill 속성을 변경하여 svg 에셋의 색을 설정할 수 있다! svg 파일 코드를 뜯어보면 다음과 같다 혹은 이런 형식이다. 첫번째 svg의 경우 색상을 바꾸는 방법은 다음과 같다. import styled from "styled-components"; import { PlusIcon } from "@assets/icons/common"; const IconBox = () => { return ( ); }; const Container = styled.div` width: 20px; height: 20px .plus_icon{ width: 10px; height: 10px; path { fill: #ffffff; } } `; 이렇게 s.. 2021. 7. 24. styled-components로 checkbox 커스텀하기 웹 사이트 제작을 하면서 체크박스를 커스텀해야할 상황이 생겼는데, 다들 css를 사용하여 커스텀하는 방법을 사용하고 있었다. 나의 경우에는 styled-components를 사용하여 커스텀을 하고 싶었기 때문에 관련 자료들을 찾아보다가 medium.com/@colebemis/building-a-checkbox-component-with-react-and-styled-components-8d3aa1d826dd Building a Checkbox Component with React and styled-components A (mostly) hack-free approach medium.com 이 분이 작성한 글을 발견하게 되었다! 체크박스 커스텀을 위해서는 4가지 컴포넌트가 필요하다. 1. 체크박스 컨테이.. 2021. 4. 22. styled-components 알차게 사용하기 이번에 정리할 내용은 styled-components가 가진 기능들을 보다 알차게 사용하는 법에 대한 것이다. styled-components는 각각의 컴포넌트들을 생성하고 그 컴포넌트들의 css를 바로 작성할 수 있게 해주는 라이브러리이다. 기존의 css나 태그의 style 속성을 사용할 때는 변수를 사용할 수 없었지만, styled-components를 사용하면 컴포넌트이기 때문에 props로 값을 받아 변수처럼 사용할 수 있다. import styled from 'styled-components'; const ImageBox = () => { return( ); }; const Image = styled.div` width: 10px; height: 10px; background: url(${pro.. 2021. 4. 22. 이전 1 다음 반응형
