비전공 개발자

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

상단 세 번째 탭의 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..

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..

[Lunch Box] 리액트 프로젝트가 생성되면 index.html, index.js, App.js가 생성된다. 각각을 다음과 같이 작성하였다. index.html 기본 페이지다. index.html에서 main.js를 불러오는 이유는 webpack이 작성한 모든 js파일을 main.js라는 파일로 빌드하도록 설정했기 때문이다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import './css/button.css'; import './css/textField.css'; import App from './App'; ReactDOM.render(, document.getElementBy..

다음으로는 프로젝트 배포와 관련된 설정이다. 이 프로젝트는 firebase를 이용하여 배포 하였다. firebase.json, .firebasrc은 firebase를 배포하는 과정에서 생겨난 파일들이다. 각 내용이 정확하게 어떤 기능을 하는지는 파악하진 못했다. firebase.json { "hosting": { "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } .firebaserc { "projects": { "default": "lunchbox-97110" } } firebase를 이용..

학교 다닐때 샐랩 (Sal Lab)이라는 샐러드를 배달해주는 음식점이 있었다. 여기서 샐러드를 주문하기 위해서는 전화를 하거나 네이버 카페에 접속해야 했는데, 샐랩 자체의 웹사이트가 있으면 좋겠다라는 생각을 했었다. 그래서 샐랩을 위한 웹사이트를 React를 공부하는 김에 한번 만들어 보자는 생각에 프로젝트를 시작하였다. 예전에 Lunch Box라는 회사가 있었는데 이 회사의 웹사이트의 디자인을 토대로 만들었다. 그래서 프로젝트 이름을 Lunch Box라고 하였다. 웹사이트 접속 링크는 다음과 같다. https://lunchbox-97110.web.app/ React App lunchbox-97110.web.app 웹사이트는 5개의 페이지로 구성되어있다. WE ARE SALLAB - 샐랩의 소개를 확인할..