[FE_Roadmap] writing css & testing your apps

writing css

Tailwind CSS란 무엇인가?

• Utility-First를 지향하는 CSS 프레임워크입니다.
  • Utility-First: 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링
• CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 사용할 수 있게 됩니다.
• 스타일링에 필요한 대부분의 속성들이 클래스 형태로 사전에 정의되어 있고 사용자는 클래스들을 조합해서 사용하면 됩니다.
• SSR에 대해 추가 설정이 필요하지 않습니다.

Tailwind CSS의 장점

1. Utility-First의 편리함과 빠른 개발

<button class="py-2 px-4 rounded-lg shadow-md text-white bg-blue-500">
  Click me
</button>

• 스타일 코드도 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없습니다.
• 태그의 클래스명을 고민할 필요가 없습니다.
  • BEM, OOCSS 등의 방법론이 나올 정도로 클래스명 짓는 일은 까다롭습니다. 이런 고민들이 필요없고 styled-components들의 컴포넌트 이름을 짓는 고민도 필요없습니다.

2. 쉽고 자유로운 커스텀 Tailwind CSS는 다른 프레임워크들에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀이 가능합니다. 커스텀을 할 때 기본 스타일 값을 수정하는 방식이기에 디자인 일관성도 해치지 않습니다. 덕분에 디자인 시스템이나 다크 모드 구현도 간편합니다.

const fontSize = {
  10: ["10px", { lineHeight: "1.25" }],
  12: ["12px", { lineHeight: "1.5" }],
  14: ["14px", { lineHeight: "1.43" }],
} as const

 

3. Styled Components와 호환 가능

• Tailwind와 Styled Components를 함께 사용하기 위해선 Tailwind, Twin.macro를 각각 설정해야합니다.

Tailwind CSS의 단점

1. 클래스명 러닝 커브

• 각 스타일의 클래스명을 익히는데 다소 시간이 소요됩니다. 따라서 지속적으로 찾아보면서 익숙해지는 수밖에 없습니다..
• 그래도 대부분의 클래스명이 기존 CSS 속성이나 속성값과 비슷한 경우가 많고 자동완성을 지원하는 Intelli Sense 플러그인이 있어서 금방 익숙해집니다.

2. JavaScript 코드 사용 불가

• 클래스명을 분기 처리하여 동적으로 스타일링을 설정할 수는 있지만 styled-components와 같이 JavaScript 변수 값에 따라 가로 길이를 설정하는 등의 구현은 가능하기는 하지만 무척 번거로운 설정이 필요합니다.
• 아래와 같은 방법으로 동적 스타일링을 사용할 수 있습니다.

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

 

3. HTML와 CSS 코드 혼재

• HTML와 CSS의 관심사가 분리되지 않아서 코드가 길어지고 가독성이 떨어집니다.

 

testing your apps

개발에서 테스트 프레임워크를 활용하여 테스트 코드를 작성해야하는 이유는 다음과 같습니다.

• 코드 품질 향상: 테스트 코드는 소프트웨어의 품질을 향상시키는데 중요한 역할을 합니다. 테스트 코드를 작성함으로써 코드의 신뢰성을 높이고 버그를 미리 발견할 수 있습니다. 이로 인해 사용자에게 더 안정적인 애플리케이션을 제공할 수 있습니다.
• 버그 식별: 테스트 코드를 사용하면 코드 변경이나 리팩토링 후에도 기존 기능이 올바르게 작동하는지 확인할 수 있습니다. 새로운 기능을 추가할 때 기존 기능에 영향을 미치는 버그를 식별하고 예방할 수 있습니다.
• 유지보수 용이성: 테스트 코드를 작성하면 코드를 이해하고 수정하는 데 도움이 됩니다. 새로운 개발자가 프로젝트에 참여하거나 팀 내 다른 개발자가 코드를 유지보수해야 할 때, 테스트 코드를 통해 코드의 의도를 파악하기 쉬워집니다.
• 자동화된 테스트 수행: 테스트 프레임워크를 사용하면 테스트를 자동화하여 반복적인 테스트 작업을 자동으로 수행할 수 있습니다. 이렇게 하면 효율성이 향상되며, 수동으로 테스트를 수행할 필요가 없어집니다.
• 리팩토링 지원: 코드를 개선하고 개선하기 쉽게 만듭니다. 테스트 코드가 있는 경우 리팩토링을 수행하더라도 코드가 여전히 예상대로 작동하는지 확인할 수 있습니다.
• 팀 협업과 품질 통제: 여러 개발자가 협업하는 프로젝트에서 테스트 코드는 코드 변경 사항이 다른 부분에 미치는 영향을 검증하는데 도움이 됩니다. 이로 인해 팀 내에서 품질을 일관되게 유지할 수 있습니다.
• CI/CD 통합: 지속적 통합 (Continuous Integration, CI) 및 지속적 배포 (Continuous Deployment, CD) 파이프라인에서 테스트 코드는 자동화된 빌드 및 배포 과정 중에 애플리케이션의 안정성을 보장하는 데 중요한 역할을 합니다.
• 비용 절감: 테스트 코드를 작성하고 유지 관리하면 애플리케이션에 버그가 발생하는 확률이 감소하므로, 버그를 해결하는 비용이나 사용자에게 서비스 중단을 제공하는 비용을 줄일 수 있습니다.

