개발 일지 개발 일지

프로젝트에ㅓ eslint를 적용시켜 개발할 때 어쩔 수 없이 eslint에러를 무시해야 할때가 가끔 있다 나의 경우는 React Hook useEffect has a missing dependency: 'setIsModal'. Either include it or remove the dependency array 이 에럭가 떴는데 이에러는 useEffect에서 사용되는 함수나 변수들을 모두 의존성배열로 넣으라는 의미이다 useEffect사용시 작성하는 변수나 함수들들을 모두 의존성배열로 넣어서 사용하는경우는 없기에 위 에러를 무시하려 한다. vscode에 서 eslint에러가 난 곳에 커서를 가져다 놓으면 에러창이 뜨는데 에러창 하단에 Quick Fix...부분을 클릭한다. 클릭 후 네개의 선택지가 나오..

typescript로 next.js프로젝트를 하는 중 위에러가 떴다 이에러는 무슨에러일까? 원인 useRef에 DOM요소를 참조할 때 map으로 만든 list의 DOM을 참조해야 했다 그과정에서 위에러가 떴다. 번역 요소는 'number' 유형의 표현을 'RefObject' 유형의 색인에 사용할 수 없기 때문에 암묵적으로 'any' 유형을 가집니다. 'RefObject' 유형에서 'number' 유형의 매개 변수가 있는 인덱스 서명을 찾을 수 없습니다 해결 먼저 useRef에 여러개의 DOM을 참조하려면 배열로 참조해야한다. const itemOrderListItemSpanRef = useRef([]) itemOrderListItemSpanRef.current[i] = el}>{x} html테그 속성 중..

헤더나 푸터같은 공통된 layout들은 보통 페이지 마다 작성하는게 아니라 하나의 컴포넌트를 최상단 컴포던트에 감싼다 그러나 특정페이지 예를들어 로그인 페이지같은 페이지들은 layout을 제외 시킬때가 종종 있다. React에서는 outlet 을 사용하면 되고 page Router에서는 _app.tsx에서 router라는 props를 가지고 제외하면 되지만 appRouter는 Router Grop을 이용하여 제외한다. 보통 app router에서는 layout.tsx파일을 통해 layout을 만든다. app폴더에 있는 layout.tsx.파일은 전체 라우팅에 관여하는 layout이다 만약 layout을 특정페이지에서 변경할 필요가 없다면 이곳에 {children}을 감싸서 layout을 적용시킬 수 있다..

프로젝트 소개 키오스크를 사용하고 싶지만 기계를 갖다놓는것을 부담스러워 하는 자영업 사장님들을 위해 개발하는 키오스크 웹엡 사용 방법 사업자 등록증이 있는 유저가 어드민 페이지에서 가게의 매뉴들을 등록하면 고객에게 보여지는 키오스크 페이지가 생성되고 고객은 QR코드로 페이지에 접속 후 매뉴를 주문한다. 기능 소개 우선순위 p0 ~p4 후순의 고객 / 관리자 구분 p0 1. 마케팅 페이지 (소개 페이지) /관리자 2. 포장 / 매장 선택 / 고객 3. 매뉴 탐색 기능 / 고객 4. 주문 기능 (선 결제) / 고객 5. 장바구니 기능 (여러가지를 담은 뒤 한번에 주문) / 고객 6. 매뉴 등록 (추천 매뉴, 매뉴 명 사진 등) /관리자 7. 등록 된 매뉴 수정 (품절 가격 등) /관리자 8. 매뉴 주문번호 ..

`이번 프로젝트는 next.js 에 yarn berry를 사용하여 프로젝트를 진행하게 되어서 next.js에 yarn berry를 초기세팅하는법을 포스팅 하겠다. yarn berry 사용 이유 npm은 node_nodules폴더안에 모든 라이브러리들이 담겨있고 node_nodules폴더에 의존한다. 중복되는 파일, 유령의존성등 수많은 단점들이 있기에 새로운 대안으로 yarn berry가 나왔다. 그리고 일반적인 npm이나 yarn v1로 생성된 프로젝트 보다 거의 8배정도 용량이 줄어는다. next.js프로젝트에 yarn berry적용하기 먼저 next.js프로젝트를 만들어 준다. yarn create next-app --typescript 프로젝트를 만들려는 디렉토리경로에 위명령어를 입력하여 next프..

엘리트 옥션 ⭐️ 자신의 중고 물품을 경매형식으로 판매하는 사이트 📆 프로젝트 기간: 2023. 12. 26 ~ 2024. 01. 03 팀 소개 이동탁 : https://tak-web-front.tistory.com/ 김은비 : https://velog.io/@eunbi/posts 이다원 : https://velog.io/@dawnrose 권경열 : https://velog.io/@yeol10 프로젝트 소개 판매자는 경매하고 싶은 물건을 등록하고 등록 시 내용, 경매 기간, 입찰 하한가를 설정할 수 있습니다. 구매자는 경매 게시클에 입찰가를 입력할 수 있으며 이는 하한가보다 높을 떄 입력할 수 있습니다. 경매 기간 시작 전과 끝난 후에는 입찰을 할 수 없으며 남은 시간으로 표시됩니다. 사용자는 상품에 대..

react에서 header와 footer같은 공통 layout을 적용하려면 Router.js파일에서 바깥에 와 컴포넌트를 작성하면 되는데 next.js는 파일기반 페이지라우팅이기 때문에 Route를 따로 작성하지 않는다. next.js에서 공통되는 layout을 작성하는 방법을 알아보겠다. Layout.jsx Layout.jsx파일을 생성하여 header와 footer컴포넌트를 포함하는 컴포넌트를 생성한다. import React, { Fragment } from "react"; import MainHeader from "./MainHeader"; import MainFooter from "./MainFooter"; function Layout({ children }) { return ( {childre..

next.js 란? next.js는 react기반 라이브러리이다. 기존 react의 단점을 보완하여 만들어진 라이브러리 이다, react는 Single Page Application (SPA)으로 하나의 html안에 자바스크립트로 페이지를 그려주는 라이브러리 이다. 하나의 html 만 존재하기 때문에 페이지를 이동할 때 깜빡거림 없이 자연스럽게 이동하여 최적화된 UX를 제공해 준다. 그러나 하나의 HTML만 존재하기에 SEO에 취약하고 CSR을 지원하기 때문에 초기 렌더링 속도가 느리다. 이러한 단점을 개선하여 나온 라이브러리가 바로 NEXT.JS이다. NEXT.JS는 SSR을 지원하여 react의 단점을 극복하였기 때문에 많은 곳에 사용되고 있다. 오늘은 next.js의 기능 중 파일기반 라우팅(pag..