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

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

Vues 란? Global State를 관리하기 위한 Library입니다. State는 Data로 변환될 수 있으며 일종의 반응형 데이터로도 볼 수 있습니다. 변경될 수 있으며 무언가를 트리거하는 데이터죠. 하지만 앱의 다양한 컴포넌트에 영향을 주는 데이터인 상태를 관리하는 건 어렵습니다. 그래서 우선 상태를 Global State/LocalState 로 먼저 구분해줍니다. Local State Local State는 하나의 컴포넌트 내부에서 관리도는 데이터이자 상태입니다. 해당 컴포넌트와 프로퍼티를 통해 간적접으로 하위 컴포넌트도 영향을 줍니다. 사용자의 입력값, 어떠한 컨테이너 표시, 숨기는 버튼 등의 예로 활용됩니다. Global State Global State는 여러 컴포넌트 & 앱 전체에 걸쳐..