emotion

FrontEnd/React
[React] 리액트에서 tdd 개발하기 (with emotion)
만약 CRA를 통해서 리액트 프로젝트를 만들었다면 손쉽게 Test코드를 작성하는 것이 가능하다. testing-libray/react 와 jest는 CRA를 통해 리액트 프로젝트를 만들었다면 이미 설치가 되어있을 것이고 emotion을 적용한 프로젝트에서 테스트 코드를 작성하기 위해서 @emotion/jest 라이브러리를 추가적으로 설치해준다. npm install --save-dev @emotion/jest 이후 테스트 코드를 만들때 아래 항목을 추가하면 된다 import { matchers } from "@emotion/jest"; expect.extend(matchers); @emotion/jest와 다른 테스팅 라이브러리를 비교할 때, @emotion/jest의 강점은 다음과 같다. 간편한 구성:..
→2023.12.14
오류들
[REACT] Emotion 컴포넌트 선택자 사용시 에러
Emotion을 활용하다가 Component Selector(컴포넌트 선택자) 를 사용했더니 아래와 같은 오류가 발생했다. Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform. Component Selector(컴포넌트 선택자)란 ?! const Card = styled(face)` padding: 20px; width: 150px; height: 220px; margin-right: 15px; position: relative; float: left; perspective: 600px; /*3..
→2023.11.16
FrontEnd/React
[React] emotion styled 컴포넌트처럼 관리하기
리액트에서 emotion/styled 를 활용하여 작업하는법을 알아보자. 리액트에서 emotion을 통해 위와같은 박스를 만들어볼 것이다. 우선 emotion/styled를 적용하려면 해당 라이브러리를 설치해야 한다. npm i @emotion/styled 그리고 아래처럼 컴포넌트를 하나 만들어주자. 해당 컴포넌트 아랫단에, const GitHubLoginArea = styled` display: flex; align-content: center; position: absolute; right: 0; top: 5rem; padding: 1rem; background: #ffffff; box-shadow: 0px 1px 9px rgba(10, 31, 68, 0.1), 0px 0px 1px rgba(10, ..
→2022.11.17

• 이전
• 1
• 다음