코드 설명을 위해 코드 내 하이라이트 추가
2024.11.29 - [dev_AI_framework] - 포트폴리오, 리액트 화면 구성 방안
포트폴리오, 리액트 화면 구성 방안
코드와 해당 코드의 하이라이트, 클릭 시 해당 설명 페이지로 이동하도록llm 을 추가로 활용할 수 있는 방안으로 기존에 내가 제공하는 코드에 대한 설명 외에 추가로 llm 에서 내 준 코드의 해석
teach-meaning.tistory.com
각 화면에 해당하는 설명들을 구성해야 해... 동적 방식이 아닌 정적 방식으로 구현하자 - 파일
string 형식으로 단순히 저장되어 있는 코드들, 이를 동적으로 관리할 수 있는 방법이 있을까? 그런데 이 또한 문제로 하이라이트에 해당하는 부분의 지정 문제가 발생함...이를 동적으로 구현하
teach-meaning.tistory.com
2024.11.29 - [ReactFileStructure/FileDetail] - code 를 배열로 변환하여 각 줄에 대한 메타데이터를 포함한다.
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: 'imp
teach-meaning.tistory.com
2024.11.29 - [ReactFileStructure/FileDetail] - 코드 하이라이트를 위한 코드 부분 렌더링, 하이라이트 및 링크 추가
코드 하이라이트를 위한 코드 부분 렌더링, 하이라이트 및 링크 추가
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
teach-meaning.tistory.com
위 방법을 통해 각 코드 부분에 하이라이트 또는 링크를 추가했음,
code 를 단순 문자열이 아닌 구조화된 배열로 관리하는 방법으로 구현, 배열의 각 요소는 코드의 특정 줄과 해당 줄에 대한 하이라이트 여부 또는 링크 정보를 포함할 수 있다.