![React - Markdown & Code Block & Block Quote 적용](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FursSx%2FbtsEP3iLPM8%2FeU9MdKEqO50QsgNuXN3IhK%2Fimg.png)
📘 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](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLhQ9w%2Fbtssih7Mfu1%2FLVdEcIl1zLqu95NHnZWzQK%2Fimg.png)
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 # 프로젝트 ..