React (7) 썸네일형 리스트형 [React] 리액트에서 TailwindCSS 사용하기 1. Tailwind CSS란?Tailwind CSS는 유틸리티 중심의 CSS 프레임워크로, 개발자가 신속하게 사용자 인터페이스를 구축할 수 있도록 돕습니다. 전통적인 CSS 프레임워크와 달리, Tailwind는 사전 정의된 클래스를 제공하여 개발자가 원하는 스타일을 조합할 수 있게 합니다. 이 접근 방식은 코드의 재사용성을 높이고, 스타일링을 일관되게 유지하는 데 유리합니다. Tailwind는 반응형 디자인, 다크 모드, 커스터마이징이 용이하며, JIT(Just-in-Time) 모드를 통해 성능을 최적화할 수 있습니다. 이를 통해 복잡한 UI를 효율적으로 설계하고, 유지 관리하기 쉬운 코드를 작성할 수 있습니다.2. Tailwind CSS 특징유틸리티 클래스: Tailwind는 다양한 유틸리티 클래스를.. [React] Zustand를 사용해서 State 관리하기 03 (1) Zustand 의 기본을 공부하고 싶다면???2024.07.26 - [React] - [React] Zustand를 사용해서 State 관리하기 01 [React] Zustand를 사용해서 State 관리하기 01REACT에서 Store관리하기Zustand 를 사용해서 Store 관리하기1. Zustand란??Zustand는 React 애플리케이션에서 상태 관리를 위한 라이브러리 중 하나로, 단순성과 성능을 중시하며, React 컴포넌트에서 전역 상developer-traxer.tistory.com (2) Zustand 의 기본 활용법2024.07.26 - [React] - [React] Zustand를 사용해서 State 관리하기 02 [React] Zustand를 사용해서 State 관리하기 .. [React] Zustand를 사용해서 State 관리하기 02 Zustand 를 사용해서 Store 관리하기 (1) Zustand 의 기본을 공부하고 싶다면??? 2024.07.26 - [React] - [React] Zustand를 사용해서 State 관리하기 01 [React] Zustand를 사용해서 State 관리하기 01REACT에서 Store관리하기Zustand 를 사용해서 Store 관리하기1. Zustand란??Zustand는 React 애플리케이션에서 상태 관리를 위한 라이브러리 중 하나로, 단순성과 성능을 중시하며, React 컴포넌트에서 전역 상developer-traxer.tistory.com소스 코드 (GitHub) (2) Zustand 활용하기Zustand를 활용해서 간단한 Todo App을 만들어보겠습니다.비동기작업을 위해 Axios라이.. [React] Zustand를 사용해서 State 관리하기 01 REACT에서 Store관리하기Zustand 를 사용해서 Store 관리하기1. Zustand란??Zustand는 React 애플리케이션에서 상태 관리를 위한 라이브러리 중 하나로, 단순성과 성능을 중시하며, React 컴포넌트에서 전역 상태를 쉽게 관리할 수 있도록 도와줍니다. React의 Context API와 함께 사용할 수 있으며, 다른 라이브러리보다 매우 가볍고 간단하다는 특징이 있습니다.특징단순한 API간단하고 직관적인 API를 가지고 있는 Zustand는 상태를 생성, 구독, 업데이트하는 방법이 매우 간단하여 다른 상태 관리 라이브러리에 비해 학습 곡선이 낮습니다.성능 최적화Zustand의 상태 변경은 최소한의 리렌더링을 통해 애플리케이션의 성능을 최적화합니다.사용 편의성Zustand는 Re.. [React] 리액트에서 부트스트랩 사용하기 Introduction1. 부트스트랩이란?부트스트랩(Bootstrap)은 웹 개발에서 자주 사용되는 프론트엔드 프레임워크입니다. 트위터에서 개발된 부트스트랩은 HTML, CSS, JavaScript를 기반으로 하여 반응형 웹 디자인을 쉽게 구현할 수 있도록 도와줍니다. 웹 사이트와 웹 애플리케이션의 UI(사용자 인터페이스)를 빠르고 일관성 있게 개발할 수 있는 도구와 컴포넌트를 제공합니다.2. 리액트에서의 부트스트랩리액트에서는 리액트환경에 맞춘 'react-bootstrap'을 사용합니다. 리액트의 컴포넌트 기반 아키텍처에 맞춰 bootstrap의 기능을 제공합니다.공식문서3. react-bootstrap의 특징모듈식 컴포넌트 : 필요한 컴포넌트만 개별적으로 가져와서 사용할 수 있습니다.커스터마이징 : .. [React] 캘린더 구현 with FullCalendar 라이브러리 캘린더fullCalendar 라이브러리를 이용한 일정 구현캘린더 라이브러리를 설치해줍니다.npm i @fullcalendar/corenpm i @fullcalendar/daygridnpm i @fullcalendar/interactionnpm i @fullcalendar/reactnpm i @fullcalendar/timegrid// 스타일적용을 위한 bootstrapnpm i react-bootstrap그룹 상세 페이지에 캘린더를 띄울 곳을 만들어줍니다.import Calendar from '../components/group/calendar.jsx'; 이제 본격적으로 calendar.jsx 파일을 만들어봅시다.우선 달력, 일정 을 위한 라이브러리와 css파일을 불러와줍니다... [React] Axios 를 이용한 Api 호출 Axios를 이용한 프론트엔드 서버와 백엔드서버 사이의 통신Introduction서버와 데이터를 주고받기 위해 Api통신을 사용하는 방법에 대해 알아봅니다. fetch라는 기본적인 api호출 방식이 있지만, Axios 라이브러리를 통한 api 호출을 하려고 합니다.그렇다면, 왜 Axios를 사용할까??json 형식의 데이터 처리서버 응답을 자동으로 json으로 변환해줍니다.fetch를 사용하면 .json() 메서드를 호출해야 하고, 이 과정에서 에러 처리가 필요합니다.프로미스 기반의 비동기 작업 처리intercepter를 통한 요청 전, 후 관여요청과 응답을 가로채어 처리할 수 있는 인터셉터 기능이 있습니다.이를 통해 공통된 작업처리, 요청과 응답의 전,후처리를 할 수 있습니다.이에 비해, fetch에서.. 이전 1 다음