본문 바로가기

FrontEnd45

AppBar 와 웹 폰트 적용 AppBar는 검색, 혹은 내비게이션으로 사용되는데요 다음과 같은 예제를 확인하면 icons 라이브러리가 필요한 것을 확인할 수 있습니다. 따라서 라이브러리를 설치합니다. npm install --save @material-ui/icons 대신 클라이언트 폴더로 이용한뒤 설치가 필요합니다. 이제는 material-ui의 예제를 그대로 사용할 것이기 때문에 복사 붙여 넣기를 합니다. import React, { Component } from 'react'; import Customer from './compnents/Customer' import CustomerAdd from './compnents/CustomerAdd' import './App.css'; import Paper from '@materia.. 2020. 7. 16.
삭제기능 추가 삭제에 대해 두 가지 방법이 존재합니다. 1. 삭제를 수행했을때 TABLE에서 제거하기 2. TABLE에서 삭제됬다고 체크만 하고 완전히 삭제하지는 않는 방법 2번째 방법을 사용하기. ALTER TABLE CUSTOMER ADD createdDate DATETIME; ALTER TABLE CUSTOMER ADD isDeleted INT; 로 컬럼추가 이제 CustomerDelelte component를 구현합니다. import React from 'react'; class CustomerDelete extends React.Component{ deleteCustomer(id){ const url = `/api/customers/${id}`; fetch(url, { method : 'DELETE' }) ... 2020. 7. 13.
부모 state변경을통한 갱신 React는 SPA형태로 동작을 합니다. 따라서 전체페이지를 새로고침 하는 것보다는 필요한 부분만 새로고침 해야 합니다. 기본적으로 부모 컴포넌트에서 자식 컴포넌트로 함수를 props형태로 건네주는 방식으로 동작을 합니다. 즉 고객 추가 컴포넌트에서 부모 컴포넌트의 상태를 변경하는 식으로 필요한 부분만 새로고침 할 수 있도록 설정해야 합니다. app.js의 state를 삭제해줍니다. state = { customers:"", completed : 0 } 이제 constructor를 작성합니다. constructor(props) { super(props); this.state = { customers: '', completed : 0, } } stateRefresh = () => { this.setStat.. 2020. 7. 13.
Express Server에서 처리하기 React는 폼 데이터를 전송해 서버에서 데이터를 받아왔을 때 페이지 전체가 새로고침이 되는 것이라니라. 특정 부분만 렌더링 하는 것이 가능하다. 다만 빠른 테스트를 위해 전체 새 로고 침하는 방향으로 간다. window.loaction.reload();함수를 실행해 고객 데이터를 받아올 수 있도록 한다. 파일 처리를 위해 multer라는 라이브러리를 설치합니다. npm install --save multer const multer = require('multer'); 라이브러리를 의존하고 const upload = multer({dest : './upload'}) 업로드될 파일을 지정해줍니다. multer 모듈을 사용하여 post로 전송된 파일 처리 multer 가이드 문서 사용자가 post 방식으로 .. 2020. 7. 13.
이벤트 처리 웹문서에서 고객 데이터를 전송하는 양식을 공부한다. 서버와의 통신목적의 라이브러리인 axios를 설치해본다. cd client npm install --save axios 새로운 component이므로 CustomerAdd.js파일을 추가한 다음 axios , react를 import 한다. 폼양식을 디자인을 제외하고 빠르게 만든다. 폼에서 name값은 서버에서 구별하기 위한 변숫값이다. class CustomerAdd extends React.Component { constructor(props){ super(props); this.state = { file : null, userName : '', birthday : '', gender : '', job : '', fileName : '' } } } .. 2020. 7. 13.
MySQL DB 구축 실제로 정보를 저장하기 위해서는 데이터 베이스 시스템이 필요합니다. 고객을 위한 데이터베이스를 생성합니다. table명은 management입니다. 이제 하드코딩된 정보를 데이터베이스에 넣습니다. res.send([ { 'id' : 1, 'image' : 'https://placeimg.com/64/64/1', 'name' :"홍길동", 'birthday' : '951006', 'gender' : '남자', 'job' : '학생' }, { 'id' : 2, 'image' : 'https://placeimg.com/64/64/2', 'name' :"이순신", 'birthday' : '942006', 'gender' : '남자', 'job' : '대장' }, { 'id' : 3, 'image' : 'http.. 2020. 7. 13.
React의 라이프사이클 , API 로딩처리 로딩 처리를 하기 위해 material-ui의 progress를 이용할 것입니다. 리액트 라이브러리는 다음과 같은 라이프사이클을 따릅니다. 1) constructor() 2) componentWillMount() 3) render() 4) componentDidMount() props or state 가 변경되는 경우에는 => shouldComponentUpdate() 함수 등이 사용되어 다시 render()를 불러와서 view를 갱신하게 됩니다. 리액트는 상태변화를 자동으로 검사해서 다시 그려주기에 편리합니다. progress = () => { const {completed} = this.state; this.setState({ completed : completed >= 100 ? 0 : comple.. 2020. 7. 12.
Window에서 리액트와 Node.js서버 실행시키기 dev : 클라이언트 폴더에서 클라이언트 서버를 구동시키고 노드 서버폴더에서 EXPRESS 서버를 구동시키도록 설정했습니다. 따라서 우리는 Node.js서버와 리액트 클라이언트를 동시에 구동시킬 수 있습니다. 따라서 루트 폴더에서 yarn dev를 입력하시면 서버와 클라이언트가 동시에 실행됩니다. 저는 오류가 발생했는데요 그 이유는 모듈을 찾을 수 가없는데 그 이유는 윈도에서 사용자 이름을 한글로 설정했기 때문에 경로를 찾지 못합니다. 이제 사용자의 이름을 영어로 생성한 뒤 다시 열어서 yarn dev를 치면 다음과 같은 오류가 발생합니다. 그 이유는 -g옵션으로 install 한경우는 사용자를 기준으로 설치가 되기 때문에 사용자가 변경됐다면 다시 설치를 해주어야 합니다. 설치한 뒤 터미널 창에 yarn.. 2020. 7. 11.
Node.js express 웹서버를 구현하기 위에 Nodejs express서버를 구축합니다. 일반적으로 react로 개발하는 사람은 NodeJs가 같은 언어를 기반으로 한다는 점으로 더 쉽기에 nodejs를 웹서버로 사용하는 경우가 많습니다. 지금까지 개발한 클라이언트 프로그램과 API역할을 하는 NodeJS를 구축합니다. 환경 설정. client 모듈을생성하고 root폴더에서는 서버 모듈을 실행하도록 명시하는 package.json파일을 만듭니다. 즉 서버와 클라이언트를 동시에 실행시킬 수 있도록 합니다. 클라이언트를 어떻게 시작하는지는 scripts에 명시합니다. 1. "client" : "cd client && yarn start" client 폴더로 가서 yarn start로 리액트를 동작시킵니다. 2. "server" .. 2020. 7. 10.
material-ui https://material-ui.com/ Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com Material-UI는 react와 많이 활용되는 디자인 프레임워크입니다. 다운로드는 npm을 통해 다운로드할 수 있습니다. 이제 콘솔창에서 yarn start대신 vsc 터미널에서 React를 실행 중 문제가 발생했다. 이의 대한 오류 해결은 관리자 권한으로 powershell을 실행을 하지 않았기 때문이다. PS C:\Users\Desktop\rea.. 2020. 7. 10.

티스토리툴바