728x90 반응형 분류 전체보기287 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. Mongo DB] Auto Increment, 컬럼에 자동으로 증가값 부여하기 MSSQL - Auto Increment MSSQL에서는 테이블 생성 시, ID사양 증가값 설정으로 Auto Incremet 처리가 가능하다. MongoDB - Auto Increment MongoDB에서는 어떻게 처리해야 할까. MongoDB는 SQL Database같은 auto-increment를 제공하지 않는다. MongoDB에서는 보통 아래와 같은 임의의 _id값이 생성된다. "_id": "5eec6b9c206506b18a51b426" 하지만, 1,2,3,4.... 로 자동증가하는 _id값이 필요하다면, counters collection을 활용하여 함수로 얻을 수 있도록 프로그래밍해야한다. Create counter collection for sequence Sequence값을 관리하기 위한 C.. 2020. 9. 28. 이전 1 ··· 45 46 47 48 다음 728x90 반응형
