비전공 개발자

앞에서 설명했던 상단 탭과 하단탭 사이에 들어갈 내용을 보여주는 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..

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

create-reacta-app을 설치하여 프로젝트를 생성한다. 프로젝트를 생성하는 과정은 다른 글에서 쉽게 찾을 수 있어 생략하였다. 최종적으로 완성된 프로젝트의 디렉토리 구조는 다음과 같다. ├─build ├─node_modules ├─public ├─src │ ├─component │ │ ├─board │ │ ├─home │ │ ├─login │ │ ├─main │ │ ├─menu │ │ └─my │ ├─config │ ├─css │ └─images ├─.babelrc ├─.firebaserc ├─.gitignore ├─firebase.json ├─package.json ├─README.md ├─webpack.config.js 우선 사용중인 package.json과 webpack.config.js에..

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