atomicdev 님의 블로그

React FSD 1회차2회차: FSD의 Layer와 Slice 구성목표FSD의 Layer와 Slice를 구성하고, 각 레이어의 역할을 이해합니다.FSD의 Layer 구성FSD는 각 레이어를 통해 프로젝트를 구조화하며, 각 레이어는 서로 명확한 역할과 책임을 가집니다. 상위 레이어는 하위 레이어에 의존할 수 있지만, 하위 레이어는 상위 레이어에 의존하지 않는 방식으로 설계됩니다.주요 레이어 설명app: 애플리케이션의 진입점으로, 전역 설정이나 초기화 코드가 위치합니다.processes: 페이지나 여러 컴포넌트에서 공통으로 사용하는 비즈니스 로직을 포함하는 레이어입니다.pages: 페이지 단위로 구성된 컴포넌트들이 위치하는 레이어입니다.widgets: 헤더, 풋터 등 재사용이 가능한 UI 컴포넌트를 포함하..

React 프로젝트 생성 및 Tailwind CSS 설정강의 목표React로 프론트엔드 프로젝트를 시작하면서 Tailwind CSS를 사용하여 기본적인 스타일링을 설정합니다. Tailwind CSS의 유틸리티 클래스를 활용해 간편하고 빠르게 UI 스타일링을 적용하는 법을 배웁니다.1. Create React App으로 프론트엔드 프로젝트 생성React 프로젝트 생성guestbook-app이라는 이름으로 프로젝트를 생성합니다.npx create-react-app guestbook-app cd guestbook-app프로젝트 파일을 확인합니다.기본적으로 제공되는 src, public 등의 폴더 구조를 확인합니다.App.js, index.js 파일이 주요 시작점입니다. 2. Tailwind CSS 설치 및 기..

Tailwind CSS 강좌 목차Tailwind CSS를 사용하여 React 개발 프로젝트를 진행할 때 프론트엔드 개발자가 알아야 할 강좌 입니다. 실습 중심으로 Tailwind CSS의 기본 개념부터 고급 활용법까지 다루며, 각 단계마다 React 프로젝트에 직접 적용해볼 수 있도록 진행했습니다. 1. Tailwind CSS 개요 및 설치내용:Tailwind CSS 소개: Utility-First CSS 프레임워크의 개념Tailwind CSS와 전통적인 CSS 방식의 차이점프로젝트에서 Tailwind CSS 설치 및 설정실습:Create React App으로 React 프로젝트 생성Tailwind CSS 설치 및 PostCSS 설정Tailwind CSS 초기 설정 파일 생성 및 구성기본적인 스타일 적용..