# emotion

29개의 포스트
post-thumbnail

Button 이미지 잘려보임 수정

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

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

Next.js 설치 방법 및 emotion 사용법 및 Parsing error : Cannot find module 'next/babel' 에러 해결

먼저 Node.js와 yarn이 설치되어 있는지를 확인해봐야 합니다.Node.js는 node -v 를 통해 다음과 같이 v와 함께 버전이 표시된다면 설치되어 있는 상태입니다.yarn도 마찬가지로 -v를 통해서 확인할 수 있습니다.두 가지 모두 버전이 확인되면 node와

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

React를 사용해보자!

기존 HTML CSS JS VS React 지난주에 HTML, CSS, JS의 입문수준으로 공부를 하고 실제 실무에 쓰이는 React를 다루는 법을 공부했다. 기존에는 HTML, CSS, JS를 각각 따로 만들어서 HTML 입장에서 CSS를 link 태그를 이용하여

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

이미지 슬라이드

이미지 슬라이드를 구현 설계styled-components를 사용해야한다

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

Animation on Scroll이 있는 헤더바 만들기

나는 상단에 고정되어 있는 헤더를 좋아한다. 그렇지만 헤더 때문에 body가 출력되는 공간이 줄어드는 것은 그닥 좋아하지 않는다. (열린 교회 닫힘) 그래서 이 2가지 취향을 반영하기 위해 아래로 스크롤 시 투명해지는 헤더를 만들었다.

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

[TIL] 0102

axios instance를 만들어 공통 속성을 모듈화한다(공통 속성이 적용된 axios함수라고 할 수 있다)만든 instance에 interceptor를 설정한다요청/응답의 성공/실패 직전의 처리의 대한 로직을 작성할 수 있다 \-> callback함수로 작성하는데

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

[Storybook] emotion + typescript로 버튼 컴포넌트 만들기

스토리북으로 가장 먼저 만들어보았던 컴포넌트는 버튼 컴포넌트!버튼이라고 만만하게 보면 안된다.disabled, fullWidth, hover...등 경우의 수가 많기 때문에 작성해야하는 스타일이 많다 :)피그마로 직접 만들어본 버튼 디자인이다.피그마 처음 써봤는데 기존

2021년 12월 19일
·
0개의 댓글
post-thumbnail

[Storybook] emotion으로 storybook 글로벌 스타일 설정하기 (reset css)

컴포넌트를 만들기 전, css를 reset하는 작업이 필요하다.공통으로 사용되는 font-family도 이때 설정해주면 편하다.src 폴더 하위에 GlobalStyle.tsx 를 작성했다.(font는 Noto Sans KR 기준)reset css는 구글에 서치하면 나오

2021년 12월 13일
·
1개의 댓글
post-thumbnail

[Storybook] Storybook 시작하기 Emotion 과 Storybook + TypeScript 로 디자인 시스템 구축하기

회사에서 부족한 일정으로 미처 도입하지 못했던 디자인 시스템 구축을 개인적으로라도 꼭 해보고 싶어서 저녁 시간마다 열심히 디자인하고 개발했다.emotion + storybook + typescript 로 진행했으며 rollup.js 로 번들 작업 후 npm 라이브러리로

2021년 12월 10일
·
0개의 댓글
post-thumbnail

CRA + Emotion 패키지 설정

Create React App(CRA) 에서 이모션 사용 시 아래와 같이 매번 jsx pragma 선언이 필요합니다. 이 코드를 제거하기 위해서는 바벨 설정이 필요합니다.하지만 기본적으로 CRA는 바벨 사용자 설정을 막아놓았습니다. 다음의 명령어를 수행하게 되면 숨겨져

2021년 11월 16일
·
0개의 댓글
post-thumbnail

TIL 34 | Emotion이요?

제 감정은 중요합니다.

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

styled emotion simple import

emotion 을 사용해봤는데 너무 편리하다.하지만 import 하려고 보면 안 편리하다.편한 이유는 이렇게 스타일 시트에서 바로 라이브러리의 태그를 불러와서 스타일을 줄 수 있기 때문이다. 불편한 이유는 이걸 쓸 때도 스타일 파일에서 저렇게 하나하나 export 해서

2021년 11월 10일
·
0개의 댓글
post-thumbnail

Style

css를 따로 스타일시트로 분리하지 않고 자동적으로 컴포넌트 내부에서 쓸수 있게 해주는 라이브러리 react 내부에서 동작하도록 만들어주는 라이브러리로 위에 코드 처럼 css를 각 컴포넌트마다 관리할수 있도록 스타일을 제공해준다. Vue에서 template 태그, sc

2021년 10월 8일
·
0개의 댓글
post-thumbnail

[React] 전역으로 관리하는 모달 만들기

이번에 만들어 볼 것은 모달인데, ios에서 기본적으로 제공하는 것처럼 생긴 모달을 만들 것입니다!먼저 완성본부터 보겠습니다디자인에 관련된 정확한 측정이 스스로의 힘으로는 불가능하였지만, 같이 협업하고 계신 디자이너님께서 만들어서 제공해주셨습니다👍프론트 작업 시에,

2021년 9월 14일
·
0개의 댓글

[TIL] 8월 30일 Emotion

개발자를 꿈꾸고 부트캠프에 들어와서 첫날이 지났다.프리캠프후 공부를 많이하지 못해 걱정했는데 오늘은 다행히도 잘따라갔던거 같다.멘토님이 개발자 취업에 있어서 개발자를 평가하는 가장 큰 요소는 블로그, 깃허브라고 하셨는데앞으로 매일매일 블로그 작성하기, 깃허브 꾸준히 관

2021년 8월 30일
·
0개의 댓글

Emotion Production에서 CSS 깨지는경우

이슈사항 운영환경에서 특정 페이지 접속후 css깨지는 현상 발생, local dev에선 문제가 없었고, build시에 해당현상 발생. 해결 방법 처음에 build option을 의심했으나, git history에서 별다른 수정내역이 없었고, 특정 페이지 접속후에

2021년 8월 20일
·
0개의 댓글
post-thumbnail

create-react-app, typescript, emotion으로 React 프로젝트 시작하기

작은 프로젝트지만 처음부터 구성하는건 오랜만이라 하는 김에 정리해서 공유하려 한다.우선 CRA와 typescript를 사용할거고, 스타일링은 emotion으로, 코딩 컨벤션을 위해 ESLint와 Prettier를 사용 할 예정이다.일단 아래 명령어 중 하나를 사용해서

2021년 7월 12일
·
2개의 댓글
post-thumbnail

개발환경 구축[Next+Emotion+Tailwind+Twin.macro]

네트워크엔지니어 주제에 이것저것 해보고 싶은게 많다.백엔드는 NestJS를 사용을 하고있고, 앞으로도 그럴 것 같다. 프론트엔트는 React 경험이 있지만, 개인프로 젝트 목적상 SEO 가 가능해야하여 Next를 사용해 보기로 했다.하여,Typescript+Next+E

2021년 6월 24일
·
0개의 댓글
post-thumbnail

CSS In JS

emotion과 styled-componets

2021년 5월 28일
·
0개의 댓글
post-thumbnail

리액트 다크모드 - emotion

이번에는 emotion을 활용하여 다크모드를 만들어 보겠습니다.emotion을 사용하기 위해서는 몇몇 설정 방법이 필요합니다. 자세한 코드는 깃허브에서 확인할 수 있습니다. 환경typescriptcreate-react-app환경설정 설치css prop 설정 types

2021년 5월 20일
·
0개의 댓글