CSS 프레임워크

[guesung]

1. styled-component

2. tailwind

[seondal]

카카오웹툰은 CSS를 어떻게 작성하고있을까?

CSS in JS 의 성능이슈로 인해 tailwind css 를 쓰고 tailwind로 안되는 부분들만 CSS Module을 사용함.
다만 규모가 엄청 크고 성능이 크게 중요하지 않은 프로젝트에서는 빠르게 작성하고 테스트하기 쉬운 CSS in JS가 여전히 낫다

[seondal]

살짝 별개의 내용이긴 하지만 저희가 컬러코드를 어떻게 저장할지도 생각해봐야할 것 같아요!

프론트엔드 개발 시 컬러코드를 관리하는 방법은 여러 가지가 있습니다. 이 중에서 가장 흔히 사용되는 방법 두 가지를 설명하겠습니다.

1. 변수 또는 상수를 사용하여 관리:
   CSS에서 컬러코드를 변수 또는 상수로 정의하여 관리하는 방법입니다. 이는 CSS 프리프로세서(예: Sass, Less)를 사용할 때 특히 유용합니다. 변수를 사용하면 전체 프로젝트에서 일관된 컬러테마를 쉽게 변경하거나 재사용할 수 있습니다.

   예를 들어, Sass를 사용하여 컬러코드를 변수로 관리하는 방법은 다음과 같습니다:

   // 컬러코드 변수 정의
   $primary-color: #007bff;
   $secondary-color: #6c757d;
   $text-color: #333;
   
   // 스타일 적용 예시
   .button {
     background-color: $primary-color;
     color: $text-color;
   }

   이렇게 변수로 정의된 컬러코드는 프로젝트 내에서 재사용하거나 테마를 변경할 때 편리하게 관리할 수 있습니다.

2. 테마 관리 라이브러리 사용:
   프론트엔드 프레임워크나 라이브러리에서는 컬러테마 관리를 도와주는 테마 관리 라이브러리를 제공하기도 합니다. 이러한 라이브러리를 사용하면 컬러코드를 중앙에서 효율적으로 관리할 수 있고, 테마를 쉽게 교체하거나 변경할 수 있습니다.

   예를 들어, React용으로는 styled-components와 같은 라이브러리가 있습니다. 이 라이브러리는 컴포넌트 스타일을 정의할 때 JavaScript 템플릿 리터럴 문법을 사용하며, 변수 또는 상수를 이용하여 컬러코드를 관리할 수 있습니다.

   import styled from 'styled-components';
   
   // 컬러코드 변수 정의
   const primaryColor = '#007bff';
   const secondaryColor = '#6c757d';
   const textColor = '#333';
   
   // 스타일 컴포넌트 예시
   const Button = styled.button`
     background-color: ${primaryColor};
     color: ${textColor};
   `;

   이런 방식으로 styled-components 또는 비슷한 라이브러리를 사용하면 컴포넌트 스타일을 컬러테마와 연결하여 관리할 수 있습니다.

어떤 방식을 사용하든, 컬러코드를 관리하는 것은 일관성을 유지하고 유지보수를 쉽게 하기 위해 중요합니다. 선택한 방식은 프로젝트 요구사항과 팀의 개발 스타일에 따라 다를 수 있습니다.

[seondal]

emotion은 JavaScript에서 CSS를 처리하기 위한 라이브러리로, CSS-in-JS(JavaScript로 CSS를 작성하는 방식) 스타일링을 지원합니다. emotion을 사용하면 컴포넌트 단위로 스타일을 작성하고 관리할 수 있으며, 동적으로 스타일을 조작하는 데 유용합니다.

emotion을 사용할 때 주요 기능과 장점은 다음과 같습니다:

1. CSS-in-JS 스타일링: emotion은 JavaScript 코드 내에서 스타일을 작성하고, 스타일이 동적으로 생성됩니다. 이를 통해 컴포넌트와 스타일을 쉽게 관리할 수 있으며, 스타일 충돌 등의 문제를 방지할 수 있습니다.

2. 간편한 스타일 작성: emotion은 템플릿 리터럴 문법을 사용하여 CSS를 작성하므로, 일반 CSS와 유사한 문법으로 스타일을 작성할 수 있습니다.

3. 동적 스타일링: JavaScript 코드에서 조건에 따라 스타일을 동적으로 변경할 수 있습니다. 이는 상태에 따라 다른 스타일을 적용하거나 애니메이션 등을 쉽게 구현할 수 있음을 의미합니다.

4. 성능 최적화: emotion은 스타일을 컴포넌트 단위로 관리하며, 사용하지 않는 스타일은 자동으로 제거됩니다. 이를 통해 불필요한 스타일 로딩을 방지하여 성능을 최적화할 수 있습니다.

5. 서버 사이드 렌더링(SSR) 지원: emotion은 서버 사이드 렌더링 환경에서도 작동하며, React와 같은 프레임워크와 함께 사용할 수 있습니다.

emotion은 React 뿐만 아니라 다른 프레임워크와도 함께 사용할 수 있으며, 일반 JavaScript 프로젝트에서도 활용할 수 있습니다.

emotion 사용 예시:

# npm을 이용하여 설치
npm install @emotion/react @emotion/styled

