비전공 개발자

Material-UI를 사용하기 위해 다음과 같이 명령어를 입력하여 모듈을 설치한다. npm install @material-ui/core package.json 파일의 dependencies에 @material-ui/core 모듈이 추가되었는지 확인한다. 리액트의 컴포넌트에는 두 가지 종류가 있다. 함수형 컴포넌트와 클래스형 컴포넌트이다. 둘의 차이를 여기서 설명하진 않겠다. Material-UI 웹 페이지에서는 제공하는 대부분의 예제가 함수형이므로 클래스형으로도 한번 작성해보고 싶어 여기서는 클래스형으로 컴포넌트를 생성하였다. Create React App에서 App.js는 함수형으로 작성되었으므로 클래스형으로 수정한다. App.js import React from 'react'; import Mai..

마지막 화면인 로그인 화면이다. 로그인 기능은 구현하지 않았고 단순히 위젯만 존재하므로 간단한다. 우선은 클릭하면 로그인이 되었다는 알람창만 띄우도록 구현하였다. Login.js import React, { Component } from 'react'; import TextField from '@material-ui/core/TextField'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Checkbox from '@material-ui/core/Checkbox'; import Button from '@material-ui/core/Button'; import { withStyles } from '@material-..

상단 네 번째 탭의 MY SALLAB을 클릭하면 내 주문 확인 화면으로 넘어간다. 주문화면에서는 내가 주문한 메뉴, 가격, 주문 상태, 주문 날짜를 확인한다. 실제 유저별 주문을 보여주진 않고 같은 데이터를 보여주는 기능만 구현하였다. 코드는 메뉴 화면과 거의 유사하다. Style은 material-ui의 withStyle을 이용하여 설정하였고 이미지와 데이터는 Firebase에서 받아온다. 주문 데이터는 Order component을 만들어서 반복된 형태의 데이터를 보여주도록 했다. My.js import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import Order from './..

공지 화면에서 게시판 형태의 데이터 중 특정 행을 클릭하면 공지 상세 화면으로 넘어간다. 공지 상세 화면에서는 공지 화면으로부터 클릭한 행의 상세 정보를 받아 보여주며 댓글 기능을 제공한다. 스타일은 이전 화면과 동일하게 withStyles을 이용하였고 댓글 정보와 이미지를 Firebase에서 받아 오는 방법도 동일하다. 상세 정보는 Board component에서 props.location.state에서 받아온다. BoardDetail.js import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import Reply from './Reply'; import { withStyles } from '@materia..

상단 탭과 라우팅은 main.js에서 정의한다. Main.js import React, { Component } from 'react'; import { Link, Route, Switch } from 'react-router-dom'; import Tabs from '@material-ui/core/Tabs'; import Tab from '@material-ui/core/Tab'; import { withStyles } from '@material-ui/core/styles'; import Home from '../home/Home'; import Menu from '../menu/Menu'; import Board from '../board/Board'; import My from '../my/My..