목록분류 전체보기 (185)
Mi Lugarcito
React와 Firebase로 앱 개발하기 - 텍스트 파일 업로드 및 조회/삭제 구현
yarn add react-text-truncate Texts.js import TextTruncate from 'react-text-truncate'; import React from 'react'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; import { withStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/cor..
React - Command failed with exit code 127 에러날때
Command failed with exit code 127. yarn install / npm install 후 실행해보기
React와 Firebase로 앱 개발하기 - 파이어베이스(Firebase)로 React 앱 배포 (CopyWebpackPlugin 버전 에러 관련 문제 해결 완료....)
//vscode 터미널에서 //이 버전은(@6.2.1) 나중에 webpack.config.js 에서 plugins: [ new CopyWebpackPlugin([{ context: './public', from: '*.*' }]), ], //이렇게 처리해줘야한다. yarn add --dev copy-webpack-plugin@6.2.1 webpack.config.js () 'use strict' const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: { main: ['./src/main.js'] }, output: { path: path.resolve(__d..
React와 Firebase로 앱 개발하기 - 단어(Word) 데이터 삽입 및 삭제 기능 구현하기
Words.js import React from 'react'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; import Typography from '@material-ui/core/Typography'; import { withStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import Fab from '@material-ui/core/Fab'; import AddIcon from '..
React와 Firebase로 앱 개발하기 - Firebase DB 구축 및 React와 연동
Words.js import React from 'react'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; import Typography from '@material-ui/core/Typography'; const databaseURL = "https://word-cloud-1e33e-default-rtdb.firebaseio.com/"; class Words extends React.Component { constructor() { super(); this.state = { words: {} }; } _get() { fetch(`${databaseURL}/words...
React와 Firebase로 앱 개발하기 - 페이지 라우팅
yarn add react-router-dom Home.js import React from 'react'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; class Home extends React.Component{ render(){ return( React 및 firebase 기반의 워드 클라우드 어플리케이션 ) } } export default Home; Texts.js import React from 'react'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/cor..
React & Firebase 로 앱 개발하기 - 내비게이션 바 만들기
AppShell.js import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Drawer from '@material-ui/core/Drawer'; import MenuItem from '@material-ui/core/MenuItem'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; const styles = { root: { flexGrow: 1, }, menuButton: { m..
React & Firebase 로 앱 개발하기 - react 앱 개발환경 구축하기
//일반 cmd 창에서 npm install -g yarn //vscode 터미널에서 설치 yarn init name (MyReactTutorial): wordcloud yarn add react react-dom yarn add --dev webpack webpack-dev-server yarn add --dev babel-core babel-loader babel-preset-react-app yarn add --dev webpack-cli npm link webpack aonee.tistory.com/6 Cannot find module 'webpack' 문제점 npm install --save-dev webpack-cli webpack-dev-server하여 설치했음에도 불구하고 webpack이 ..
GIT - 기존 깃허브에 올렸던 폴더 삭제하고 재업로드 하기
codedragon.tistory.com/146 .git 숨겨진 폴더 확인하기 윈도우 탐색기 실행 메뉴 > 보기 > 옵션 아이콘 클릭 보기 탭 클릭 > 숨길 파일 및 폴더-숨김파일, 폴더 및 드라이브 표시 체크 알려진 파일형식의 파일 확장명 숨기기 체크 해제 적용 > 확인 . codedragon.tistory.com 숨겨진 .git 폴더를 삭제하고 다시 git bash 실행해서 처음부터 올리면 된다.
React & Node.js - 필터 함수를 이용한 고객 검색 기능 구현하기
app.js import logo from './logo.svg'; import './App.css'; import { Component } from 'react'; import Customer from './components/Customer'; //고객추가양식 import CustomerAdd from './components/CustomerAdd'; import Paper from '@material-ui/core/Paper'; import Table from '@material-ui/core/Table'; import TableHead from '@material-ui/core/TableHead'; import TableBody from '@material-ui/core/TableBody'; im..