비전공 개발자

새로운 React 프로젝트를 시작하기 위해 Create React App을 생성해야한다. 프로젝트를 생성할 위치에서 다음과 같이 명령어를 입력하여 create-react-app 모듈을 설치한다. Node js 설치되었다고 가정였다. npm install -g create-react-app 그리고 앱을 생성상하기 위해 다음과 같이 명령어를 입력한다. 프로젝트 이름은 material-ui-tutorial로 설정했다. create-react-app material-ui-tutorial 그리고 생성된 프로젝트를 확인하기 위해 프로젝트 위치로 이동한다. cd material-ui-tutorial 다음과 같은 구조로 프로젝트 생성됨을 확인할 수 있다. 확인을 위해 다음과 같이 명령어를 입력하여 프로젝트를 실행한다...

마지막으로 Firebase에 빌드 및 배포를 하고 마무리한다. 프로젝트 개발 기간 : 2019년 8월 1일 ~ 2019년 10월 1일 (2달) 블로그 정리 기간 : 2019년 10월 1일 ~2019년 10월 14일 (2주) 배포 링크 https://lunchbox-97110.web.app/ Lunch Box lunchbox-97110.web.app 소스 깃 주소 https://gitlab.com/n113345/lunchbox JB n11334naver.com / LunchBox GitLab.com gitlab.com

마지막 화면인 로그인 화면이다. 로그인 기능은 구현하지 않았고 단순히 위젯만 존재하므로 간단한다. 우선은 클릭하면 로그인이 되었다는 알람창만 띄우도록 구현하였다. 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..

상단 세 번째 탭의 SALLABERS를 클릭하면 공지 화면으로 넘어간다. 공지 화면에서는 게시판 형태로 정보를 전달하고 편의를 위한 검색기능과 페이지 당 보여주는 게시물의 갯수를 변경하는 기능을 제공한다. 또한 여기서 제목을 클릭하면 세부 내용을 보여주는 화면으로 넘어가며 조회수가 1 증가한다. 각 게시물에서는 댓글을 작성할 수 있다. Board.js에서는 리스트 형태로 받아오는 공지 정보를 보여줘야한다. 이때 게시판 형태로 정보를 제공해야하는데 이를 위한 component는 material-ui에서 제공하므로 이를 이용하였다. 공지 화면의 기본적인 뼈대는 material-ui의 tables를 참고하였다. https://material-ui.com/components/tables/ Board.js imp..

상단 두 번째 탭의 MENU를 클릭하면 메뉴 화면으로 넘어간다. 메뉴에서도 특별한 기능 없이 샐랩의 메뉴만 보여준다. 주문하기 버튼이 있지만 기능 구현은 하지 않았다. 이전 화면들과 다른 점은 메뉴와 메뉴 카테고리를 나타내는 component를 만들어 이용했다는 점과 Firebase의 database에서 메뉴 정보를 가져왔다는 점이다. 이 두 가지 내용을 중점적으로 설명하고자 한다. Menu.js에서는 리스트 형태로 받아오는 메뉴 정보를 보여줘야한다. 비슷한 형태에서 데이터만 달라지는데 반복적으로 보여줘야 하므로 MenuContent, MenuCategory라는 component를 만들었고 이를 menu.js에서 이용하였다. MenuContent.js import React, { Component } f..

앞에서 설명했던 상단 탭과 하단탭 사이에 들어갈 내용을 보여주는 component는 총 5개이다. 그 중에서 기본적으로 설정된 component는 Home component이다. Home은 특별한 기능없이 샐랩에 관한 정보를 간략하게 보여준다 (물론 실제 샐랩의 정보는 아니다). Home.js import React,{Component} from 'react'; import myFireBase from '../../config/MyFireBase' import { withStyles } from '@material-ui/core/styles'; const styles = () => ({ homeTopLayout: { height: '45rem', textAlign: 'center', color: 'whi..

main.js 의 마지막에는 Bottom이라는 모듈을 사용한다. 모든 화면에 고정으로 같은 하단탭을 보여주기 위함이다. 하단탭에는 별다른 기능이 웹 사이트에 대한 정보만 보여준다. Bottom.js import React from 'react'; import { withStyles } from '@material-ui/core/styles'; const styles = () => ({ mainBottom: { height: '400px', background: '#181a1e', paddingTop: '2.5rem', paddingRight: '11%', paddingLeft: '11%', '@media (max-width:960px)': { height: '550px' } }, mainBottomTab..

상단 탭과 라우팅은 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..