My React Blog - HYEHYE
이 프로젝트는 개인 블로그를 개발하기 위한 학습 목적으로 시작되었습니다.
React를 이용한 컴포넌트 기반 개발 방식과 Tailwind CSS를 사용한 유연한 스타일링을 익히기 위해 제작되었습니다.
Github 디자인을 참고하여 UI를 구현했습니다.
환경
- Node.js v20.17.0+
- Yarn v4.3.1+
- vite v5.3.1+
기술
- React: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.
- React Router: 싱글 페이지 애플리케이션(SPA)에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리입니다. URL에 따라 페이지를 동적으로 전환할 수 있어 사용자가 앱 내에서 다른 페이지로 이동할 수 있도록 합니다.
- JavaScript: 이 프로젝트의 주된 프로그래밍 언어로, 모든 로직과 UI 동작을 구현하는 데 사용됩니다.
- Tailwind CSS: 유틸리티 기반의 CSS 프레임워크로, 간단한 클래스 이름을 사용해 신속하게 스타일을 적용하고 반응형 디자인을 쉽게 구현할 수 있습니다.
- Zustand: React 애플리케이션에서 전역 상태를 관리하기 위한 경량 상태 관리 라이브러리입니다.
- Axios: HTTP 클라이언트로, API 요청을 간편하게 처리할 수 있습니다.
- MSW(Mock Service Worker): API 요청을 목킹하여 외부 API 와의 상호작용을 시뮬레이션할 수 있게 해주는 도구입니다. 이 도구를 통해 테스트 환경에서 실제 서버 없이도 API 요청을 시뮬레이션 할 수 있습니다.
- FullCalendar: 이벤트나 스케줄 관리를 위한 강력한 캘린더 라이브러리입니다. 이 프로젝트에서는 사용자 인터페이스 내에서 일정 관리 기능을 제공하기 위해 사용됩니다.
- Framer Motion: 애니메이션을 쉽게 구현할 수 있는 모션 라이브러리입니다.
- React Helmet: HTML 문서의
<head> 태그를 관리하기 위한 도구입니다. 이 프로젝트에서는 페이지별로 동적으로 제목, 메타 태그 등을 설정하는 데 사용되었습니다.
- LocalForage: 브라우저 내의 스토리지를 추상화하여 비동기적으로 데이터를 저장할 수 있게 해주는 라이브러리입니다.
- React Hook Form: 폼 데이터를 쉽게 관리할 수 있게 해주는 라이브러리입니다. 최소한의 리렌더링으로 성능을 최적화하며, 사용자 입력 검증 및 상태 관리 기능을 제공합니다.
- React Icons: 다양한 아이콘을 React 컴포넌트로 쉽게 사용하게 해주는 라이브러리입니다.
- SWR: React 를 위한 데이터 가져오기 라이브러리로, API 데이터를 캐싱하고 자동으로 갱신해주는 기능을 제공합니다.
- Custom Hooks: React 에서 재사용 가능한 로직을 쉽게 관리하기 위한 커스텀 훅입니다.
- Storybook: UI 컴포넌트를 개발하고 문서화하기 위한 도구입니다.
실행 방법
-
레파지토리 클론
git clone <repository-url>
cd <project-directory>
-
의존성 설치
yarn install
# or
yarn
-
개발 서버 시작
yarn dev
-
개발 빌드
yarn build
향후 계획
- TechStack 예쁘장하게 꾸미기
- 주간, 일별 캘린더: calendar 주간, 일별 캘린더 기능 추가