# CSS in JS

hafnium1923

팀 프로젝트를 진행하며 프로젝트 스타일링 방법을 선택하기전 각각의 장점과 단점을 찾아보았다. 이것말고도 더 많은 장단점이 있지만 선택에 중요한 판단이 되고 공감가능한 장단점을 위주로 찾아보았다. CSS 단점 모든 클래스의 이름이 전역적으로 존재하기 때문에 별도의 class 명명 규칙이 필요하다 하나의 요소에 여러 css 가 적용될 수 있어, 개발자가 모든 스타일을 기억해야한다. js의 상태 값을 공유하기 어렵다. css 로드 순서에 따라 우선순위가 달라지기 때문에 css 로드 순서를 기억해야한다. 하위 컴포넌트가 부모 컴포넌트의 스타일링에 영향을 받는다. ⇒ 유지보수의 측면에서도, 협업의 측면에서도 단점이 명확함 CSS-in-JS 장점 class 명이 빌드 타임에 유니크하게 변경되어 명명규칙이 필요없음 CSS가 컴포넌트 단위로 추상화되기 때문에 CSS간 의존성 고려 필요없음 JS의 상태 값을 공유할 수 있음 (동적스타일링

oasis0981

🎆SSR 환경에서 CSS 어떻게? > 프로젝트에서 Next.js13을 사용하기 위해 떠난 험난한 여정.. > 어떻게 해야 마크업 작업 시간을 줄이고 개발에 집중할 수 있을지를 고민하다보니 CSS에 대해 많은 걸 배울 수 있었다. 1. figma와 tailwind figma의 dev mode로 디자인된 컴포넌트를 코드로 변경할 수 있었다. 근데 모든 엘리먼트가 div로 나타나고 인라인 스타일로 css가 지정되어있었다. 바로 사용하기엔 무리라고 생각해 다른 프레임워크들을 찾아봤다. 테오님의 강의 - 함수형 css와 피그마 협업 시맨틱하지 않은 css 네이밍, 그리고 가독성떨어지는 jsx가 결국 쓰기 편하다는 결론을 인정할수밖에없었다. tailwind가 좋다고는 하는데 공식 웹사이트에선 컴포넌트와 템플릿이

bnb8419

Emotion은 Styled-components와 함께 가장 대중적으로 사용되는 CSS-in-JS 방식의 Styling 라이브러리이다. Next.js + TS환경에서 Emotion을 적용했다. 설치 및 babel, tsConfig설정 설치 > npm i @emotion/react // React 환경에서 설치 npm i @emotion/styled @emotion/react // styled 컴포넌트 형태로 사용가능 babel-plugin 설치 => emotion에서 minification and optimization 기능 제공함. > npm install --save-dev @emotion/babel-plugin .babelrc 파일 설정 tsconfig 설정 => emotion/react는 설정필요, emotion/styled는 설정불필요 사용방법 기본스타일링 2가지 css prop

dbwlgp1yng

💅🏻 styled-components로 배경이미지 넣기 > 따로 오류가 발생하는 것은 아니라서 찾아보게 되었다. 예시 만약 동적으로 사용하고 싶다면, 참고 https://github.com/facebook/create-react-app/issues/3238

lgs03042

1. 서론 최근 웹 개발 트렌드 중 하나는 CSS-in-JS이다. 이 기술은 JavaScript 내에서 CSS를 작성할 수 있게 해주는데, 그 중에서도 Styled-components와 Emotion이 가장 주목받고 있다. 두 라이브러리의 차이점은 뭘까 2. CSS-in-JS의 등장 배경 전통적인 CSS는 스타일 관리의 어려움, 전역 범위 등의 문제점을 안고 있다. CSS-in-JS는 이 문제들을 해결하기 위해 나왔다. 컴포넌트 단위의 스타일링이나 동적 스타일링이 훨씬 간단해졌다. 3. Styled-components 주요 특징 및 장점: 자동화된 고유 클래스명, 동적 스타일링 지원, 서버 사이드 렌더링과의 호환성 등 Styled-components의 단점: 런타임에 스타일을 생성하기 때문에 성능 이슈가 발생할 수 있다. 4. Emotion 주요 특징 및 장점: 빠른 런타임 성능, 객체 스타일 문법 지원, SourceMap 지원

tnghgks

개요 프로젝트 진행 전 CSS 라이브러리를 선택함에 있어서 첫번째, 팀원들 모두 해당 라이브러리를 사용할 줄 아는가? 였고 두번째는 개발할때 얼마나 편리한가? DX를 생각했었다. 하지만 공부를 하다보니 프로젝트마다 runtime overhead를 고려해서 선택해야한다는것을 알게되었다. >🎈 런타임 오버헤드(runtime overhead) : 오버헤드란 어떤 처리를 위해 들어가는 간접적인 처리 시간을 뜻합니다. 예를 들어 A라는 처리를 단순하게 실행한다면 10초 걸리는데, 안전성을 고려하고 부가적인 B라는 처리를 추가한 결과 처리시간이 15초 걸렸다면, 오버헤드는 5초가 됩니다. 이글에서 런타임 오버헤드는 런타임에 CSS를 생성함으로써 벌어지는 성능하락을 말합니다. Runtime 런타임 CSS-in-JS 라이브러리는 실행환경

sgsg9447

Vanila-extract **| 만난버그 부분은 수정중...!! ** 좋은점 ? 특징! Zero-runtimeStylesheets inTypeScript. TypeScript에서 스타일시트를 작성하고 사용할 때, 런타임에 추가적인 처리나 계산 없이 작동하는 것을 의미함 일반적으로 emotion과 같은 CSS-in-JS 라이브러리를 사용하면, 런타임에 스타일을 동적으로 생성하고 적용하는 과정이 포함된다. (추가적인 JavaScript 실행시간과 성능 오버헤드를 초래할 수 있음) vanila-extract는 모든 스타일이 빌드타임에 이미 생성되어 있고, 런타임에는 단순히 해당 스타일을 적용하기만 하면 됨 TypeScript는 정적 타입 체크를 제공하기 때문에, 빌드 타임에 스타일 시트의 유효성을 검사하고 오류를 감지하는 것이 가능함 Use TypeScrip

just-do-justin

스타일링 라이브러리 Emotion Emotion은 JavaScript를 사용하여 CSS 스타일을 관리하는 라이브러리로, React와 다른 프레임워크에서 사용할 수 있습니다. Emotion은 CSS-in-JS 스타일링 방식을 채택하여, 컴포넌트와 함께 스타일을 선언하고 적용할 수 있습니다. CSS-in-JS 방식 중 하나인 "Styled Components"와 유사한 기능을 제공합니다. CSS-in-JS: Emotion은 JavaScript 코드 안에서 CSS 스타일을 작성할 수 있도록 해주는 방식으로, 스타일과 컴포넌트를 함께 관리할 수 있습니다. 퍼포먼스: Emotion은 빠른 런타임 성능을 제공하며, 스타일을 최적화하여 불필요한 렌더링을 방지합니다. 스타일 재사용: Emotion은 스타일을 JavaScript 객체로 추상화하여 재사용성을 높여줍니다. Framer-motion Framer Motion은 모션 그래픽 및 애니메이션을 구현하기 위한

chocoallergie

CSS-in-JS 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 리액트 컴포넌트 스타일을 지정하는 것. 2014년 페이스북 개발자인 Christopher Chedeau aka Vjeux가 처음 소개했다. 그가 설명한 것을 토대로 표를 정리해보았다. | 전통적인 CSS의 어려움 | CSS-in-JS가 해결해줄 수 있는 것 | | ----------------------------------- | --------------------------------- | | 글로벌 공간에 선언된 이름의 명명 규칙 필요| class명이 빌드 타임에 유니크하게 변경되기 때문에 별도의 명명 규칙이 필요치 않음 | | CSS 파일 간의 의존성으로 관리가 필요| CSS가 컴포넌트

_dodo_hee

MUI > MUI는 구글의 디자인 철학인 Material Design을 구현한 자바스크립트 라이브러리이다. MUI를 사용하면, 이미 잘 설계된 컴포넌트를 사용하여 개발 시간을 줄일 수 있다. 일관된 디자인을 적용할 수 있다. Material Design 모바일, 데스크톱 등 다양한 디바이스들을 아우르는 하나의 일관된 구글의 디자인 가이드라인이다 특징 질감이 느껴지는 표면 (tactile surfaces) 대담하고 선명한 그래픽 디자인 (bold graphic design) 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션 최근 개선된 MUI 이름이 바꼈다. Material UI -> MUI emotion을 접목시켜 더 styled-component와 가까워졌다. emotion > 자바스크립트 라이브러리 css 스타일을 작성하도록 설계된 라이브러리 🤔 내가 생각해본 MUI 장점 디자이너가 없을때

dev_seongjoo

CSS-in-JS가 무엇인가요? CSS-in-JS는 JavaScript 코드 안에서 CSS 스타일을 작성하고 관리하는 접근 방식입니다. 기존의 CSS 작성 방식과는 달리, CSS-in-JS는 JavaScript 코드의 형태로 스타일을 표현하고 해당 스타일이 적용될 컴포넌트와 함께 사용됩니다. CSS-in-JS의 주요 내용 CSS-in-JS의 핵심 아이디어는 다음과 같습니다: 1. 컴포넌트 기반 스타일링: CSS-in-JS는 컴포넌트 기반 개발 방식과 밀접하게 연결되어 컴포넌트와 관련된 스타일을 캡슐화하고 모듈화합니다. 스타일은 컴포넌트와 함께 작성되므로 스타일과 컴포넌트 간의 관계를 명확하게 표현할 수 있습니다. 2. 동적 스타일링: CSS-in-JS는 동적으로 스타일을 생성하고 조작할 수 있는 기능을 제공합니다. 상태에 따라 스타일을 변경하거나 조건부 스타일을 적용하는 등의 동적인 스타일링이 가능합니다. **3. 스타일 충돌

kaori-killer

1. 무엇을 배웠는가? 자바스크립트에서 css를 쓰는 법에 대해 배웠습니다. 2. 좋았던 점은? 의미 있는 마크업을 하기 위한 다양한 방법이 있다는 걸 알았습니다. 3. 아쉬운 점은? 이번 주는 정말로 힘들었습니다. 상태 관리 주차부터 따라가기 어려워서 아무런 열정이 생기지 않았고, 할당량을 채우지 못한 점이 아쉬웠습니다. 4. 앞으로 어떻게 할 것인가? 결국 트레이너님께 방향성에 대해 상담을 받았습니다. 앞으로는 다른 사람들과 비교를 하지 않고, 제 속도에 맞춰 공부할 것입니다. 처음에는 제가 이 코스를 마치면 원하는 어떤 것이든 만들 수 있는 역량을 갖출 거라 생각했기 때문에, 매주 최선을 다해 노력했습니다. 그러나 지나치게 많은 기대와 사소한

jeris

Topic React, Styled Components Features of styled components Styled components installation & selector Component selector Dynamic styling styled() function css function Global style component keyframes function ThemeProvider as keyword Transient prop JavaScript Tagged function What I Learned Styled Components Feedback Styled components는 공식 문서가 잘 되어 있는 것 같아서 공식 문서를 보면서 공부하면 만족스러울 것 같다. 부트캠프의 Weekly mission으로 주어진 프

jeris

1. Styled Components 시작하기 Styled Componets란? Styled Components는 React에서 사용되는 CSS-in-JS 라이브러리로, 컴포넌트 스타일링을 더욱 쉽고 간편하게 만들어주는 도구입니다. Styled Components를 사용하면 컴포넌트와 스타일을 하나의 파일에서 정의할 수 있습니다. 이는 컴포넌트와 스타일을 분리하지 않아도 되므로 코드 유지보수를 더욱 용이하게 만들어줍니다. 또한, 동적으로 스타일을 변경하는 것이 가능하며, 컴포넌트에 스타일을 적용하는 것이 더욱 직관적이고 간단해집니다. Styled Components 예시 코드 2. 기존 방식의 문제점 CSS 클래스 이름이 겹치는 문제 클래스 이름은 전역적인 특성을 가지기 때문에, 부모 컴포넌트의 CSS 파일에서도 같은 클래스 이름이 사용된 부분이 있으면 import 해오지 않은 CSS 파일에서의 스타일이 적용될 수 있습니다

lovesyung

Styled Components의 기본 사용법을 익힌다. HTML과 CSS로 작성된 요소를 Styled Components 컴포넌트로 바꿀 수 있다. UI 개발 도구의 필요성을 이해한다. Storybook의 기본 사용법을 익힌다. 🍊Styled Components 🍒 CSS in JS의 등장 기존의 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 등의 라이브러리의 등장으로 컴포넌트 단위 개발이 주류가 되었지만, CSS는 그렇지 못했다는 점에서 출발한 개념이다. CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다. Styl

keumky1

Runtime CSS in JS의 문제 React가 유행하면서 CSS in JS가 많은 인기를 얻었습니다. 리액트를 사용해봤다면 한번쯤은 styled-component나 emotion을 사용해본 경험이 있을 정도입니다. CSS in JS는 다음과 같은 장점이 있습니다. CSS에서 JS문법을 사용할 수 있어서 생산성 🔼 컴포넌트 파일에 관련된 코드들을 함께 둘 수 있음 (colocation) 기존에는 css와 js파일을 분리해야했다. className이 겹치지 않음을 보장한다.(지역 스코프 스타일) 하지만 모든 기술에는 단점도 존재합니다. 기존의 CSS in JS, 즉 런타임 CSS in JS는 성능을 저하시킬 수 있다는 것입니다. 런타임 CSS in JS는 런타임에 js파일이 실행되면서 style을 생성합니다. style 생성의 규모가 크고 빈번할 수록 성능이 저하될

oneny

문제 발생 이전 게시글에서 Css-in-JS를 서버 사이드 렌더링 시 헤더에 주입하여 미리 HTML을 마크업할 때 스타일까지 HTML 요소에 녹여내기 위해 _document.tsx를 작성했다. Next.js로 마이그레이션하기 Customizing renderPage 하지만!! 최초 서버 사이드 렌더링(SSR) 이후 서버를 거치지

cobocho

Styled Componentstyled-components를 쓰는 이유 기존 리액트에서 객체 리터럴을 통해 css를 적용시키려면 이러한 기존 js문법에 어긋나지 않는 방식으로 변형시켜야 하였다. 하지만 styled-components를 사용한다면 이런 식으로 템플릿 리터럴을 사용하여 기존 css와 동일하게 입력이 가능하다. 또한 css를 적용시키기 위해 클래스를 생성할때 난수화된 클래스명을 생성하고 적용시키므로 scoped css가 가능해진다. styled-components 적용 우선 프로젝트의 터미널에서 npm을 사용하여 설치한다. 이후 styled-components를 사용할 디렉토리로 이동하여 styled를 import한다. 스타일이 적용된 컴포넌트 만들기 기본적으로 import한 styled는 프로퍼티로 HTML의 element들을 가지고 있다 이러한 형식으로 작성할 시 이는 이러한 스타일

restarea

stitches를 5-6개월 정도 사용하면서 편했던 점이나 활용 방식에 대해 설명하고자 합니다. stlyed-components에서의 조건부 스타일링 className driven props driven stitches에서의 조건부 스타일링 variatns driven 마찬가지로 classname 혹은 data attribute로도 핸들링이 가능하지만 variants로 핸들링하는 것이 랜더단이 가장 깔끔하고 css 작성문이 직관적이어서 좋았다. 차이점 styled components와 같은 기존 css-in-js 같은 경우 컴포넌트에서 런타임에 스타일을 수정할 때마다 스타일 태그가 더해져 dom, cssom 트리를 구축하고 css를 직렬화하여

aimzero9303

문제 애니메이션 적용부분 늘 알고 써먹던 방식으로 boolean값인 hoverState로 삼항연산자를 사용하여, 동적 애니메이션을 구현하려는데 다음과 같은 에러가 났다. 해결 구글링을 하다가 스택오버플로우에서 다음과 같이 코드를 작성하면 된다고 나온다. css요거 하나만 추가해주면 해결이다. 근데 이게 왜 필요한지는 아직은 정확히 모르겠다. 아 맞다 import를 해야하니까 잊지말고 📌 https://stackoverflow.com/questions/56781193/not-able-to-style-nested-animations-with-keyframes-with-styled-components