# emotion

s_sangs

Next.js에 전체적으로 Emotion을 적용하는 방법을 알아보려고 합니다.회사에서 주로 모바일 웹앱으로 작업을 하다가 새로운 프로젝트를 작업하게 됐는데요.반응형 웹으로 작업을하고 초기세팅까지 하려고 하니 익숙하지 않은 부분이 많았습니다 😢emotion에서 제공하는

moon_l

폴더 트리 구성하기

ju-nong

Datepicker아~ input 태그의 date type 말하는거지~?사실 만든지 좀 된건데, Notion 정리하다가 이것도 Velog에 작성하면 좋을 거 같아서 가져와봤어요 ^\_\_\_^ bViteReactTypescriptEmotionDay.js🌎 지구를 공전

codenmh0822

기존 emotion을 통한 CSS-in-JS 방식에서 단순한 컴포넌트의 HTML 코드 보다 스타일 코드가 더 복잡한 경우를 경험하였다.스타일 코드가 실제 기능 코드의 가독성을 해친다고 생각하여 tailwindCSS를 사용하게 되었다.emotion을 사용하며 불편했던 문

adultlee

구글링은 좀 해봤어, 다른 사람은 어떻게 문제를 해결할까? emotion/react 의 css function을 사용하면서 이게 왜 되는거지? 라고 의심해본 사람

pmmm114

현재 Nextjs v13 + Next compiler(SWC)을 사용Emotion을 사용하며, MUI에 추가적인 Style을 Wrapping하여 사용@emotion/babel-plugin의 components as selectors 기능을 사용하기 위해 MUI문서에선

alstnsrl98

css 작업을 하다보면 반복되는 css 코드들이 많이 생긴다. 특히 flex 기반의 레이아웃을 만들다보면 display: flex; flex-direction: \~~ 등의 코드들이 반복되는 경우가 많은데, emotion이나 styled-component를 사용할 경우

cometes

FrontEnd TIL DAY7

rowooncoding

CSS-in-JS 라이브러리로, 자바스크립트 파일 내에서 스타일을 지정할 수 있는 라이브러리입니다.인기가 많습니다.플릿 리터럴 또는 객체를 통해 손쉽게 스타일을 적용한 컴포넌트를 만들 수 있었고, 손쉽게 적용할 수 있었기 때문입니다.ass 문법을 지원했기 때문에 더 간

badbeoti

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntriesObject를 활용해서 작업한 부분 설명 Array.includes() 메서드 사용htt

nabang6047

g

cometes

Study_Archives

cometes

FrontEnd TIL DAY1

bzeromo

react 컴포넌트 연습

bzeromo

react.js Ⅲ

sangyoung23

남들이 만들어둔 css를 간단하게 import해서 사용할 수 있는 bootstrap 반응형 까지도 작업이 되어있는 장점이 있다.npm i react-bootstrap리액트 부트스트랩을 사용하기전 index.html에 Link로 연결해주는 작업public > index.

namyeji

VSCODE 설치Node.js 설치 (Node.js를 설치 시 npm은 자동으로 설치됨)Yarn 설치바탕화면에 프로젝트 폴더 만들기폴더 안에 Next.js 프로젝트 설치(Next.js 설치 시 React.js 는 자동으로 설치됨)Emotion 설치Apollo-Clien

composite

Next.js 같은 SSR 지원 가능한 프레임워크를 쓰면서 가장 고생하는 게 바로 스타일링일 것이다.물론 쌩으로 쓰는 건 지장 없는데 Styled components, emotion 등 스타일링을 리액트답게 체계적으로 관리할 수 있는 라이브러리를 사용할 경우 말이다.

wony_yoon

나는 emotion styled component를 통해 style을 만들어주고 있는데 가끔 component에 div나 span등 여러 값을 바꾸고 싶은 경우 아래처럼 하면 된다 밑의 예시는 h1~h6 까지의 태그를 만들어줄 수 있다

favorcho

Emotion 은 JS 로 css 스타일을 작성하도록 설계된 라이브러리다. Emotion은 프레임워크에 구애 받지 않고 사용이 가능하며, React와 함께 사용할 수도 있다. 1. 패키지 소개 @emotion/css 패키지 @emotion/css 패키지는