꿈꾸는 개발자의 블로그

아래 예시는 간단한 버튼 배경 색상을 바꾸는 코드이지만, 이를 잘 활용하면 다양한 곳에 편리하게 사용할 수 있을 것 같다! styled-components props 값 넘겨 받기 import styled from "styled-components"; export const Test = () => { return ( 버튼// theme를 props로 전달 ); } const Button = styled.button` background-color: ${(props) => props.theme}; `;

Next에서 styled-components를 사용하려면 초기 설정이 필요했다. _document 파일은 SSR시에 실행이 되는데, 여기에 스타일 설정을 해주면 서버에서 문서를 내려받을 때 스타일이 적용된 문서를 받을 수 있다. 만약 설정해놓지 않았다면, styled-components를 통한 스타일이 적용되지 않고 랜더링 되는 문제가 생길 것이다! SSR 이후 내부 라우팅을 통해 페이지가 이동하면서 CSR을 하게 되는데, 이 때 서버에서 생성하는 해시값과 브라우저에서 생성하는 해시값이 달라서 에러가 발생한다. 이를 해결하기 위해서 바벨 플러그인을 설치해준다. TypeScript + styled-components 사용하기 1. styled-components 설치 2. styled-components용..

에러 원인 Next.js + TypeScript 환경에서 styled-components를 설치하고 사용하려 하는데, Module not found: Can't resolve 'styled-components'라는 에러가 발생했다. 내 생각으론 현재 프로젝트가 TypeScript 환경이기 때문에 @types/styled-components만 설치하면 되는줄 알았지만, 이것은 타입을 정의한 파일일 뿐이였고... 정작 필요한 패키지는 안한 셈이였다. 에러 해결방법 필요한 패키지를 설치해주면 된다! 아주 간단했다~ $ yarn add styled-components

그동안 각각의 CSS 파일을 밖에 두고 스타일링 했었는데, 하나의 컴포넌트 내에서 이용가능한 styld-components를 사용해보았다. 불필요한 CSS가 import 되지 않도록 만들어주기 때문에 좋다! styled-components 설치 yarn add styled-components styled-components를 이용한 구현 import styled from 'styled-components'; export const Test = () => { render ( 버튼 ); } const Wrapper = styled.div` width: 100%; height: 100vh; `; const Button = styled.button` background-color: gray; border-rad..

next.js에서 이미지를 불러오기 위해서는 대신에 모듈을 쓰는 것이 좋다! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 화살표 움직임에는 애니메이션 속성을 통해 다양하게 표현할 수 있다. animation 속성 속성 의미 animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정 animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정 animation-timing-function - linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) 애니메이션 진행 속도, 또는 가속 방식을 지정 ..