728x90 반응형 React10 REACT] Bulma css framework bulma.io/ Bulma: Free, open source, and modern CSS framework based on Flexbox Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free. bulma.io 다음 터미널 command로 Bulma CSS framework를 추가한다. $ npm install bulma index.js에 bulms.css를 추가한다. import 'bulma/css/bulma.css'; App.js에 Bulma message multi-part component를 추가해보자.. 2020. 10. 12. REACT] React Router, React Media 디바이스 스크린의 사이즈에 따라, 다른 route를 제공하는 user dashboard application을 만들어보자. Step1 - Setting Up the Project 프로젝트 시작을 위해, npx와 create-react-app을 사용하여 새로운 React application을 만든다. create-react-app으로 리액트 프로젝트를 생성할 때, 2가지 방법이 있다. 첫 번째 방법 : npm install -g create-react-app create-react-app my-app cd my-app npm start 첫 번째 방법은, creat-react-app을 글로벌 모듈로 설치한 다음, 사용하는 방법이다. 이 방법은 모듈의 업데이트 여부가 확인이 불가능하여, 이전 버전을 사용할 .. 2020. 10. 12. React] 배열 렌더링 How To Render Arrays in React 소개 리액트에서 배열을 렌더링 할 수 있는 방법들을 소개한다. Rendering Multiple Elements multiple JSX 요소를 렌더링 하기 위해서, .map() method로 배열을 루프 돌고, 하나의 element를 return 할 수 있다. render() { const fruits = ["Apple", "Orange", "Banana"]; return fruits.map((reptile) => {reptile}); } 다음과 같이 렌더링 된다. Apple Orange Banana Console 탭을 보면, 경고문구를 확인할 수 있다. component에 collection을 렌더링 하려면 반드시 key를 추가해야 한다. 리액트에서 유일한 key는 collection에서 어떤 comp.. 2020. 10. 8. 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. 이전 1 2 다음 728x90 반응형
