비전공 개발자

Material-UI에서 제공하는 Box 컴포넌트 실습을 진행한다. BoxTutorial 컴포넌트를 생성해 Main.js에서 불러오고 BoxTutorial 컴포넌트에서 Box 컴포넌트를 이용한다. Box 컴포넌트는 컴포넌트를 감싸는 역할을 하는데 주로 CSS의 사용성을 더 높이기 위해 사용된다. 이를 확인하기 위해 예제를 작성해보았다. BoxTutorial.js import React, { Component } from 'react'; import Button from '@material-ui/core/Button' import Box from '@material-ui/core/Box'; class BoxTutorial extends Component { render() { return ( Button ..

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

새로운 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 다음과 같은 구조로 프로젝트 생성됨을 확인할 수 있다. 확인을 위해 다음과 같이 명령어를 입력하여 프로젝트를 실행한다...

주말에 혼자 밥 먹으러 가는 초심한우 식당입니다! 또 식당 정면 사진 찍는 걸 깜빡해서 이렇게 다음에서 검색해서 가져왔네요...ㅋㅋㅋ 초심한우라고 하니 고기를 먹어야 하는 느낌일 텐데요... 사실 한우는 한 번도 안 먹어 봤습니다 ㅋㅋㅋ 사람들이 한우를 많이 먹는 것을 보아 맛있을 거예요!ㅋㅋㅋ 초심한우 내부 모습입니다. 내부가 커서 회식으로도 괜찮을 거 같아요! 4인용 테이블이 15개 정도는 있었던 거 같아요. 일요일 늦은 점심이라 손님이 많이 없네요... ㅠㅠ 여기는 고깃집이기도 하지만 식사도 다양해서 많은 사람들이 식사를 하러 찾고 있습니다. 특히나 점심에는 다들 육회비빔밥이나 돼지갈비찜을 먹고 있어요 ㅋㅋㅋ 저도 이 두 메뉴만 먹으러 여기를 오고 있습니다. 저는 오랜만에 매콤한 돼지갈비찜이 먹고 ..

마지막으로 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..

토요일에 밥 먹으러 2001 아울렛 지하에 위치한 음식점들을 많이 가는데요. 이번에는 한식 음식점 배꼽집을 갔습니다. 배꼽집은 수요 미식회에도 나와서 점점 유명해지고 있는 체인점이에요! 2001 아울렛 지하 2층에 안에 들어가면 배꼽집이 있습니다. 뭔가 글씨체가 한식 맛집 느낌으로 잘 만들었네요 ㅋㅋㅋ 아울렛 내부에 위치한 식당들은 대부분 엄청 크진 않고 테이블이 열개 정도 크기의 식당들이에요. 배꼽집 음식들 모습입니다! 그래도 위에 사진이랑 실제 먹은 음식들 모습이랑 큰 차이 없이 비슷해요! 수요미식회에서도 갈비탕이랑 육회비빔밥이 나왔으니 저도 육회비빔밥과 갈비탕을 도전해봤습니다. 점심이라 참갈비는 먹지 않고 간단하게 1인 1 메뉴로 먹었네요 ㅋㅋㅋ 갈비탕과 육회비빔밥을 먹었는데 맛은 정말 깔끔하고 괜..

미금역에서 칼국수를 먹으러 자주 가는 택이네 조개 전골입니다! 아직 간판이나 정면 사진을 찍어 놓는 게 습관이 안돼서 자꾸 까먹네요 ㅠㅠㅠ 지금 사진은 다음에 올라와 있는 미금역 택이네 정면 사진입니다! 저는 주로 주말 점심을 자주 가다보니 아직 조개 전골은 한 번도 먹지 못했네요... 저에게는 조개 전골 식당이라기보다는 칼국수집에 가까워요! ㅋㅋㅋ 안으로 들어가면 이렇구요! 사진에는 잘 안 보이지만 내부가 엄청 넓고 테이블이 많아서 만약에 저녁에 회식을 해야 한다면 여기 강추입니다! 이렇게 주로 조개전골과 칼국수가 메인 메뉴입니다. 저기서 칼국수는 종류별로 다 먹어봤는데 다음번엔 꼭 조개 전골을 도전해봐야겠네요 ㅋㅋㅋ 가장 기본 칼국수인 조개칼국수입니다! 칼국수가 안 보이는데요 ㅋㅋㅋ 택이네 칼국수는 ..