비전공 개발자

상품 : 쓰리엠 이어플러그 팬시네온 리필 설명 : 쓰리엠에서 판매하는 이어플러그입니다. 잘때 가끔 시끄러울때가 있는데 그때 착용하는 이어플러그입니다. 보통 주황색 이어플러그가 유명한데 팬시네온 이어플러그는 제질이 좀 달라요! 다른 이어플러그보다 훨씬 더 부드러워서 잘때 껴도 부담이 전혀 없습니다. 이물감 때문에 다른 이어플러그가 불편하신 분들에게 추천드려요. 구매 사이트 : 쿠팡 (https://www.coupang.com/vp/products/144931277?vendorItemId=4033852467&isAddedCart=) 가격 : (6쌍 기준) 4630원 만족도 : ★★★★★

index.js에서는 두개의 css 파일인 textField.css, button.css를 import한다. 두 css 파일 모두 다른 모듈에서도 공통적으로 사용하기 때문에 index.js에서 import 하였다. 기본적인 스타일만 지정하였고 크기는 rem 단위를 이용하여 정의하였다. rem은 root element에서 설정한 크기를 기준으로 몇배인가를 의미하는 단위이다. index.css에서 960px보다 큰 화면에서는 font-size를 100%(16px)로 설정하였고 960px보다 작은 화면에서는 80%(12.8px)로 정의하였다. 예를들어 font-size를 4rem으로 했다면 큰 화면에서는 64px 작은 화면에서는 51.2px로 나타내게 된다. 크기 단위를 px로 하면 화면 크기와 상관없이 같은..

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

상품 : 쿠팡 브랜드 - 탐사수 설명 : 쿠팡에서 자체 브랜드로 판매중인 생수입니다. 정수기 대신 생수를 사먹는데, 이번에 탐사수를 구매했습니다. 다른 2L 짜리 생수들은 로켓 배송이 안되는데 탐사수는 로켓 배송이 되네요! 가격도 삼다수에 비하면 거의 1/3 가격입니다. 2L 12통이 7000원도 안된다니, 너무 싸서 문제 있을까 걱정했는데 깔끔하네요! 로켓 배송으로 물 구매할때는 딱일듯 합니다. 다른 곳에서 물 구매하면 먼지가 묻거나 찌그러져왔는데 이번엔 잘 도착해서 잘 산거 같아요. 구매 사이트 : 쿠팡 (https://www.coupang.com/vp/products/27613130?vendorItemId=3213757282&isAddedCart=) 가격 : (2L 12통 기준) 6830원 만족도 ..

상품 : 더자카 간편 욕실 거름망 화이트 Y217LCCF048 설명 : 화장실 배수구에 부착하여 머리카락을 걸러주는 욕실 거름망입니다. 욕실에 배수구에 구멍이 너무 커서 ㅠㅠ 머리카락이 그대로 다 들어가는거 같아서 항상 사용하는 거름망입니다. 구매 사이트 : 쿠팡 (https://www.coupang.com/vp/products/19198605?itemId=77029208&vendorItemId=5393423941&sourceType=CATEGORY&categoryId=419668&isAddedCart=) 가격 : (10장기준) 5900원 만족도 : ★★★★☆

다음으로는 프로젝트 배포와 관련된 설정이다. 이 프로젝트는 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를 이용..

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 - 샐랩의 소개를 확인할..