본문 바로가기

FrontEnd94

[Django] Django 이용해 Web 개발하기 2 - Django App Django App이란 Django App은 Django에서 사용하는 "파이썬 패키지"이다. Django App 패키지는 그 안에 자신의 모델(model), 뷰(view), 템플릿(template), URL 매핑 등을 독자적으로 가지고 있으며, 일반적으로 하나의 Django 프로젝트는 하나 이상의 Django App으로 구성되어 있다. 규모가 큰 Django 프로젝트는 보통 여러 개의 Django App들을 모듈화하여 구성하는데, 모듈화된 App들로 구성하면 개발 및 유지 보수가 효율적이기 때문이다. 또한 잘 모듈화된 App은 여러 웹 프로젝트에서 쉽게 재사용할 수도 있다. Django Project 만들기 django-admin startproject locallibrary cd locallibrary.. 2021. 1. 31.
[Django] Django 이용해 Web 개발하기1 Django란 보안이 우수하고 유지보수가 편리한 웹사이트를 신속하게 개발하도록 도움을 주는 파이썬 우베 프레임워크이다. Django 구조 "모델 뷰 템플릿(Model View Template)(MVT)" 아키텍처 전형적인 데이터 기반 웹 사이트에서의 웹 어플리케이션은 웹 브라우저(또는 다른 클라이언트)로부터 HTTP Request를 기다린다. Request를 받으면, 웹 어플리케이션은 URL과 POST 데이터 또는 GET 데이터의 정보에 기반해 요구사항을 알아낸다. 그 다음 필요한 작업에 따라, 데이터베이스로부터 정보를 읽거나 쓰는 것과 같은 여러가지 백엔드 작업들을 수행한다. 백엔드 작업이 끝나면, 웹 어플리케이션은 웹 브라우저에 Response를 반환하는데, 주로 동적인 HTML 페이지를 생성하여 응.. 2021. 1. 30.
[React.js] Leaflet으로 지도 그리기 React.js에서 Leaflet을 이용해 지도를 불러올 수 있다. Leaflet은 Interactive한 Map 지원을 위한 Javascript 오픈소스 라이브러리로 지도 위 마커나, 벡터를 그리는 등 다양한 api를 지원한다. 먼저 Leaflet 사용 전에 React App을 생성해준 후 App의 내부에서, 아래의 명령어로 React, React DOM, Leaflet 패키지을 설치해준다. npm install react react-dom leaflet 설치가 완료되면 react-leaflet 설치가 가능하므로, react-leaflet을 설치해준다. npm install react-leaflet 프로젝트 구조는 아래와 같으며, Map을 모듈화해서 사용할 것이므로 Project/src/module에 .. 2021. 1. 10.
[React]Chart 그리기(Recharts) React에서 차트를 그리기 위해서 Recharts라는 패키지를 사용한다. 검색해보면 다양한 차트 그리기 패키지가 있는데 그중 Recharts가 사용하기 난이도도 적당하고, UI가 마음에 들어서 사용해보기로 정했다. recharts/recharts Redefined chart library built with React and D3. Contribute to recharts/recharts development by creating an account on GitHub. github.com Installation 우선 React App Project로 가서 recharts 패키지를 설치한다. npm install recharts How To Use ★ 프로젝트 구조 src component Chart.j.. 2020. 11. 26.
[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.
반응형

티스토리툴바