react9 [React]달력을 이용해 날짜 범위 정보얻기2 (react-date-range) DateRange 달력에서 날짜의 범위를 설정하고, 설정한 날짜의 정보를 받아와 캘린더 바로 아래에 출력해본다. react-date-range 사용을 위해서는 아래 게시물을 참고하여 패키지 설정을 완료해준다. [React]달력을 이용해 날짜 범위 정보얻기1 (react-date-range) 날짜 및 날짜 범위를 선택하기 위한 React 패키지로 날짜 작업에 date-fns 모듈을 사용한다. react-date-range에서 지원하는 Components Example은 다음과 같다. Exmaple 1 : 2개의 달력을 표시 Exmaple 2 : 다.. doqtqu.tistory.com ★ 프로젝트 구조 src ㄴ component ㄴ Calender.js ㄴ App.js Calender.js import .. 2020. 11. 25. [React]달력을 이용해 날짜 범위 정보얻기1 (react-date-range) 날짜 및 날짜 범위를 선택하기 위한 React 패키지로 날짜 작업에 date-fns 모듈을 사용한다. react-date-range에서 지원하는 Components Example은 다음과 같다. Exmaple 1 : 2개의 달력을 표시 Exmaple 2 : 다중 범위(2개) Exmaple 3 : 다중 범위(3개 이상) Exmaple 4 : 날짜 입력 수정이 가능한 달력 Exmaple 5 : 기본 달력 더 자세한 예시는 링크 참고 react-date-range를 사용하는 이유 - 상태 비 저장 날짜 작업 - 고도로 구성 가능 - 다중 범위 선택 - 기본 js date 기반 - 드래그 앤 드롭 선택 - 날짜 입력을 통한 범위 설정 가능 react-date-rang 사용하기 아래의 명령어를 이용하여 react.. 2020. 11. 24. [React] React 프로젝트 GitHub Pages로 배포하기 React 프로젝트 생성 React를 이용해서 개발하는 방법에는 여러가지가 있다.프로젝트 구성을 직접해도 되지만, React에서 추천하는 Create React App 툴체인이 있다. Create React App은 React를 배우기 간편한 환경으로 싱글 페이지 애플리케이션 앱을 만들기 적합하다.이것은 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해준다.Create React App을 사용하기 위해서는 Node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다. 새로운 프로젝트를 만들기 위해서 아래의 명령어를 실행한다.(npx : npm 5.2+ 버전의 패키지 실행 도구) npx create-react-app test-a.. 2020. 11. 19. 이전 1 2 다음 반응형
