『Server 10 』[React][CKEditor] DB에 저장한 데이터 가져오기

📖 개요

DB에 저장한 데이터를 가져와, CKEditor에 수정 가능한 형태로 넣어줄 예정이다.

 

📁 폴더 구조

Server_react

웹서버는 페이지별로 폴더를 나누었다. 그 중에서 페이지네이션처럼 공통으로 쓰는 부분은 Common폴더를 만들어 넣어주었다. 각 폴더에는 Create, Detail, Page, Post 이렇게 4가지의 js 파일이 있을 예정이다.

 

_Create : 문서를 만들어서 저장하고, DB에 해당 값을 저장하는 페이지

_Detail : 생성된 문서를 읽어오는 페이지, 전송 버튼이 있어 Electron 앱에 해당 문서를 띄워주는 역할을 한다.

_Page : 테이블을 만들어주는 페이지 (이전 Client에서 BoardList 페이지 역할)

_Post : DB에서 데이터 받아와서 테이블에 뿌려주는 역할

 

오늘은 Template_Detail에서 DB에 저장한 내용을 불러올 예정이다.

 

Server

서버는 config와 route로 나누었다. config는 db 정보등 설정정보에 대한 파일들이 들어있고, route는 라우팅 정보들이 담겨있다. 

예를 들어, Template.js는 /template/board, /template/insert 등의 /template 이하 라우팅 정보를 가지고 있다.

 

/board BoardList에 뿌려줄 정보를 가지고 있다. ( SQL 쿼리 SELECT문)

/insert DB에 저장할 라우팅 (SQL 쿼리 INSERT문)

/update DB를 수정할 라우팅 (SQL 쿼리 UPDATE문)

/delete DB에 있는 정보를 삭제할 라우팅 (SQL 쿼리 DELETE문)

 

💻 React Title 변경하기

DB에서 가져온 데이터를 담을 useState를 선언해준다.

  const [list, setList] = useState('');

/template/board에서 가져온 데이터를 setList에 넣어준다.

useEffect(()=>{
    axios_db
      .get("/template/board")
      .then((res) => {
        setList(res.data);
      })
},[]);

가져온 데이터 중에서 원하는 데이터를 가져오기 위해 URL 파라미터 값을 가져왔다.

  import { useParams } from 'react-router';
  
    const {idx} = useParams();

map함수를 사용해서 idx에 일치하는 컬럼만 가져와서 뿌려준다.

    {list&&list.map((item) => {
      if (item.idx == `${idx}`) {
        return (
          <>
            <div key = {item.idx} >
              <div className="subject">{item.Title}</div>
                <div className='viewer'>
                  <Template_Editor setInputContent={setInputContent} data={item.content}   />
                </div>
            </div>
          </>
        )
      }
    })}

Template_Editor 는 CKEditor를 불러오는 함수로, data={props.data} 로 넘겨받은 데이터를 넣어주면

CKEditor가 로드될 때 데이터가 있는 상태로 로드된다.

 

자세한 내용은 이전 블로그를 참고하자!

『Server 08 』[React] [CKEditor] HTML 편집기 (웹 에디터) 만들기

 

//Template_Editor.js
import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';

const Template_Editor = (props) => { 
       return (
           <>
               <CKEditor
                   editor={ Editor }
                   data= {props.data}
                   onReady={ editor => {
                       console.log( 'Editor is ready to use!', editor );
                   } }
                   onChange={ ( event, editor ) => {
                       const data = editor.getData();
                       props.setInputContent(data);
                       console.log( { event, editor, data } );
                   } }
                   onBlur={ ( event, editor ) => {
                       console.log( 'Blur.', editor );
                   } }
                   onFocus={ ( event, editor ) => {
                       console.log( 'Focus.', editor );
                   } }
               />
           </>
       );   
}
export default Template_Editor;

 

💻 Server에 query문 작성 (select문)

//server.js
const template = require('./routes/template');
app.use('/template',template);

//template.js
router.get("/board", (req, res) => {
    const sqlQuery = "SELECT *FROM server.template;";
    db.query(sqlQuery, (err, result) => {
      res.send(result);
    });
  });