import { css } from '@emotion/react';
import styled from '@emotion/styled';

// 기본 스타일 정의
const basicStyle = css`
  color: blue;
  font-size: 16px;
`;

// 스타일 컴포넌트 생성
const StyledButton = styled.button`
  ${basicStyle};
  background-color: ${props => props.primary ? 'green' : 'red'};
`;

// 컴포넌트 사용
function MyComponent() {
  return (
    <div>
      <StyledButton primary>Primary Button</StyledButton>
      <StyledButton>Secondary Button</StyledButton>
    </div>
  );
}

위 예시에서 StyledButton 컴포넌트는 css 함수를 사용하여 basicStyle을 포함하고 있으며, primary prop에 따라 동적으로 스타일을 변경합니다.

[seondal]

emotion에서 컬러코드를 관리하는 방법은 JavaScript 변수로 컬러값을 정의하고, 해당 변수를 css 함수 또는 styled 함수 내에서 사용하는 것입니다. 이렇게 하면 컬러코드를 중앙에서 효율적으로 관리하고 재사용할 수 있습니다.

예를 들어, 프로젝트에서 사용되는 기본 컬러를 변수로 정의하고 css 함수를 이용하여 스타일을 적용하는 방법은 다음과 같습니다:

import { css } from '@emotion/react';

// 컬러코드 변수 정의
const primaryColor = '#007bff';
const secondaryColor = '#6c757d';
const textColor = '#333';

// 스타일 정의
const buttonStyle = css`
  background-color: ${primaryColor};
  color: ${textColor};
`;

function MyComponent() {
  return (
    <button css={buttonStyle}>Click Me</button>
  );
}

또는 styled 함수를 사용하여 스타일링하는 경우:

import styled from '@emotion/styled';

// 컬러코드 변수 정의
const primaryColor = '#007bff';
const secondaryColor = '#6c757d';
const textColor = '#333';

// 스타일 컴포넌트 생성
const Button = styled.button`
  background-color: ${primaryColor};
  color: ${textColor};
`;

function MyComponent() {
  return (
    <Button>Click Me</Button>
  );
}

위의 예시에서 primaryColor와 textColor는 JavaScript 변수로 선언되어 있으며, 해당 변수를 css 함수 또는 styled 함수 내에서 ${변수명}과 같은 방식으로 사용하고 있습니다. 이렇게 하면 스타일을 작성할 때 컬러코드를 직접 하드코딩하는 것보다 관리하기 쉽고, 컬러테마를 일관되게 변경할 수 있습니다.

컬러코드 변수를 전역적으로 관리하는 경우, 별도의 파일에 변수를 선언하고 모든 컴포넌트에서 해당 변수를 가져와 사용하는 것이 일반적입니다. 이렇게 하면 컬러테마를 쉽게 변경하거나 유지보수를 용이하게 할 수 있습니다.

[seondal]

emotion과 styled-components는 모두 CSS-in-JS 스타일링 라이브러리이며, JavaScript 코드로 CSS 스타일을 작성하는 방식을 제공합니다. 그러나 두 라이브러리 사이에는 몇 가지 차이점이 있습니다.

1. 문법 차이:

   • emotion: emotion은 CSS를 작성할 때 템플릿 리터럴 문법을 사용합니다. JavaScript 코드 내에서 백틱(``)을 사용하여 스타일을 정의합니다.
   • styled-components: styled-components는 태그 템플릿 리터럴 문법을 사용합니다. 함수와 백틱을 사용하여 스타일을 정의합니다.

2. 설치 방법:

   • emotion: @emotion/react와 @emotion/styled 패키지를 설치하여 사용합니다.
   • styled-components: styled-components 패키지를 설치하여 사용합니다.

3. 스타일 정의 방식:

   • emotion: css 함수를 사용하여 스타일을 정의하고, 해당 스타일을 컴포넌트에 적용합니다.
   • styled-components: styled 함수를 사용하여 스타일 컴포넌트를 생성하고, 해당 컴포넌트를 사용하여 스타일을 적용합니다.

4. 스타일 컴포지션:

   • emotion: 스타일을 함수로 작성하여 컴포지션(조합)을 쉽게 할 수 있습니다.
   • styled-components: 스타일 컴포지션을 쉽게 할 수 있는 문법을 제공합니다.

5. 클래스 이름 생성 방식:

   • emotion: emotion은 런타임에 고유한 클래스 이름을 생성하여 스타일을 적용합니다. 따라서 클래스 이름은 런타임에 동적으로 생성됩니다.
   • styled-components: styled-components는 런타임에 고유한 클래스 이름을 생성하지 않고, 스타일 컴포넌트의 이름을 사용합니다. 따라서 클래스 이름은 개발자가 정의한 스타일 컴포넌트의 이름을 따릅니다.

둘 다 React와 같은 프레임워크와 함께 사용할 수 있으며, 스타일링에 유연성과 간결성을 제공합니다. 라이브러리 선택은 개인의 취향과 프로젝트 요구사항에 따라 달라질 수 있습니다. 어느 쪽이더라도 컴포넌트 단위로 스타일링을 하고, 동적으로 스타일을 변경할 수 있으며, 재사용 가능한 스타일 컴포넌트를 작성하는 데 유용합니다.