개발 일지 개발 일지

내일배움캠프에서 멘토링을 지행중에 멘토님께서 멘토님 회사에서 코딩테스트로 내는 문제를 알려주셨다. 문제 매 1분마다 실행되는 함수 생성 함수는 호출될때마다 온도 값이(num) 인풋된다 함수는 호출될때마다 지금까지 받은 온도의 평균 온도 값을 내보낸다. 호출은 무한으로 호출된다. 디비에 값 저장 불러오기 X 자바스크립트 또는 타입스크립트로 실행 setInterval로 실행되도 무관, 혹은 cronjob이 실행시킨다고 가정해도 무방 풀이 (() => { let count = 0; let num = 0; const thermometer = (temperature, count) => { num += temperature; let avg = num / count; console.log(`현재온도는 ${temper..

보통 카테고리에 따라 데이터를 필터링하여 fetch할때가 있는데 모든 카테고리 타입마다 useQuery를 만들어 데이터를 fethc하는것은 너무 비요율 적이다. 따라서 오늘은 타입에 따라 데이터를 refetch할 때 다른데이터를 fetch하는 방법을 써 보겠다 결론부터 말하자면 useQuery에 queryKey를 다르게 주면 해결된다. 기존 코드 const { data, isError, isLoading, refetch } = useQuery({ queryKey: ['queryKey'], queryFn: () => fetchData(), }); 이코드에서 배열로 주어진 queryKey에 두면쨰 요소로 변수를 넘겨주면 된다. const [stateType, setStateType] = useState() ..

현재 진행 중인 magic pos 프로젝트의 코딩 컨밴션을 작성해 보겠다 컴포넌트 파일은 파스칼 케이스로 작성 **e.g) ComponentsTest.tsx** 페이지명은 index**Page**.ts (끝에 Page명 표기) 일반 .ts 파일은 케밥 케이스로 작성 (ex. common.ts, date-helper.ts) app 폴더 하위 페이지 파일 이름은 케밥 케이스로 작성 .module.css 파일은 컴포넌트 이름과 동일하게 작성! e.g. Layout.module.css 컴포넌트 & 분리 **rafce** 스니펫 사용 const Component () => { return } export default Component;**파일 이름** 폴더 트리 project-root/ |📂 src/ | |📂 ..

지금 진행 중인 magic pos 프로젝트의 QA를 해보려고 한다. 자잘한 잔버그, 개선해야 할 부분을 중점적으로 작성해 보려 한다. 코드 리뷰는 다음기회에 해보겠다 1. 로그인 후 로그인 버튼이 보이는 문제 메인 페이지에서 로그인을 한 후에도 로그인 버튼이 보이고 있다. 2. 매출달력에 다음버튼이나 이전달 버튼을 누르면 이번달 매출이 계속 출력되는 문제 메출관리 페이지에서 다음달로 넘어가는 버튼과 이전달로 넘어가는 버튼을 클릭하면 전달, 다음달 매출이 보이는것이 아닌 이번달 매출이 한 번 출력된다. 두번 클릭하면 괜찮지만 한번클릭하면 이번달 매출이 뜬다. 3. 매출달력에 다음버튼이나 이전달 버튼을 누르면 데이터 로딩시 기본으로 출력되는 글자가 잠깐 보이는 문제 매출금액 로딩 시 매출금액이 없어요ㅠㅠ라는..

실시간으로 주문알림이 오면 오디오로 효과음을 줄려고 하였다. 그러나 다를 브라우저는 가능하지만 크롬은 정책으로 자동재생을 막아놓았다. 블로그를 뒤지면 우회하는법이 쉬원치 않아서 오늘은 내가 해결한 방법을 소개하겠다. 먼저 mp3파일을 public폴더에 넣는다. 그리고 그냥 import해서 가져오면 에러가 뜨기 때문에 라이브러리를 하나 다운 받는다. yarn add file-loader 그다음 next-config.js를 수정해준다. next-config.js const nextConfig = { experimental: { appDir: true, }, images: { remotePatterns: [ { protocol: 'https', hostname: '**', }, ], }, webpack: (c..

zustand에서는 store함수안에 state와 action을 같이 사용한다. import { create } from 'zustand'; interface countType { number: number } const useCountStore = create(set => ({ number: 0, plusNumber: (value) => set((state) => ({ number: state.number + value })) miunsNumber: (value) => set((state) => ({ number: state.number - value })) } export default useCountStore 이런식으로 하나의 store안에 state와 action을 선언한다. 단점은 코드가 길어지..

컴포넌트안에있는 DOM을 useRef에 참조하고 싶을때 보통은 forwordRef를 사용한다. 그러나 배열로 담고 싶읖때 는 좀 까도롭다 이유는 forwordRef로 감싼 컴포넌트에서 useRef를 props로 넘겨주면 current를 인식하지 못한다. 일번 자바스크립트면 상관이 없지만 우리 프로젝트는 타입스크립트이기에 타입에러가 계속뜬다 하나의 ref만 참조하면 상관이 없지만 여러개의 DOM을 useRef에 배열로 저장하려면 이 타입에러 때문에 많이 까다로워 진다. 그래서 약간의 편법을 사용해서 useRef를 전역 state로 관리하여 문제를 해결하였다 이 프로젝트에서는 전역 state관리를 zustand를 사용하였다. 먼저 커스텀 컴포넌트 안에서 useRef를 선언하고 useRef로 DOM을 참조한다..

QR