비전공 개발자

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

올해 미금역 안에 생긴 호두 과자 매장 호밀호두 미금점입니다! 지나갈 때 보기만 했는데 친구가 워낙 강추해서 한번 도전해봤습니다! 호밀호두 미금점은 이렇게 역 내부에 위치합니다. 내부 공간은 협소해서 먹을 공간은 없어서 테이크 아웃만 가능합니다. 급하게 호두과자만 사서 먹고 오느라 메뉴판을 못 찍었네요 ㅠㅠ 저는 처음이라 3천 원에 8개가 들어있는 호두과자를 도전했습니다. 호두과자뿐만 아니라 파이나 음료 등 다양한 메뉴를 판매 중이에요! 호두과자는 모두 개별 포장되어 있고요! 그래서 그런지 좀 더 특별하게 느껴지네요. 선물로도 괜찮을 듯합니다! 사진에 보이듯이 일반적인(?) 호두과자들과 다르게 안에 진짜 호두가 들어있어요! 그리고 팥도 정말 꽉 차 있고 달아서 간식으로 자주 먹어야겠다는 생각을 했어요 ㅋ..

이번에는 제가 자주 혼밥하는 곳인 육첩반상입니다. 체인점이 엄청 많은데 여기는 미금역 5번, 6번 출구에 엠코헤리츠라는 오피스텔 안에 위치한 육첩반상입니다. 혼자 밥을 먹어야하는데 거기에 고기가 먹고싶을 때가 가끔 있는데요... 그렇다고 고깃집을 가기도 애매하고 고기는 먹어야겠고 그럴때! 저는 항상 육첩반상을 갑니다 ㅋㅋㅋ 혼밥을 해야하면 항상 선택지로 떠오르는 음식점이에요! 가면 혼밥하는 사람들도 많아서 외롭지 않게(?) 밥을 먹을 수 있어요. 고기 종류는 되게 다양하고 소고기나 돼지고기 모두 먹을 수 있어요 ㅋㅋㅋ 배가 많이 고프면 고기 또는 냉면을 추가하거나 사이즈 를 더 크게 먹거나 하면돼요! 미금역 근처에는 이렇게 스크린으로 메뉴를 주문하는 식당이 참 많은거 같아요 ㅋㅋㅋ 처음이라 어색하시거나 ..

오늘은 오리역 근처에서 제가 팀원들과 함께 자주 가는 돼지 고깃집을 리뷰하려고 합니다! 오리역 3번 출구에 식당들이 꽤 많은데 아직까지는 오리역에서는 여기 삼겹살이 제일 맛있는 거 같아요 (물론 제기준! ㅋㅋㅋ) 팀원들도 다들 좋아해서 꼭 회식이 아니더라도 자주 가는 식당이에요. 밖에서 봤을 때 모습은 이렇습니다! 갈 때마다 고기 먹느라 정신이 없어서 항상 외관 모습을 찍는 걸 깜빡하네요 ㅠㅠ 네이버 그때그집 검색 결과에서 가져왔어요... ㅋㅋㅋㅋ 보이는 것처럼 엄청 넓진 않고 테이블이 한 8개 정도 들어가는 크기였던 거 같아요! 그때그집 메뉴판은 이런데요! 가려서 잘 안 보이지만 ㅠㅠ 모두 200g 기준 15000원입니다. 200g 기준이니까 오리역 다른 고깃집들과 비슷한 거네요!ㅋㅋㅋㅋ 메뉴가 워낙 ..

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

상품 : BRUG 스탠드 행거 3colors 설명 : 마켓비에서 판매하는 헹거입니다. 디자인이 심플하고 가격이 저렴해서 예전에 구매했었는데, 이번에 하나 더 구매했습니다. 그리고 엄청엄청 튼튼해요! 조립은 혼자 해도 5분~10분 밖에 안걸리고 배송도 깔끔하게 잘됐습니다. 심지어 배송비 무료... 아쉬운 점은 헹거 밑에 받침대 같은게 없어서 공간이 조금 남는다는거? 생각보다 높아요 ㅋㅋㅋㅋ 하지만 그만큼 디자인이 심플해서 깔끔해요! 오늘의 집이라는 어플에서 찾아보고 구매했는데 여기에는 이 헹거 외에도 괜찮은 제품이 엄청 많습니다 ㅋㅋㅋ 구매 사이트 : https://ohou.se/productions/10914/selling?affect_type=StoreSearchResult&affect_id=10) 가..

분당에서 쌈밥집을 찾으러 다니다가 우연히 진대감을 지나가는데 차돌 삼합을 먹고 있는 사람들이 보였습니다!! 사람들 꽉 차 있는 모습을 보니 더 먹고 싶어 지는... 예전에 이영자가 전참시에서 차돌 삼합을 너어어어무 맛있게 먹는 모습을 봐서 도저히 그냥 지나칠 수가 없었어요ㅋㅋㅋ 곳곳에 이영자 사진이 ... 쌈밥은 바로 포기하고 차돌 삼합을 먹기로 했어요! 주말 저녁이었는데 웨이팅이 한 15분 정도 ㅠㅠ 테이블이 많아서 자리가 생각보다 금방금방 생기는 느낌! 들어가자마자 차돌 삼합 2인분을 주문했습니다. 차돌 삼합은 처음 먹어봤는데 진짜 맛있네요 ㅠㅠ 차돌 + 돌갓 김치 + 키조개 조합은 진짜... ㅋㅋㅋ 그리고 차돌도 차돌이지만 돌갓 김치, 깻잎, 명이나물 이런 장아찌들이 예술입니다! 하지만 한우라 그런..

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