TIL

client side rendering

ex) 댓글

댓글 작성하면 새로고침 없이 바로 db에 반영됨

db에 저장하는 방법이 확실치 않다면..

만약 데이터가 많이졌을때 CRUD가 원활이 이루어진다면 잘된것

어려울거같으면 다른 document로 옮기기

원하는 것만 가져오기

몽고디비에서 원하는거만 가져오고 싶으면 .find()를 쓰면 된다.

db.collection().find()

응용

댓글 작성자이름?

• 댓글 document에 작성자 이름을 같이 저장하자

바로 보여주기

• POST요청 성공시 서버에서 댓글을 다시 보내주면됨(.then())이거 사용해서..

로딩창

page.js옆에 loading.js를 생성해서 로딩창을 만들어둘 수 있다.

에러창

error.js를 사용하면 page.js에서 에러가 났을때 error.js를 보여준다.

단, 에러 컴포넌트는 무조건 클라이언트 컴포넌트이어야 한다

'use client'

export default function Error({error, reset}){
  return (
    <div>
      <h4>오 이런 에러남</h4>
			// 버튼을 누르면 다시 새로고침 하도록 reset 함수를 쓸 수 있음
      <button onClick={()=>{ reset() }}>다시시도</button>
    </div>
  )
}

특징

• 에러난 부분만 에러 페이지로 만들 수 있다. (다른 ui는 살아있어서 유저가 좋아함)
• error.js, loading.js가 없으면 상위폴더로 올라가서 error.js를 찾는다 즉 가장 상위인 app디렉토리에 error.js를 만들어 놓으면 더 좋다
• layout.js는 error.js가 관여를 못하느데 이럴때는 global-error.js를 만들면된다 혹은 더 상위 폴더에 error.js를 만들면 된다.

404페이지

not-found.js로 파일을 만들면 된다.

예를들어 서버에서 받아온 결과가 없을때 404페이지로 유저를 보낼텐데

if(result === null){
	return notFound()
}

이렇게 함수를 호출하면 된다

특징

• 역시 appdir에 넣어놓으면 아주 편리하다