유미의 기록들

[React -5] ReactDatePicker 라이브러리로 기간 설정 구현

회원관리, 판매내역, 거래내역 등 테이블이 있는 페이지에 기간 설정을 추가하려고 한다 ✅ React-DatePicker 라이브러리 설치 npm install react-datepicker https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com 기본 default는 달력의 요일이 영어로 표시되어 있는데 한글로 표시하려고 한다 ✅ date-fns 설치 npm install date-fns 코드 상단에 사용하고 싶은 언어를 import해준다 import { ko } from "date-fns/esm/locale"; locale={ko} props로 추가해준다 날짜 형식은 ' / ' 형태로 나오는데 '년 월 일'..
MDLAB 기록/관리자페이지 2023. 5. 24. 01:15
[React -3] FullCalendar 라이브러리로 캘린더 구현

DashBoard 페이지에서 캘린더로 월별 판매건수, 매출액을 한 눈에 볼 수 있도록 구현하겠다 ✅ FullCalendar 라이브러리 설치 npm install @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction @fullcalendar/react https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullc..
MDLAB 기록/관리자페이지 2023. 5. 21. 18:21
[React -2] 폴더 구조

본격적으로 프로젝트를 시작하기 전, 대략적인 디자인 시안을 만들어보았다 총 카테고리는 대시보드, 회원관리, 거래내역, 판매내역, 마케팅관리(보류)로 구성하였다 먼저 src에 총 4개의 폴더를 생성하였다 - components 각 페이지의 Body를 구성하는 코드 - pages 각 페이지를 전체를 구성하는 코드 - styles 스타일css 코드 - templates 전체 템플릿 스타일을 구성하는 코드 App.js import {BrowserRouter,Route, Routes} from "react-router-dom"; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import LoginPage from "./pages/login_..
MDLAB 기록/관리자페이지 2023. 5. 17. 22:09
[React -1] 개발 환경 구축

React Native로 앱개발은 거의 마무리를 짓고 관리자페이지를 만들기 위해 React를 해보려고 한다 1. Node.js설치 Node.js란 - 기존 javascipt는 웹 브라우저에서만 사용이 가능하였지만 운영체제상에서 일반 애플리케이션 프로그램처럼 실행시켜주기 위한 런타임 - 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능함 - npm 도 같이 설치가 된다 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * 안정적인 버전으로 다운 받는 것이 좋다 * cmd에서 node -v 명..
MDLAB 기록/관리자페이지 2023. 5. 17. 12:31
이전 Prev 1 Next 다음