728x90 반응형 분류 전체보기295 React 게시판 만들기 : 게시글 작성, 조회 (6) 앞에서 만든 UploadFiles 컴포넌트와, Editor 컴포넌트를 사용하여, 작성 컴포넌트를 만들어보자. NoticeWriteComponent.js import React, { useState, useRef, useEffect } from 'react'; import ajax from '../../utils/ajax'; import Editor from '../EditorComponent'; import UploadFiles from '../UploadFiles'; import LFSelect from '../common/LFSelect'; import { Link } from "react-router-dom"; const NoticeWriteComponent = () => { const tabs =.. 2020. 10. 5. React 게시판 만들기 : 파일업로드 multer (5) Multer Installation Multer는 multipart/form-data를 이용하여 파일을 업로드 할 수 있게 해주는 middleware이다. npm install multer package.json에 아래와 같이 설치가 된다. "multer": "^1.4.2", Multer Usage uploadRouter.js const express = require('express'); const router = express.Router(); const multer = require("multer"); const path = require("path"); //diskStorage 엔진으로 파일저장경로와 파일명을 세팅한다. let storage = multer.diskStorage({ //multer.. 2020. 10. 5. React 게시판 만들기 : React-Quill (4) 리액트 에디터로 Quill을 사용하기로 했다. 무료로 사용 가능하다. npm install react-quill 우선 react-quill을 설치한다. npm install react-quill package.json 파일 dependencies 에 아래와 같이 설치됨 확인! "react-quill": "^1.3.5", EditorComponent.js import React, { Component } from 'react'; import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; class EditorComponent extends Component{ constructor(props){ super(props); } .. 2020. 9. 29. React 게시판 만들기 : Pagination (3) Pagination.js postsPerPage : 페이지당 표시할 게시글 수 totalPosts : 전체 게시글 수 currentPage : 현재 페이지 paginate : 클릭 시, 부모 component에 페이지 수를 전달 클릭된 페이지 숫자는 color를 다르게 하여, 현재 머물러있는 페이지를 알 수 있도록 한다. import React from 'react' const Pagination = ({ postsPerPage, totalPosts, currentPage, paginate }) => { const pageNumbers = []; for(let i = 1; i ( paginate(number)} className="page-link" style={currentPage == number ?.. 2020. 9. 28. React 게시판 만들기 : 리스트 (2) NoticeComponent.js 게시글이 많지 않은 경우에는 전체 다 가져와서 paging처리하면 될 것 같다. 전체 게시글을 가져오는 /notice/noticeList api를 호출하여 setPosts 한다. 페이지당 10개의 게시글을 표시한다. import React, { useState, useEffect } from 'react'; import { Link } from "react-router-dom"; import ajax from '../../utils/ajax' import Pagination from '../Pagination'; import moment from 'moment'; const NoticeComponent = (props) => { const [posts, setPosts].. 2020. 9. 28. React 게시판 만들기 : 준비과정 (1) Creating the Components 우선 필요한 component는 아래와 같다. 1. NoticeComponent.js : 게시판리스트 2. NoticeDetailComponent.js : 게시글 상세화면 3. NoticeModifyComponent.js : 게시글 수정화면 4. NoticeWriteComponent.js : 게시글 작성화면, 3과 4는 합쳐도 됩니다. 5. EditorComponent.js : 글 작성할 에디터 화면 6. Pagination.js : 게시글 밑에 pagination component 7. UploadFiles.js : 첨부파일 component Creating the Collections mongodb collection은 아래와 같이 한다. 1. notice .. 2020. 9. 28. 이전 1 ··· 46 47 48 49 50 다음 728x90 반응형
