📘 React Markdown 학습 기록 사이트를 만들면서 내가 공부한 글(마크다운)을 마크다운으로 보이게 하고 싶고, 글을 쓸때도 마크다운으로 입력해서 글을 등록하고 싶어 알아 보았습니다. 사용한 라이브러리는 다음과 같습니다. react-markdown react-syntax-highlighter (코드 블럭) rehype-raw (HTML 파싱) rehype-sanitize (XSS 방지) remark-gfm (마크다운 확장 기능) 📘 Code Component, BlockQuote, Code Highlighter 이 코드에서는 마크다운 텍스트의 스타일과 BlockQuote, 코드블럭을 정의합니다. 맨 처음 styled-component를 이용한 스타일링은 개인적으로 원하는 스타일로 바꾸고 싶어 커스..

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 ..