본문 바로가기

ReactFileStructure/FileDetail

 (3)
링크 추가 파일 코드에서 링크가 있는 줄을 클릭하면 해당 문서 페이지로 이동하도록 설정import React from "react";import { useParams, Link } from "react-router-dom";const FileDetail = ({ files }) => { const { fileName } = useParams(); const file = files.find((f) => f.fileName === fileName); if (!file) { return File not found; } return ( {file.fileName} {file.description} {file.code.map((line, index) => ( ..
코드 하이라이트를 위한 코드 부분 렌더링, 하이라이트 및 링크 추가 import React from "react";import { useParams, Link } from "react-router-dom";const FileDetail = ({ files }) => { const { fileName } = useParams(); const file = files.find((f) => f.fileName === fileName); if (!file) { return File not found; } return ( {file.fileName} {file.description} {file.code.map((line, index) => ( {line.link ? ( ..
code 를 배열로 변환하여 각 줄에 대한 메타데이터를 포함한다. const files = [ { fileName: "App.js", description: "This is the main entry point of the React application.", code: [ { text: 'import React from "react";', highlight: true }, { text: 'import FileViewer from "./FileViewer";', highlight: false }, { text: 'import files from "./FilesData";', highlight: false }, { text: "", highlight: false }, { text: "const App = ()..

티스토리툴바