본문 바로가기

ReactFileStructure

 (42)
초기 화면 네비게이터 형식으로 마크다운 문서의 리스트보기 좋게 잘 바꿔보자
React, Express 서버 간의 통신 React와 Express 서버 간의 통신은 **프론트엔드(React)**와 백엔드(Express) 간의 데이터 흐름을 의미합니다. 프론트엔드에서 사용자 인터페이스(UI)를 통해 작업을 수행하면, 백엔드가 해당 요청을 처리하고 데이터를 반환합니다. 아래에서 React와 Express 간 통신의 원리와 구현 방법을 자세히 설명하겠습니다.1. 통신의 기본 구조React(프론트엔드):사용자로부터 입력을 받고, HTTP 요청(fetch 또는 Axios)을 통해 Express 서버로 데이터를 전송합니다.Express 서버에서 반환된 데이터를 받아 UI를 업데이트합니다.Express(백엔드):React에서 받은 요청을 처리합니다.데이터베이스에서 데이터를 가져오거나 파일을 읽는 등의 작업을 수행한 뒤, React에 ..
파일 기반 문서 관리 - markdown 화면에 띄울 텍스트나 문서를 코드 또는 문자열 형식으로 작성할 수도 있지만, 더 좋은 방법은 데이터베이스에 저장하거나 파일로 관리하는 것입니다. 이렇게 하면 문서 관리가 쉬워지고, 동적으로 콘텐츠를 화면에 띄울 수 있습니다.파일 기반 관리문서를 Markdown, HTML, 또는 JSON 파일로 관리하고, 필요할 때 파일을 읽어 화면에 표시합니다.예: docs/ 디렉터리에 각 문서를 저장.import React, { useState, useEffect } from "react";import ReactMarkdown from "react-markdown";import rehypeRaw from "rehype-raw"; // HTML 파싱import rehypeHighlight from "rehype-high..
react router 실행 과정 import React from "react";import { BrowserRouter as Router, Routes, Route } from "react-router-dom";import FileViewer from "./FileViewer";import FileDetail from "./FileDetail";import DocsPage from "./DocsPage"; // 새 문서 페이지import files from "./data";import "./styles/App.css"; // 스타일 추가const App = () => { return ( AI Framework 주요 기능 구현 } /> ..
컴포넌트 별 파일 분리 시행 데이터를 별도 파일로 분리컴포넌트별로 분리된 파일에 저장하고, 필요할 때 병합하는 방식의 사용 각 데이터 파일 작성const AppData = { 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: "",..
코드 내 링크 이동 2024.11.29 - [ReactFileStructure/App] - 링크에 해당하는 경로 이동 링크에 해당하는 경로 이동react-router-dom 을 사용하여 경로 처리, 컴포넌트에 대한 설명 페이지 생성라우팅 추가import React from "react";import { BrowserRouter as Router, Routes, Route } from "react-router-dom";import FileViewer from "./FileViewer";importteach-meaning.tistory.com2024.11.29 - [ReactFileStructure/DocsPage] - 문서 페이지 { const { componentName } = useParams(); // URL" data..
링크 추가 파일 코드에서 링크가 있는 줄을 클릭하면 해당 문서 페이지로 이동하도록 설정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) => ( ..
문서 페이지 DocsPage 컴포넌트는 URL 파라미터를 읽고, 해당 컴포넌트에 대한 설명을 렌더링한다.import React from "react";import { useParams, Link } from "react-router-dom";const DocsPage = () => { const { componentName } = useParams(); // URL에서 컴포넌트 이름 가져오기 // 문서 데이터: 컴포넌트 이름별 설명 const docs = { FileViewer: { title: "FileViewer Component", description: "The FileViewer component renders a list of files with links to t..

티스토리툴바