atomicdev 님의 블로그

Tailwind CSS 개요 및 설치내용:Tailwind CSS 소개: Tailwind CSS는 Utility-First CSS 프레임워크로, 미리 정의된 유틸리티 클래스를 사용하여 빠르고 효율적으로 스타일을 작성할 수 있습니다. Tailwind는 모든 스타일을 클래스명으로 제공하며, 스타일링을 위한 별도의 CSS 파일을 작성할 필요 없이 HTML이나 JSX 파일에서 바로 클래스명을 적용할 수 있습니다.Tailwind CSS와 전통적인 CSS 방식의 차이점:전통적인 CSS 방식: 클래스를 정의하고 해당 클래스에 스타일을 적용한 후, HTML 요소에 클래스를 연결하는 방식입니다.Tailwind CSS 방식: HTML 요소에 미리 정의된 유틸리티 클래스를 바로 사용하여 스타일을 지정하는 방식입니다. 예를 들..

보일러플레이트 개념과 사용방법(feat. React) React 개발에서 **보일러플레이트(boilerplate)**는 기본적으로 프로젝트를 시작할 때 필요한 필수 구조, 파일 및 설정이 미리 구성된 템플릿을 말합니다. 이를 통해 개발자는 반복적인 초기 설정 과정을 건너뛰고, 바로 핵심 기능 개발에 집중할 수 있습니다.React 보일러플레이트의 주요 요소:프로젝트 구조: 잘 정리된 폴더와 파일 구조(예: src, public, components 폴더).패키지 관리: react, react-dom과 같은 자주 사용하는 라이브러리가 미리 설치된 상태.빌드 도구: Webpack이나 Parcel과 같은 도구를 사용해 JavaScript 파일, 자산 등을 번들링하고 프로덕션을 위해 최적화.Babel: 최신 Ja..

Storybook 사용하는 방법개요:Storybook은 React 컴포넌트 개발을 위한 독립적인 개발 환경을 제공하는 도구입니다. UI 컴포넌트를 다양한 상태에서 테스트하고, 문서화하며, 개발과 디자인 협업을 효율적으로 진행할 수 있게 해줍니다. 이번 블로그에서는 Storybook을 React 프로젝트에 설정하고 사용하는 방법을 실습과 함께 설명합니다.1. Storybook이란?Storybook은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 오픈 소스 도구입니다.주요 기능:컴포넌트 개발 속도 향상.다양한 상태에서 UI 컴포넌트 테스트.디자인과 개발 간의 효율적인 협업.UI 컴포넌트를 문서화.2. Storybook 설치 및 설정2.1. React 프로젝트에 Storybook 설치Storybook을..