감자튀김 공장🍟

큐의 구조 큐의 특징 큐는 뒤에서 새로운 데이터가 추가되고 앞에서 데이터가 하나씩 삭제되는 구조를 가지고 있다. FIFO(First-In First-Out): 먼저 들어온 데이터가 먼저 나가는 구조이다 A -> B -> C -> D의 순서로 큐에 삽입되었을 때 삭제 순서는 A -> B -> C -> D 이다. 큐에서 삽입이 일어나는 곳을 후단(Rear)라고 하며 삭제가 일어나는 곳을 전단(Front)라 한다. 스택과 다른 점은 삽입과 삭제가 다른 쪽에서 일어난다는 점이다. 큐의 연산 push(): 큐에 원소를 추가(rear) pop(): 큐에 있는 원소를 삭제(front) front(): 큐 제일 앞에 있는 원소를 반환 back(): 큐 제일 뒤에 있는 원소를 반환 empty(): 큐가 비어 있으면 tr..

스택의 구조 스택의 특징 스택의 입출력은 맨 위에서만 일어나고 스택의 중간에서는 데이터를 삭제할 수 없다. LIFO (Last-In-Fisrt-Out)의 형태를 가지고 있다. A -> B -> C -> D의 순서로 스택에 삽입되었을 경우 삭제 순서는 D -> C -> B -> A가 된다. 스택의 가장 위를 top이라고 하며 top 에서 삽입과 삭제가 이루어진다. 스택에 요소가 하나도 없을 때 그러한 스택을 공백 스택(empty stack)이라고 한다. 스택의 연산 push: 스택에 새로운 원소를 삽입 pop: 스택의 top 원소를 제거하고 반환 empty: 스택이 비어있는지 검사 size: 스택의 크기 swap: 두 스택의 내용을 바꿈 top: top에 있는 원소를 반환 스택 구현 코드 #include ..

사진이 너무 많아서 하나하나 import 할 수 없어서 JSON 형식으로 이미지를 로드하고 싶었다. 따지고보니 경로 잘못써서 계속 사진이 안떴었던 것 같다ㅎㅎ,, jsonconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 절대 경로를 사용하기 위해서 package.json과 같은 위치에 jsonconfig.json 파일을 추가했다. Perk.json { "data" : [ { "name": "Ace in the Hole", "url": "images/survivorPerks/IconPerks_aceInTheHole.png" } ] } 이미지와 이미지 이름을 JSON 파일로 위와 같이 만들어 놓았다. Perk.js im..

(npm install --save styled-components 설치가 되어있다는 가정 하에 시작합니다!) 1. 먼저 src/styles/fonts 폴더를 생성한다. 2. fonts 폴더에 .woff 형식의 폰트를 저장한다. .ttf가 아니라 .woff 쓰는 이유는 ttf 파일보다 더 압축되어서 가볍다는 점 그래서 ttf보다 더 빠르게 로드된다. 3. App.css에 사용할 폰트를 @font-face를 통해 저장한다 @font-face { font-family: Nanum; src: url('./styles/fonts/Nanum.woff'); } @font-face { font-family: NanumSquare; src: url('./styles/fonts/NanumSquare.woff'); } 4..

원래 DB에 저장된 데이터들로 관리자 페이지 대시보드를 만들기로 했었는데 시간이 촉박한 점도 있었고, 데이터 마이닝까지 구현하기가 어려울 것 같아서 관리자 페이지는 포기하기로 했다. 근데 해당 얘기가 나오기 전에 먼저 axios로 데이터 연동해서 그래프로 출력하는 것을 미리 해놔서 그대로 날려버리기에는 아까워 블로그에 기록용으로 남겨놓는다. 일단 구매한 대쉬보드 템플릿에 최대한 맞춰서 수정했기 때문에 큰 도움이 될지는 모르겠다. 원래 하루 매출을 당일 기준으로 7일 정도 끊어서 보여주려고 했는데, DB 측이 준비가 안되어서 먼저 메뉴 가격을 가져와서 출력하는 걸 목표로 axios 연동을 준비했다. axios 연동해서 출력하는 부분은 금방 끝냈지만 setActiveItem을 하는 단계가 매우 힘들었다. 이..

프로젝트를 git에서 clone하고 npm install을 했더니 npm ERR! Cannot read property 'match' of undefined npm ERR! A complete log of this run can be found in: npm ERR! C:\파일 경로-debug.log' 이런 에러가 떠서 npm install, npm upgrade, npm install upgrade도 계속 같은 에러가 났다. 그래서 일단 1. package-lock.json 제거 2. node-modules 제거 3. npm install 실행했다. 나는 node-modules 만들기 전부터 에러가 생긴거여서 1번 -> 3번으로 실행했더니 install이 잘 됐다.

폴더 구조 src | |- component ||- Cart.js ||- FinalCart.js | |- pages ||-MenuList.js pages/MenuList.js import React, {useState, useEffect} from 'react'; import axios from 'axios'; import {useDispatch} from 'react-redux'; import {addCart} from '../store/actions'; function MenuList(props) { const [products, setProducts] = useState([]); const dispatch = useDispatch(); const list2 = []; useEffect(() => {..

폴더 구조 src | |- store | |- actions || ||- index.js | |- reducers | |- cartReducer.js |- index.js store/actions/index.js export const addCart = (item) => { return { type: 'ADD_ITEM', payload: item, }; }; export const deleteCart = (item) => { return { type: 'DELETE_ITEM', payload: item, }; }; export const increment = (item) => { return { type: 'INCREMENT', payload: item, }; }; export const decremen..

프론트 팀원들끼리 같이 antd 적용하여 UI를 꾸미고 있었는데 어느 정도 꾸미고 실행해보니까 갑자기 Warning: validateDOMNesting(...): cannot appear as a descendant of .라는 에러가 떴다. 먼저 수정 전 코드를 보자 Home.js import React from 'react'; import {Link} from 'react-router-dom'; import {Button} from 'antd-mobile'; import 'antd/dist/antd.css'; import 'antd-mobile/dist/antd-mobile.css'; function Home() { return ( 회원 비회원 ); } export default Home; 오류 메시..

저번의 문제는 Quantity 값을 변경하면 console 값에는 반영이 되어서 출력이 되는데 화면이 리렌더링 되지 않는 점이였다. 몇 번의 시행착오를 겪으면서 생긴 문제점들을 나열해보자면 화면에 바뀐 값이 리렌더링이 안돼서 useState로 값을 관리할려고 추가했더니 렌더링 무한루프에 빠졌다. 최종 금액 값이 리렌더링이되면 장바구니 배열의 수량도 같이 렌더링이 되어야하는데 둘 중에 하나만 리렌더링 된다. id: 3의 quantity를 3에서 5로 변경하고 id: 10의 quantity를 변경하면 id 마다 quantity가 변경되는 것이 아니라 한 값에서 변경이 이루어졌다. 즉, id: 10의 quantity가 뭐였던 id: 3의 마지막 값인 5에서 변경이 이루어졌다. 수량 조절 버튼(+/-)을 두 번..