# emotion

48개의 포스트

Week.01 JSX & emotion

React 라이브러리의 프레임워크이다. 어차피 무슨말인지도 잘 모르는 수준이므로 넘어가도록 하자.자바스크립트를 편하게 쓸 수있게 해준다던 react 를 사용한다면서 왜또 Nextjs가 추가 된걸까.. 라는 생각이들어 검색을 해봤다. 이해할 수 있는 수준으로 설명을 해보

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

FE.07 Day.01

코딩에 관심이 있는 사람이라면, 특히나 프론트엔드 쪽에 관심이 있다면 90% 이상의 사람들은 html, css, js(JavaScrip)을 떠올릴 것이다. 본인도 이 3가지 밖에 몰랐지만 첫 날부터 이 3가지언어를 좀더 편하게, 효율적으로 다루기 위해서 react라는

2022년 5월 15일
·
0개의 댓글

[Emotion] Theming

theme는 @emotion/react패키지에 포함되어 있습니다.ThemeProvider 앱의 최상위 수준에 추가하고 props.theme로 테마에 접근할 수 있는 기능을 제공합니다.

2022년 5월 13일
·
0개의 댓글
post-thumbnail

[Emotion] MediaQuery

Emotion에서 미디어 쿼리를 사용하는 것은 일반 css에서 사용하는 것과 같습니다.미디어 쿼리는 반응형 앱을 만드는 데 유용할 수 있지만 반복해서 작성해주면 각 스타일마다 다르게 적용될 수도 있고 비효율적입니다. 사용할 때마다 다시 작성하는 대신 상수로 옮겨 사용하

2022년 5월 13일
·
0개의 댓글
post-thumbnail

emotion

작성중

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

Next/Image에 대해 얼만큼 알아?

글을 쓰게된 계기 최근 next.js를 공부하면서 직접 구현해보며 깊이 이해한 부분이 있어 글로 남겨보고자 합니다. 아무래도 이미지를 화면에 출력하게 되는데 next.js에서는 이미지를 최적화시켜 주어 따로 처리하지 않아도 되도록 해줍니다 (이런 편리한 기능이 많기 때

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

Emotion 으로 Dark Mode 설정하기

Emotion 으로 Dark Mode를 설정을 해보았다. TypeScript 에 아직 익숙치 않아서 Type 지정을 하는 데에 시간이 많이 소요된 것 같다, 문법 공부를 다시 해야할 것 같다. 우선은 이 part에서는 Dark Mode를 구현하는 것에 집중하기로 했다.

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

[Next + TypeScript] 넥스트 프로젝트에 Material UI + styled-components 적용하기 (emotion 씁시다)

나는 개인적으로 여러 UI 라이브러리 중에 Material UI (이하 MUI)를 선호하고 있다. 개인적으로 ant design 이나 부트스트랩보다 디자인이 깔끔하고 사용하기도 편한 것 같다그리고 MUI 와 함께 사용하는 것이 styled-components다.먼저 N

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

styled-components 를 emotion 으로 변환하기

지금까지는 CSS-in-JS 인, styled-components 를 사용해왔었다. 최근에 emotion 으로 사용하는 분들이 점점 늘어가는 추세인 것 같아서 나도 이번 기회에 emotion에 대하여 알아보려한다.styled-components와 매우 비슷하여 배움에

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

typescript + react + emotion 환경에서 path alias 설정해주기

create-react-app, typescript, emotion으로 React 프로젝트 시작하기React와 typescript 는 npx create-react-app 폴더명 --template typescript를 이용하여 설치하였고, 기본적인 emotion, b

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

툴팁 띄우기

일단 position relative와 absolute 에 대한 이해가 필요하다.이는 간단하다 부모의 태그에 position: relative 속성을 주고,자식 태그에서 position: absolute 를 주면부모 태그의 position: relative 를 기준으로

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

Emotion & Styled-components

아래에서 다룰 예제를 테스트 하는 과정에서 문제가 생겼다...${ChildDiv}{ background-color: red; }이와 같은 jsx문법을 @emotion/styled 패키지가 인식하지 못하는 것 같았다.하지만 한 시간을 삽질한 결과.. 해결완료..먼저 루트

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

React emotion styled 컴포넌트

이번에는 다른 라이브러리를 소개해보려고 한다.내 개인적인 생각으로는 material UI의 styled보다 emotion이 더 편한것 같다. 왜냐면 hightlight, auto-complete 기능이 제공 되기 때문이다. 따라서 , camelCase로 바꾸지 않아도

2022년 2월 28일
·
0개의 댓글

[React] CRA에서 emotion 세팅하기 (@emotion/react)

emotion을 세팅하면서 알게 된 사실들

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

react 스타일

css 및 styled-components 소개 등

2022년 2월 18일
·
0개의 댓글
post-thumbnail

styled-components 과 emotion, 도대체 차이가 뭔가?

styled-components vs emotion 💥 도대체 차이가 뭘까??

2022년 2월 10일
·
2개의 댓글

[Develog] 디스코드 영문장(알파벳)을 이모티콘으로 바꿔주는 간단앱

평소 디스코드를 자주 쓰는 필자가 이모티콘란을 보니 눈에띄는것이있어서 간단히 만들어보았다. 사진에보면 파란사각형안에 알파벳이 써있는데, 이모든 형식이 ':regionalindicator알파벳: '의 형식을 띈다. 간단하게 어플리케이션에 문장을 입력하면 해당 이모티콘들로 바꿔주도록 만들어보았다. 실행화면 ![](https://images.velog....

2022년 1월 26일
·
0개의 댓글

[React] Received 'false' for a non-boolean attribute 'color' Warning 메시지 해결과정

presenter component에서 styled-component쪽으로 인자를 전달하는 과정에서 warning 메시지

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

Button 이미지 잘려보임 수정

이미지 크기는 같은데 버튼 영역의 크기가 이미지보다 작게 잡히는 버그가 있어서 수정하였다.수정 방법은 height: fit-content 를 사용하여 해결하였다수정 전 수정 후

2022년 1월 14일
·
0개의 댓글

Day 01-02.

컴포넌트 / React hooks / state

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