rhanziy

프로젝트에 간단하게 문의하기 기능을 넣기위해 nodemailer 라이브러리를 설치했다.https://nodemailer.com/  Nodemailer :: NodemailerNodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js users turn to by default. npm inodemailer.comnpm install nodemaileryarn add ..

https://www.npmjs.com/package/react-paginate react-paginate A ReactJS component that creates a pagination.. Latest version: 8.2.0, last published: a year ago. Start using react-paginate in your project by running `npm i react-paginate`. There are 577 other projects in the npm registry using react-paginate. www.npmjs.com 반응형 작업 하던 중, mui로 만든 전형적인 데스크탑 페이지네이션과 다른 ui가 필요해서 react-paginate 라이브러리를 통해 ..

const onSubmit = handleSubmit((data) => { router.push({ pathname: '/경로', query: { ...data }, }); }); const { query, ...router } = useRouter();const methods = useForm({ defaultValues: { productName: (query.productName as string) ?? undefined, storeName: (query.storeName as string) ?? undefined, },});검색버튼을 누르면 라우터 경로에 query를 붙여서 결과 리스트를 보여주는 페이지를 만들고있었다.하지만 새로고침을 하면 ur..

선택 최대 갯수 제한이 없었는데 2개로 제한하기위한 코드.! FormContext에서 제공하는 watch에 useState도 써보고 onChange={onChange}로 target.value 콘솔도 찍어보았지만 잘 안됐다. 여기서 알게된 mui select컴포넌트의 onChage 속성 특. One Two Three 최대 2개 {capacityOptions.map((text, i) => ( {text} ))} onChange={onChange} 로 코드를 짰는데 select가 정상적으로 안되는 것! onChange는 클릭이벤트에 대한 응답으로 menuItem을 호출하는데, mui select에서 기본으로 제공하는 handleMuiSelectOnChange를 써야 이벤트 버블링이 된다고~ const han..

기존 next.js 프로젝트를 로컬에 셋팅하는법! 1. 일단 터미널에서 작업폴더 경로로 들어간 후 프로젝트 클론받기.git clone 원격저장소 주소 2. git ignore에 의해 node modules폴더가 텅 비어있을테니 모듈 다운로드yarn install / npm install 3. 이 프로젝트는 관리자/사용자/점주 3가지 프로젝트가 한곳에 저장된 모노레포 구조로 되어있어서 nx를 전역에 설치해줘야한다.yarn global add nx@latest 4. .env파일 생성 및 api url 주소 설정 5. 서버 실행nx serve 어플리케이션이름   2024 //nx serve 프로젝트명zsh: command not found: nx 이 에러가 떠서 찾아봤더니npx 를 앞에 붙이라했다. 그리고 실..

Next.js에서는 server component, client component 2가지 종류의 component가 있다! 리액트에서 하던 방식대로 component를 그냥 만들면 server component임. component 만드는법 function 작명() { } return ( html ) 으로 사용 export default function Cart() { return ( Cart ) } function CartItem(){ return( 상품명 $40 1개 ) } 여기서는 CartItem이 server component 임. server component? html 상에 자바스크립트 기능 넣기 불가능(ex. onClick) useState, useEffect 사용 불가능 로딩..

첫번째 방법은 public 폴더 안에 이미지를 저장하고 로 불러오면 되는데, lazy loading, 사이즈 최적화, layout shift를 방지하기 위해 Image 컴포넌트를 import 해서 사용할 수도 있다 ! 그러기 위해선 이미지 경로를 무조건 import해와야 하는 조건이 있다. 사용은 태그 대신 로. src 경로를 일일이 import해 { } 안에 작성 단점 반복문 안에서 각각 다른 이미지를 불러와야하거나, 외부사이트에 있는 이미지를 넣을 때는 불편함. 외부이미지는 src="경로" 속성 외에 width={ }, height={ } 도 필요하고 그냥 이번거는 map으로 item 하나씩 불러오자. { item.map((e, i) => { return ( {e} ) }) }

Next.js 는 Vercel이 개발한 오픈소스 React프레임워크로 기본적으로 JSX문법을 사용한다. 서버사이드렌더링 위주의 풀스택 기반 프레임워크를 주력으로 성장하고있으며, React 만으로는 온전히 구현하지 못했던 API기능 및 서버컴포넌트를 통한 서버단 기능과 React 컴포넌트를 통한 클라이언트 기능을 통합 제공하는 프레임워크이다. 1. 프로젝트 시작하기 - 작업폴더 생성 후 터미널에 npx create-next-app@latest --experimental-app 입력 이것저것 제공되는 기능을 입맛에 맞게 방향키로 선택한다. 2. 프로젝트 실행하기 - 해당 작업폴더에서 터미널에 npm run dev 3. 프로젝트 구조 파일명 설명 page.js 메인페이지 layout.js page.js를 감싸..