React - Markdown & Code Block & Block Quote 적용
📘 Frontend/React2024. 2. 14. 09:43React - Markdown & Code Block & Block Quote 적용

📘 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
📘 Frontend/React2023. 8. 27. 12:12React 핵심 정리 with TypeScript

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 # 프로젝트 ..

image