1. Mui Chart 설치 및 데이터 불러오기리액트 터미널 환경에서 아래 커맨드로 Mui Chart 설치■ npm install @mui/x-charts ■ axios 로 데이터 비동기로 가져오기리액트 터미널 환경에서 아래 커맨드로 axios 설치■ npm install axios 1.1 axios 와 async await 키워드를 통하여 데이터를 비동기적으로 가져오는 get 메서드 정의 # CrimeBranchContext.tsexport async function get_average_subject_data() { const response = await axios.get( crime_branch_default_url + "average_subject?category=average..
Programming/react
1. FastApi Cors 설정■ Main.py Cors 에 필요한 라이브러리 임포트하기from fastapi.middleware.cors import CORSMiddleware ■ origin 배열에 url 추가하기#cors urlorigins = [ CORSMiddleware, "http://localhost", "http://localhost:5173",] ■ Cors Config setting 하기#cors settingsapp.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"],) ■ 총 코..
■ 개인 작업물용 갤러리페이지에 아이템들을 표현하기 위해 컴포넌트 및 슬라이드 적용 ■ 데이터 표현을 위한 interface 및 class , Mock Data 만들기 1. Models 폴더에 IVewModel 파일 새로 만들고 interface 정의해주기 ■ 파일 : IViewModel.ts export interface IViewModel { title : string; imagePath : string | undefined; } 1. IViewModel 을 상속받는 View 클래스 만들기 export class View implements IViewModel { //멤버변수 title : string imagePath : string | undefined //생성자 constructor(title:..
■ MUI 란 ? • 프로토타이핑과 제품개발에 가장 많이 활용되는 인터랙티브 컴포넌트 기반의 React Ui 라이브러리 ■ 리액트 프로젝트에 MUI 설치하기 • 리액트 프로젝트 내에 터미널 환경에서 아래 커맨드를 순차적으로 입력해준다. // MUI 리액트 패키지 설치 npm install @mui/material @emotion/react @emotion/styled // 스타일 컴포넌트 설치 % npm install styled-components // MUI 아이콘 패키지 설치 % npm install @mui/icons-material ■ MUI Docs 페이지에서 상단바 코드 가져오기 - 아래는 MUI Appbar 링크 - 필자는 " Responsive App bar with Drawer " 적용..
1. create vite 를 통한 패키지 관리자 실행■ 명령어//@latest 를 통해 가장 최신의 vite 패키지 실행npm create vite@latest■ 프로젝트 이름 설정 및 react 항목 선택■ 타입 스크립트 선택 및 프로젝트 visual studio code 로 열기아래 SWC 는 ruby 기반의 자바스크립트 컴파일러 임으로 굳이 선택 필요 X맥북 기준 만들어진 폴더로 이동 및 아래 명령어를 입력하여 visual studio code 실행// 점 띄어쓰기 주의codo .2. 리액트 프로젝트 기본세팅■ code . 으로 연 react 환경에서 패키지 설정npm i 명령어를 통한 패키지 initialize■ 필요없는 컴포넌트 및 파일 정리public, assets 폴더의 svg 이미지 ..
