TIL

import LoadingSpinner from '@/components/common/LoadingSpinner'; import styles from '@/components/menu-item/styles/menu-item-form.module.css'; import { MENU_CONFIRM } from '@/data/menu-item'; interface MenuItemModal { clickItemModalHide: () => void; addPending: boolean; uploadImagePending: boolean; } const AddItemButtonComponent = ({ clickItemModalHide, addPending, uploadImagePending }: MenuItem..

내배캠에서 튜터님이 온도계 문제가 있다고 풀어보라고 하셔서 뒤늦게 풀어봤다. 제한은 다음과 같다. // 매 1분마다 실행되는 함수 생성 // 함수는 호출될때마다 온도 값이(num) 인풋된다 // 함수는 호출될때마다 지금까지 받은 온도의 평균 온도 값을 내보낸다. // 호출은 무한으로 호출된다. // 디비에 값 저장 불러오기 X // 자바스크립트 또는 타입스크립트로 실행 // setInterval로 실행되도 무관, 혹은 cronjob이 실행시킨다고 가정해도 무방 풀이 // 타이머 let count = 0; let num = 0; const start = () => { // 온도 가져오는 함수 const getData = () => { return Math.random() * 100; } // 평균값 구하는..

NextJS는 기본적으로 이미지 최적화를 제공해준다. 여기서 기본적으로 한단계 더 최적화 할 수 있는 라이브러리를 nextJS에서 추천하고 있는데 그건 sharp다 설치방법은 다음과 같다 yarn add sharp npm install --save sharp 다른 코드를 수정할 필요없이 설치만 하게 되면 nextJS에서 제공하는 IMAGE 태그만 사용하면 자동으로 적용된다. 아래에선 image가 붙은게 적용전과 적용후다 여기서 blur 처리할 수 있는 placeholder가 있는데 현재 프로젝트에 적용하기 힘들어보이는게 있는데 좀 더 알아볼 필요가 있겠다.

기존에 drag and drop 작업이 잘 되고 있었는데, 브라우저 자체에서 드래그 중에 드래그 방지로 마우스 모양이 블락 표시 됐다. 작업 중엔 그렇게 거슬리지 않았고, 오히려 옮겨지거나 옮기는 객체를 css만 주면 되겠다 생각했었다. 근데 유저 피드백을 받았는데 유저 피드백 중에 그 마우스 모양 떄문에 제대로 옮겨지지만 안옮겨진 것 같은 기분이 든다는 피드백을 받았다. 여러가지를 찾아보다가 결국은 브라우저에서 막는거기 떄문에 e.preventDefault(); 를 넣으면 바로 해결이 된다.. 다만 여기서 문제되는 사항은 기존에 되던 기능인 줬던 클래스가 안빠지는 문제! // 드래그 중인 요소 위로 이동할 때 스타일 변경 const handleDragOver = (e: React.DragEvent) =..

css module에선 className이 2개 이상이 되거나, 조건부를 주기 위해서 복잡하거나 힘든 경우가 있다. clsx 라이브러리로 해결 가능 설치 npm install --save clsx yar add clsx 사용 방법 복수 className clsx를 사용하면 복수 클래스를 기존 html에 주듯이 쉽게 줄 수 있다. // -가 들어간 클래스는 해당형태로 표현할 수 있다. 조건 부 className 조건부로 className을 줘야할때 적용하는 법이다. 방법은 간단하다. 괄호 안에 스타일명을 주고, 조건을 넣어주면 된다

개요 입력폼 map 돌리는걸 생각 못하고 일단은 input값을 추가할때마다 span 태그로 감싸진 리스트에 추가하게끔 했다. 하지만 이 기능은 추가 버튼을 눌러야만 추가가 되다보니 입력만하고 넘어가는 경우가 생겼다. 그래서 UX적으로 여러개의 input값을 받을 수 있게끔 변환 작업을 했다. 1. input 입력값 인터페이스 타입 지정 export interface NewOptionDetailType { id: string; name: string; option_id: string; price: string | number; } 2. input 입력값 전역상태 선언 menuOptionDetail: { id: '', name: '', option_id: '', price: '', }, menuOptionD..

전역 상태 즉각 업데이트에서 문제를 겪었다가 짧은 코드인데, 나중에 또 까먹을 때 활용하기 좋아 기록한다. zustand나 useState가 즉시 업데이트되지 않는 이유는 React의 업데이트는 비동기적으로 처리되기 때문이다. useState 함수 호출은 컴포넌트의 상태를 변경하는 것을 예약(reserving)하는데, 이 예약된 상태 변경은 나중에 React가 업데이트를 수행할 때 일어난다. React는 성능을 향상시키기 위해 여러 상태 변경을 일괄 처리하고, 일괄 처리된 결과를 화면에 반영한다. 이 과정에서 비동기 처리가 사용되며, 업데이트는 다음 렌더링 사이클에서 반영된다고 한다. setMenuOptions([...menuOptions, { menu_id: addData[0].id }] as Menu..

프로젝트에서 drag and drop으로 위치 교체를 할게 필요해서 직접 구현하게 됐는데 구현한지는 좀 됐는데 에러 수정을 하면서 정리해두면 좋을거 같아 적는다 일단 버튼의 이벤트이다 dragStartHandler(e, idx)} onDragEnter={e => dragEnterHandler(e, idx)} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDragEnd={dropHandler} className={clsx(styles.draggable, { [styles.dragging]: isDragging, })} > 아래는 한번에 이벤트들이다. setIsDraging state는 드래그 될 때마다 이벤트를 인식해서 클래스를 줘서 뭐가 바뀌고..

중간발표 이후에 QA가 필요한거 같아 일단 내 눈에 보이는 것들을 한번 정리해볼려고한다. 로그인시 엔터로 로그인 안되는거 꼭 필요한건 아닌데 엔터로 늘 하던 버릇이 있어서 안되는게 조금 답답하게 느껴짐 메뉴 관리에서 메뉴 없음 뜨고 깜빡하고 메뉴 뜨는 에러 메뉴 없음이 디폴트 값이라 그런거 같은데 확인해봐야할거같음 메뉴 관리 없음 뜨고 메뉴가 있다면 카테고리가 선택 안됨 이부분도 코드를 한번 확인해봐야할 듯함 메뉴 등록, 옵션 등록에서 체크박스가 노출 default값 false 불편 기본값은 false 더라도 프론트에서 노출하는걸로 미리 check 하는게 좋을거 같다는 생각. 아니면 default를 true로 바꾸는 것도 생각해보면 좋을듯하다 메뉴 옵션 추가 디자인과 같게 이 부분은 코드 수정이 필요한데..