# emotion

104개의 포스트
post-thumbnail

Next.js에 Emotion 적용하기

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

3일 전
·
0개의 댓글
·
post-thumbnail

폴더 트리 구성하기

폴더 트리 구성하기

2023년 5월 16일
·
0개의 댓글
·
post-thumbnail

와 Datepicker!

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

2023년 5월 15일
·
0개의 댓글
·
post-thumbnail

Nextjs13 twin.macro 도입

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

2023년 5월 10일
·
0개의 댓글
·
post-thumbnail

Emotion 사용 중 발생한 DetailedHTMLProps 이슈 해결하기

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

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

Nextjs Emotion Cmponent Selector ( + SWC, MUI )

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

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

레이아웃 컴포넌트 작업기

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

2023년 4월 20일
·
0개의 댓글
·
post-thumbnail

[Code Camp_TIL] 230321 DAY7

FrontEnd TIL DAY7

2023년 4월 9일
·
0개의 댓글
·
post-thumbnail

Emotion js

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

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

20210209 - emotion.js

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

2023년 3월 21일
·
0개의 댓글
·
post-thumbnail

[Archives] Toggle

Study_Archives

2023년 3월 20일
·
0개의 댓글
·
post-thumbnail

[Code Camp_TIL] 230313 DAY1

FrontEnd TIL DAY1

2023년 3월 18일
·
0개의 댓글
·
post-thumbnail

[react] 컴포넌트 연습

react 컴포넌트 연습

2023년 3월 9일
·
0개의 댓글
·
post-thumbnail

React-bootstrap, emotion 스타일

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

2023년 3월 5일
·
0개의 댓글
·
post-thumbnail

[code.camp_1일차]Node.js, npm, yarn 이해

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

2023년 2월 23일
·
0개의 댓글
·

React SSR 스타일링에 개고생하는 이유

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

2023년 2월 17일
·
1개의 댓글
·

component 이름 바꾸기

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

2023년 2월 14일
·
0개의 댓글
·
post-thumbnail

Emotion 소개 및 사용하기

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

2023년 2월 12일
·
0개의 댓글
·