본문 바로가기

프로그래밍/React6

[React] Editor 선정하기 에디터의 선정 기준으로는, 1. HTML 에디터 전환이 가능해야 함 2. 사진 업로드가 되어야 함 2개의 기준으로 선정을 해봤을 때, https://github.com/tinymce/tinymce-react GitHub - tinymce/tinymce-react: Offical TinyMCE React component Offical TinyMCE React component. Contribute to tinymce/tinymce-react development by creating an account on GitHub. github.com https://github.com/summernote/react-summernote GitHub - summernote/react-summernote: Summern.. 2021. 8. 22.
[React] Webpack CSS 설정 추가하기 webpack 5.x.x, webpack-cli 4.x.x 현재 최신버전으로 설치했다. .jsx 파일에 .css파일을 import해준다. style-loader로 style 태그를 만들어서 webpack 명령어를 실행하면 .css 파일이 output > path에 설정한 경로에 생성된다. index.html 파일에 를 해주지 않으면 css파일이 적용되지 않으니 주의하자. 2020. 12. 20.
[React] immutable Failed to compile 개발서버 구동시... Failed to compile. ./node_modules/immutable/contrib/cursor/index.js SyntaxError: ...\node_modules\immutable\contrib\cursor\index.js: Unexpected token (25:0) 23 | '\n' + 24 | 'https://github.com/redbadger/immutable-cursor\n' + > 25 | ); | ^ 26 | 27 | /** 28 | * Cursor is expected to be required in a node or other CommonJS context: 해당 에러가 발생할 경우, 실수로 IDE의 자동완성 기능으로 import { from } from.. 2020. 11. 18.
[React] 기초 정리 import와 require의 비교 - require는 node의 모듈 시스템 - module.exports에서 exports 되는 게 객체나 배열이면 구조 분해할 수 있음 - module.exports는 export default와 호환됨(깊게 들어가면 다르지만 react에서는 호환되는 정도로 이해하면 됨) - const React = require('react');는 import React from 'react';와 호환됨 - import React, { Component } from 'react';에서 { Component }는 export const Component와 같이 선언된 것을 가져올 때 사용 - import 관련 부분은 react에서 사용 - require 관련 부분은 node에서 사용.. 2020. 2. 22.
[React] Webpack 자동 빌드 - 프론트엔드 변경점을 감지하여 자동으로 빌드하고 변경점을 바꿔줌 - webpack.config.js를 읽어서 빌드를 해주고 서버로 유지시켜줌 webpack-cli 4.x.x 일 때, npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin npm i -D webpack-dev-server package.json "scripts": { "dev": "webpack serve --env development" } webpack.config.js - module > rules > babel-loader > options > plugins > 'react-refresh/babel' 추가 const RefreshWebpackPlugin = require('@pm.. 2019. 11. 27.