본문 바로가기

프론트엔드로 가는 길121

EmailJS 오류 시키는 대로 했더니 뭐가 안되노 const ContactForm = () => { const formRef = useRef(null); const sendEmail = (e: { preventDefault: () => void }) => { e.preventDefault(); emailjs.sendForm("***", "***", form.current, "***").then( (result) => { alert("성공적으로 이메일이 전송되었습니다."); form.current.reset(); }, (error) => { console.log(error.text); alert("이메일이 전송이 실패되었습니다."); } ); }; return ( 답변 받으실 이메일 문의 제목 문의 내용 ); }; expo.. 2023. 11. 6.
4. NextJs - 기본 내보내기(default export) export default function Detail() { return ( 상세페이지임 글제목 글내용 ); } 오류가 떴다. 이유는 명명된 내보내기(named export)로, 페이지로 사용될 수 없다. const Detail = () => { return Detail Page Content; }; export default Detail; 페이지 컴포넌트는 반드시 기본 내보내기(default export)로 내보내야 한다. 명명된 내보내기(named export)를 사용하여 컴포넌트를 다른 곳에서 재사용할 수 있다. 페이지가 아니라 단순한 React 컴포넌트로 사용할 때에는 두 번째 형식을 사용할 수 있다. 2023. 10. 24.
3. Next.js server component vs client component 1) [server component ] page.js, layout.js에 대충 만드는 컴포넌트들은 전부 server component 장점 : 페이지 로드시 자바스크립트가 별로 필요가 없어서 빠름 단점 : html 안에 자바스크립트를 못 넣는다. useState, useEffect, onClick 이런거 사용불가능 2) [client component] 장점 : html 안에 자바스크립트 맘대로 넣어서 기능개발 가능 단점 : 쓸데없는 자바스크립트로 인해 페이지 용량도 커지고 페이지 로딩속도도 약간 느려짐 3) 그러면 Next.js에서 client component는 어떻게 만드냐 *use client* 컴포넌트 만들 때 페이지 맨 위에 'use client' 라는 코드를 넣으면 그 밑에 있는 모든 컴.. 2023. 10. 19.
2. Next.js 이미지 최적화 1. 최적화 방법 lazy loading 사이즈 최적화 layout shift방지 *layout shift: 이미지 로딩이 늦게 돼서 레이아웃이 조금 밀려나는 현상 1) image import (1) 로컬에서의 이미지 import Image from 'next/image' (2) 외부에서의 이미지 ‹Image src="https://s3.amazonaws.com/ my-bucket/profile.png" width={} height={}/> - 외부 경로에서 가지고 올 땐 무조건 width와 height를 가지고 와야한다 - 그리고 https://beta.nextjs.org/docs/optimizing/images#remote-images 이 링크처럼 설정이 필요 2023. 10. 19.

티스토리툴바