# emotion

88개의 포스트
post-thumbnail

[기록] 리액트에서 Emotion이 적용되지 않을 때 해결 방법

/** @jsxImportSource @emotion/react */

약 6시간 전
·
0개의 댓글
·
post-thumbnail

emotion에도 props전달이 가능한가?

지난 글 '폴더구조:container/presentational패턴' 참고데이터 흐름이 단방향 구조인 리액트에서 props는 부모컴포넌트에서 자식컴포넌트에게만 줄 수 있다.이러한 특징을 가진 props는 emotion에도 적용이 가능하다.이러한 코드가 있다고 가정해보자

2023년 1월 17일
·
0개의 댓글
·
post-thumbnail

[TIL] Emotion 1

@jsx jsx를 꼭 적어주어야 @emotion/react가 실행된다.단순히 주석이라고 생각하고 쓰지 않으면 안됨!!codesandboxemotionjs-intro-1ysvo?fontsize=14&hidenavigation=1&theme=light기본적인 스타일은 st

2023년 1월 11일
·
0개의 댓글
·
post-thumbnail

과제중 에러발생

UI를 그리는중에? 에러가 발생했다.스타일에서 코드가 꼬인거라던데, import 경로도 다시 확인해보았고, 빨간줄도 안보이는데..한참 찾다가 아이콘 이미지부분 스타일을 다른것을 지우면서 같이지워진 모양이었다.겨우 찾아서 다시 적용하고 수정하였다.

2023년 1월 10일
·
0개의 댓글
·

Emotion

어제 이거 때문에 개고생했다.위 처럼 적으면, Chrome devtools 에서 다음처럼 변하였다... 이유는 emotion 은 React.createElement 대신에 jsx 함수를 사용하기 때문에 babel 설정이 이루어져야 한다해당부분에 대해서는 JSX 에서 C

2023년 1월 10일
·
0개의 댓글
·

TailwindCSS & Emotion setting with nextJs

TailwindCss & Emotion 설정때문에 공식문서 들락날락하다가 한 곳에 정리합니다.yarr add -D tailwindcss postcss autoprefixeryarn tailwindcss init -ptailwind.config.js > content에

2023년 1월 7일
·
0개의 댓글
·
post-thumbnail

[리뷰] npm 패키지(모듈) 배포 후기

안녕하세요~ 👋오늘은 npm에 나만의 패키지를 배포해본 후기를 적어볼게요.npm 로고npm은 Node Package Manager의 줄임말로 노드환경에서 사용할 수 있는 자바스크립트 패키지들을 관리해주는 프로그램이에요.저는 사이드 프로젝트로 쓸만한 프로그램들을 만들어

2023년 1월 4일
·
0개의 댓글
·

emotion) 애니메이션(keyframes)을 삼항연산자 사용

emotion) 애니메이션(keyframes)을 삼항연산자 사용시 에러 해결

2022년 12월 29일
·
0개의 댓글
·

[Emotion] CSS-in-JS 더알아보기

기존 프로젝트는 CSS-in-JS 타입의 Styled-components와 미리 만들어진 유틸리티 클래스와 커스텀 클래스를 함께 활용할 수 있는 Tailwind CSS 프레임워크를 사용해보았는데, 이력서를 작성하기 시작하면서 채용공고들을 둘러보니, Sass나 Scss

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

(Emotion) Emotion and Styled-Components

Difference between Emotion and Styled-Components

2022년 12월 20일
·
0개의 댓글
·
post-thumbnail

vscode 에서 styled component나 emotion을 쓸 때 사용하면 좋은 extesion

vscode-styled-components를 설치하면 js 파일에서도 css 문법 자동완성과 신택스 하이라이팅을 사용할 수 있어서 개발에 편리하다.이름: vscode-styled-componentsID: styled-components.vscode-styled-com

2022년 12월 16일
·
0개의 댓글
·

emotion 사용 후기

CSS-in-JS 라이브러리 중 하나인 emotion을 사용하며 느낀 점을 적어본다.

2022년 12월 11일
·
0개의 댓글
·

react-slick에 styled-component를 사용해보자..

styled-component를 사용해 react-slick의 스타일을 수정하려면, styled()에 import로 불러온 Slider를 넣어주면 된다.

2022년 12월 6일
·
0개의 댓글
·
post-thumbnail

SSR 환경의 다크모드 깜빡임 현상 해결하기

Next.js SSR 환경에서 Emotion 기반의 다크모드를 적용했을때 발생하는 깜빡임 현상을 해결해 보자!

2022년 12월 6일
·
2개의 댓글
·
post-thumbnail

Emotion props data 타입지정

여러 개의 CSS class 를 사용하여 스타일을 적용하는 것처럼, props 를 사용하여 특정 스타일을 부여했다.하지만 TypeScript 를 사용하여 props 를 사용하면 다음과 같은 에러가 나온다...

2022년 12월 3일
·
0개의 댓글
·
post-thumbnail

[React] 아바타 캐릭터 만들기

안녕하세요😀 리액트로 아바타 만들기 기능을 구현해보았습니다.말처럼 거창한 건 아니고...눈, 입 모양의 이미지를 클릭하면 얼굴 모양(?)의 원형에 위 아래로 배치하여 캐릭터 얼굴처럼 보이게 하는 쉬운 기능입니다. svg로 변환한 이미지를 사용하여 색깔을 쉽게 변경할

2022년 12월 1일
·
0개의 댓글
·
post-thumbnail

[React]Emotion에 대해 알아보자(2)(fallbacks,Nested Seletors,Media Queries, Globalstyles, keyframes)

&가 없다면 p태그가 haeader 태그 안에 들어 있기도 하고 들어 있지 않다. 하지만 header 태그 안에 있는 p 태그에게만 명시적으로 다른 색깔을 주고 싶을 때 어떻게 해야 하는가?css 선택자 중에서는 부모를 선택할 수 있는 선택자는 존재하지 않는다.head

2022년 11월 25일
·
0개의 댓글
·
post-thumbnail

[React] emotion에 대해 알아보자(1)

emotion을 사용할 때 create-react-app(cra)을 사용하여 react 프로젝트 생성 시 emotion을 사용하기 위해서는 맨 위 상단에 /\*\* @jsxImportSource @emotion/react \*/을 추가해주어야 함styled compon

2022년 11월 25일
·
0개의 댓글
·
post-thumbnail

[Meet Errors] React + TypeScript + Emotion 환경에서 props에 기초한 스타일링 변화 감지를 못하는 에러 해결 방법

공통으로 사용될 버튼 컴포넌트를 만드는 과정에서 다음과 같은 에러를 마주하게 되었습니다. button DOM 요소에 background를 props로 넘겨, Emotion을 활용한 props 기반 스타일링을 하는 과정에서 위와 같은 에러를 마주하였습니다.backgrou

2022년 11월 23일
·
0개의 댓글
·
post-thumbnail

스프링처럼 늘어났다 줄어드는 바텀시트 만들기

터치 이벤트와 padding, margin을 이용하여 스프링처럼 늘어났다 줄어드는 바텀시트를 흉내내 보았다.

2022년 11월 6일
·
0개의 댓글
·