React with TypeScript React 핵심만 정리합니다. (TypeScript 기반) My Github Repository Project 생성 & 세팅 Browser-Based Setup(CodeSandbox&Similar) 방식은 제외하고 Local Setup 방식으로 프로젝트를 만들어 보겠습니다. NodeJS를 설치하고 아래 두 방식 중 하나를 선택해 React App을 만듭니다. Create-React-App 방식 # 프로젝트 생성 npm i -g typescript npx create-react-app [프로젝트 이름] # 프로젝트 실행 npm start Vite 방식 # 프로젝트 생성 npm i -g vite typescript npm create vite@latest # 프로젝트 ..

Vue - Chart.js를 이용한 반응형 데이터 시각화 내 Github 저장소 링크 프론트엔드 연습용으로 간단하게 더미 데이터를 만들어 테스트 해보려고 만든 저장소입니다. 프론트엔드를 다루는게 처음이라 혹시 틀린점이나 프론트엔드 고수형님 계시면 피드백 부탁드립니다..😭 사용 기술 스택 Backend Spring Batch (아직 사용 안함) Spring Data JPA Maria DB QueryDSL (아직 사용 안함) MQTT, RTSP, HLS, FFmpeg (아직 사용 안함) Akka Actor (Scala) Kakao Map API (아직 사용 안함) Frontend Vue 3 Composition API, BootStrap, Vite Axios, Chart.js, Vue-Chart-3, ESL..

불린: Boolean 단순한 참(true)/거짓(false) 값을 나타냅니다. let isBoolean: boolean; let isDone: boolean = false; 숫자: Number 모든 부동 소수점 값을 사용할 수 있습니다. ES6에 도입된 2진수 및 8진수 리터럴도 지원합니다. let num: number; let integer: number = 6; let float: number = 3.14; let hex: number = 0xf00d; // 61453 let binary: number = 0b1010; // 10 let octal: number = 0o744; // 484 let infinity: number = Infinity; let nan: number = NaN; 문자열: S..

Vue 로컬 테스트 시 Cors Proxy 우회 Vue를 사용한 프론트엔드 서버에서 백엔드 서버의 Parsing된 Json 데이터를 받아오는 연습을 하던 도중 CORS 에러를 만났습니다. 코드는 이렇게 작성했습니다. 복잡하게 테스트할 필요 없이 단순히 v-for를 이용해 들어오는 데이터를 Reactive 변수에 넣어 Loop를 돌리고, 컴포넌트가 마운트 될 때 데이터를 출력하게만 해두었습니다. 데이터 가져오기 연습 Event ID: {{ item.id }} Frame ID: {{ item.frameId }} Extra Information Bbox Height : {{ item.extra.bbox.height }} Bbox Width : {{ item.extra.bbox.width }} Vertices ..

Actions을 이용한 비동기 코드 실행 Vuex에서 제공하는 핵심 기능중 하나가 코드의 비동기 실행 기능입니다. 이때, Mutation의 문제는 항상 동기 방식이며, 비동기 방식은 허용되지 않습니다. 따라서 Mutation이 실행 되면, 중단없이 단계별로 실행되면서 상태는 즉시 바뀌어야 합니다. 이유는 모든 Mutation이 최신 State를 받아야만 하기 때문에 이러한 방식이 강제됩니다. 이럴떄 Actions을 사용합니다. 동작 방식은 컴포넌트에서 Actions를 트리거하고 이 트리거된 Actions는 Mutation을 Commit 합니다. Actions는 비동기 방식을 지원하기 때문에 컴포넌트와 Mutation 사이에 넣는 것은 일반적으로 좋은 사용 방식입니다. 컴포넌트에서 직접 Mutation을 ..