# emotion

17개의 포스트
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개의 댓글

code splitting and emotion

code splitting emotion in react

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

Poke Docs 만들기

개인프로젝트를 진행하는것을 좋아하는데, 이유는 일단 내가 만들고 싶은것을 만들기 때문에 흥미가 생기고, 새로운것들을 많이 시도해 볼 수 있어서 좋아합니다.이번에는 Poke API 를 사용하여 간단한 포켓몬 도감을 만들어 보려고 합니다.일단 사용하려는 stack 은 AP

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

CRA + Emotion + Storybook 구축하기

삽질은 나만 하면 돼!

2021년 2월 3일
·
2개의 댓글

typescript react-frame-component에 emotion 적용하기

우리 팀은 리액트로 크롬 익스텐션을 만드는 작업을 하고 있다. 크롬 익스텐션을 popup 형태 말고 진짜 안에 넣기 위해선 iframe 형태로 새로운 html로 만들어서 넣어주어야했다. 그래서 찾은 라이브러리가 react-frame-component이다.react-fr

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

Redux-toolkit DarkMode (w_ emotion)

이모션이란, CSS in JS 형식으로, Javascript 파일 안에서 CSS를 설정할 수 있는 라이브러리 입니다. 왜 이걸 하냐면, React의 경우 자바스크립트로 (코드, CSS, HTML) 모든 것을 한번에 하는 것이 이상적인데 Html 태그안에 넣어서 css를

2020년 11월 11일
·
1개의 댓글

리다기 스터디 9. component styling

요새는 코딩은 컴포넌트 구성되는 추세라고 현업자에게 들어본적이 있습니다.(youtude daqko님 말씀)그래서 컴포넌트별로 styling을 하는게 맞는건지 아니면 styling은 모아서 따로하는게 맞는건지 잘 모르겠지만 .. 이 장에서는 css styling부터 co

2020년 9월 1일
·
0개의 댓글
post-thumbnail

"React" 새롭게 배운 것들에 대해

해당 포스트에서는 제가 최근에 알게된 새로운 기술들과 더 효과적인 프로젝트 설계 방법에 대한 내용을 다룹니다. 저는 올해 초 들어와서 React를 시작했으며 초기 당시에는 좋은 코드를 짜지 못했습니다. 예를 들어 presentational component 구현 방식

2020년 8월 16일
·
0개의 댓글

typescript + react+emotion+redux

typescript+React+emotion+redux 간단예시

2020년 7월 31일
·
0개의 댓글

20200311 TIL

Question전통적인 page load 방식인 href 는 해당 주소에 대한 정보가 서버측에 저장되어 있고, 그 링크를 클릭하여 로드할 때 서버에서 자원이 넘어오는 것인지 ?Answer예전에는 어떤 웹 어플리케이션을 만들때, 여러 페이지로 구성되었다.A.html ,

2020년 3월 11일
·
0개의 댓글