요약하면, 테스트 프레임워크를 사용하여 테스트 코드를 작성하는 것은 소프트웨어 개발 프로세스를 개선하고 효율성을 높이며, 안정적이고 신뢰성 있는 애플리케이션을 개발하는 데 필수적입니다.

Jest

• Jest는 JavaScript용 테스트 프레임워크입니다. Vue, Angular, React, Node 등 널리 사용되는 대부분의 JavaScript 프레임워크를 지원합니다.
• Jest는 또 다른 JavaScript 테스트 프레임워크인 Jasmine을 기반으로 구축되었습니다. 그러나 Jest는 mocking 대한 기본 지원과 같이 Jasmine에 없는 일부 기능을 제공합니다.
• Jest는 테스트 범위 내에 존재하지 않는 객체에 대해 시뮬레이션 테스트를 실행할 수 있는 모의 지원이 내장되어 있습니다.
• Jest는 또한 서로 다른 두 테스트의 출력을 비교하려는 경우에 유용한 스냅샷 기능을 제공하며, 병렬 테스트를 지원 하므로 일련의 테스트를 완료하는 데 걸리는 시간을 획기적으로 줄일 수 있습니다.
• Jest를 사용하면 최소한의 설정이나 구성으로 테스트를 실행할 수 있습니다.

Jest의 장점

• 단순성 : Jest는 표준 JavaScript 코드에 대한 구성이 필요 없이 작동하도록 설계되었습니다. 즉, 대부분의 코드베이스에 대해 아주 약간의 설정만으로 테스트 실행을 시작할 수 있습니다.
• 광범위한 프레임워크 지원 : 위에서 언급했듯이 Jest는 거의 모든 인기 있는 JavaScript 개발 프레임워크와 작동합니다. JavaScript 코드를 어떻게 작성하든 Jest가 테스트를 위해 이를 지원할 가능성이 있습니다.
• 강력한 문서화 및 지원 : 2011년부터 존재해 왔으며 대부분의 역사 동안 Meta에서 적극적으로 지원해 온 테스트 프레임워크로서 Jest는 많은 추종자를 얻었습니다. 고품질 문서를 ​​제공하며 Jest 작업에 대한 커뮤니티 지원을 쉽게 찾을 수 있습니다.
• 간단히 말해서, 쉬운 모킹 구현과 같은 일부 고급 기능에 대한 액세스도 제공하는 간단한 JavaScript 테스트 프레임워크를 찾고 있다면 Jest가 좋은 솔루션입니다.

Vitest

• Vitest는 JavaScript 단위 테스트 프레임워크입니다. 이는 JavaScript 기반 웹 애플리케이션을 관리하고 구축하는 데 도움이 되는 도구인 Vite를 보완하기 위해 만들어졌습니다.
• Vitest를 사용하여 Vite를 통해 관리하는 코드를 테스트하는 경우 Vitest와 Vite 간의 긴밀한 통합 덕분에 대부분의 테스트 설정이 자동으로 수행됩니다.
• Vitest는 대부분의 Jest API 와 호환됩니다 . 즉, Jest용으로 개발된 대부분의 테스트는 Vitest를 사용하여 실행할 수도 있으며 변경이 거의 필요하지 않습니다.

Vitest의 장점

• Vitest는 최신 테스트 프레임워크에서 기대할 수 있는 거의 모든 기능을 제공한다는 점에서 Jest와 유사합니다. 그러나 주요 특징은 속도와 (Vite와 함께 사용되는 경우) 단순성입니다.
• 테스트 프레임워크로서 Vitest의 가장 중요한 기능은 속도에 중점을 둔 것입니다.
  • 일부 Vitest 테스트는 Jest를 사용한 테스트보다 4배 이상 빠르게 실행된 것으로 나타났습니다.
• Vitest의 또 다른 장점은 Vite와의 긴밀한 통합으로 간단한 테스트 설정 및 관리 경험이 가능하다는 것입니다. Vite를 통해 애플리케이션 코드를 관리하는 경우 테스트를 생성할 때 이미 개발한 대부분의 구성, 플러그인 및 기타 요소를 재사용할 수 있습니다.

Jest vs Vitest

속도

• Jest 테스트가 Vite 테스트보다 빠르게 실행되는 상황이 있을 수 있지만, 어떤 프레임워크가 더 빠른 테스트 결과를 가져올지 결정해야 한다면 Vitest가 훨씬 더 안전한 옵션이 될 것입니다.
• 그러나 Jest에 비해 Vitest의 속도 이점이 실제로 중요한 고려 사항인지 여부는 실행 중인 테스트 수와 실행 위치에 따라 다릅니다.

모듈 관리

• Jest와 Vitest의 차이점 중 하나는 기본적으로 지원하는 모듈 관리 시스템입니다.
• Jest는 CommonJS와 함께 작동하도록 설계되었습니다. Vitest는 JavaScript 모듈 작업에 대한 보다 현대적인 접근 방식인 ECMAScript 모듈(ESM)과 호환되도록 설계되었습니다.

Vitest가 적절한 사용 사례

• Vite로 개발된 프로젝트
• 광범위한 테스트가 필요하거나 테스트 속도가 중요한 프로젝트

Jest가 적절한 사용 사례

• 개발자가 특정 빌드 도구(즉, Vite)에 얽매이거나 사용하도록 권장하기를 원하지 않는 JavaScript 프로젝트
• 테스트 속도가 우선순위가 낮은 프로젝트
• 광범위한 문서 및 커뮤니티 지원에 대한 액세스가 중요한 프로젝트