감자튀김 공장🍟

DOM 이란? DOM은 Document Object Model의 약어이다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. DOM의 문제점 DOM은 동적UI에 최적화되어 있지 않다. HTML은 자체적으로 정적이며 자바스크립트를 사용하여 이를 동적으로 만든다. DOM 자체는 빠르다. 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 하는데 이 과정에서 시간이 오래 걸리는 것이다. 해결법 DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그리게 되는데, 계속하여 페이지를 업데이트를 하는 것이 아니라 DOM을 최소한으로..

Life Cycle method 라이프 사이클 메서드 종류는 총 9가지 이다. Will이 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다. 라이프 사이클은 마운트, 업데이트, 언마운트 세 가지의 카테고리로 나눈다. 마운트(Mount) DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트(mount)라고 한다. 마운트할 때 호출하는 메서드 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps props에 있는 값을 state에 넣을 때 사용하는 메서드 컴포넌트가 마운트될 때와 업데이트될 때 호출 render 우리가 준비한 UI를 렌더링하는 메서드 ..

사진이 너무 많아서 하나하나 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을 하는 단계가 매우 힘들었다. 이..

폴더 구조 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에서 변경이 이루어졌다. 수량 조절 버튼(+/-)을 두 번..

코드를 짜다가 이런 오류가 떴다. 먼저 finalRes를 살펴보자면 finalRes = { "0": { // 객체 배열 index 값 "Id": 1, // Menu DB에 저장되어 있는 제품 Id "Name": "Hot Latte", "Price": 3700, "Quantity": 2, }, "1": { "Id": 14, "Name": "Lemon Ade", "Price": 3800, "Quantity": 5, }, } 이런 식으로 json 객체가 finalRes를 이루고 있다. 배열은 map()으로 출력이 되지만 객체는 map()으로 출력이 되지 않아 TypeError: Cannot convert object to primitive value 라는 오류가 뜬 것이다. 다른 블로그에서는 JSON.stri..