Next/font Next 13
https://nextjs.org/docs/api-reference/next/font
next/font 기능이 추가되어서 사용해보았다.
공식 홈페이지에 들어가보면 가이드라인이 있는데,
원하고자하는 폰트를 불러오고 inter.style로 입히면 된다.
구글 폰트로 수정이 되었다.
useRouter Next 13
useRouter도 next/navigation에서 불러오는 형식으로 대체되었다.
예전에는 Query나 pathName을 활용해서 다양하게 활용했는데
여러 깃헙들을 찾아보니 navigate처럼 심플하게 사용하는 경우가 많았다.
API
pages 폴더 안에 api라는 폴더를 만들고
파일을 만들면 기존의 폴더기반으로 라우팅 되던 것과 다르게 작동한다.
바로 React 컴포넌트를 내보내지 않는다.
api 라우트에서는 그런 작업을 수행하지않고 함수를 하나 생성한다.
GET 요청만을 처리할 수 없으며, HTML 코드를 반환하지 않아도 된다.
여기서 작성한 코드는 클라이언트 측에 도달하지 않는다.
또한 응답은 HTML이 아닌 JSON 형식 데이터이다.
API 라우트 방법
프론트엔드 애플리케이션에서는 데이터베이스로 전달해선 안된다.
컴포넌트에 데이터베이스로 전달하는 JS 코드를 추가하는 것은 불안하다.
또한 클라이언트에 데이터베이스 코드를 노출하면 보안에 취약하다.
그래서 우리는 프론트엔드 사용자 입력란에 fetching을 한다.
버튼을 클릭하면 API 라우트에 요청을 전송하여 데이터베이스로 연결한다.
이렇게하면 작성한 코드가 프론트엔드로 노출되지 않는다.
use client Next 13
"x" is not allowed in Server Components.
혹은 client 관련을 사용한다면 상단에 "use client" 써야한다.
Next 13부터는 SSR이 default로 잡혀있어서 client 기반기술을 사용한다면 필시적으로 적어줘야한다.
--
useRef 타입 이슈
useRef를 사용하여 input 값을 가져오려고했는데 오류가 났다.
참고하여 해결하였다.
기본값에 null 할당하고 각 HTML 맞는 값을 할당했다.
https://driip.me/7126d5d5-1937-44a8-98ed-f9065a7c35b5
Form onSubmit 타입 설정
ts에서 알려주는 타입을 적어 실행하였더니 오류가 발생하였다.
위 사이트를 참고하여 타입을 수정했더니 완료 되었다.
https://www.kindacode.com/article/react-typescript-handling-form-onsubmit-event/
Null 값 처리
const enteredEmail = emailInputRef.current.value;
오류가 발생하였다.
const enteredEmail = emailInputRef.current?.value;로 해결하였다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
데이터 설정 기준
const newFeedback = {
id: new Date().toISOString(),//완벽한 아이디는 아니다. 사
email: email,
text: feedbackText,
};
두개의 요청을 전달하고 동시에 처리하니 좋은 아이디는 아니다.
심플하고 부하를 주지 않아야한다.
fs.readFileSync() 오류
const data = JSON.parse(fileData.toString("utf-8"));toString 으로 해결하였다.
참고 https://webruden.tistory.com/946
form 범위
form 범위를 적게하여서 onSubmit이 올바르게 작동하지않았다.
그래서 form 범위를 맞추어서 fetch 하였다.
이런 오류가 떴다. 많은 것들을 검색해도 잘몰라서 하나씩 뜯어보기로 했다.
path.join
경로를 합쳐서 받는다.
https://www.w3schools.com/nodejs/met_path_join.asp
process.cwd()
절대경로
https://inpa.tistory.com/342
readFile vs readFileSync
readfile은 동기
readfileSync은 비동기이다.
https://webruden.tistory.com/947
오류 해결
filedata가 빈값으로 나와서 parse이 안되었다.
처음에는 readFileSync의 역할을 읽어준다는 정도만 알았었다.
이 메소드의 역할은 찾아보니 기존의 파일을 불러주는 역할이다.
그래서 이 기존의 데이터베이스에다가 추가해주고 넣어주는 식으로 불러오는데,
기존의 파일이 비어있어서 빈 내용이 와서 오류가 떴었다.
feedback.json을 채워주는 방법으로 수정하여 해결하였다.
API route
프로젝트마다 별도의 api 구축하지않아도 필요로 하는 API 라우트 NEXT.JS 프로젝트에 추가하는 것으로 구현할 수 있다.
사전렌더링 페이지에서 API 라우트 이용하기
외부 API에서는 fetch로 받아오면 되지만
getStaticProps나 getServerSideProps에 자체 api를 사용할 때는 fetch 함수를 사용하면 안된다.
이 모든게 한 프로젝트 서버에서 처리하므로 HTTP 요청을 보내는 것보다, 직접 실행해서
데이터 값을 가져오는 것이 효율적이다.
그러면 불필요한 HTTP 요청 없이 부드럽게 돌아간다.
동적 API 라우트 생성하기
페이지와 마찬가지로 폴더를 생성하고, 대괄호를 씌워준 파일을 생성했다.
/feedback/[feedbackid] 로 나오는 걸 희망해서 작성하였더니 생각처럼 잘나왔다.
req.query 값을 활용하여 작성만 해주면 된다.
getStaticProps -> use 사용하여 SSG하기
12까지 getStaticProps 을 사용했었다
13버전부터는 use를 사용하여 ssg를 한다.
코드 작성
결과값이 생각처럼 잘나왔고,
소스코드에도 포함되어있었다.
https://velog.io/@hang_kem_0531/Next.js-13%EC%9D%B4-%EB%82%98%EC%99%80%EB%B2%84%EB%A0%B8%EB%8B%A4
참고하여 작성하였다.
onClick 이벤트에 함수를 할당하니 오류가 났다.
오류 내용을 읽어보니 mouseevent 문제인거 같아서 해결하였다.
찾아보니 bind를 이용해서도 가능하다.
fs 오류
SSG일때 Node.js를 사용하였는데 이후에 use client 사용해서 문제가 생겼다.
