Next.js

The React Framework for the web→React 기능을 기반으로 한 full-stack web application framework이다.

Next.js 실행npm run dev 를 통하여 next.js를 실행터미널에서 나오는 local host를 통하여 실행화면 접속layout.js가 웹페이지의 기본적인 골격을 구성합니다.

개발을 끝냈다 치고 우리가 만든 것을 사용자에게 배포는 어떻게 하는지 알아봅시다.개발자 도구에서 Network탭을 통해 resources를 확인 할 수 있는데, 이는 서버에서 클라이언트로 전송한 용량을 나타내는 것입니다.

하고 싶은 것은 웹을 소개하는 튜토리얼 사이트를 만들고 싶습니다.첫번째로 웹을 방문하면 welcome 메시지를 보여줄 것입니다.그 컨텐츠는 page.js가 리턴하는 값이 그 컨텐츠이기에 page.js를 수정해보지만 이 컨텐츠만으로는 안될 것입니다.

웹프레임워크에서 가장 중요한 개념 중 하나는 Routing입니다.Routing이 무엇인지 알기 전에 용어부터 정리해봅시다. Routing이라는 것은 path를 따라서 어떤 컨텐츠를 어떤 방식으로 보여줄 것인가를 결정하는 것을 Routing이라고 부릅니다.

Next.js를 사용하면 저절로 좋아지는 것이 하나 있습니다. 바로 Server Side Rendering입니다.React는 Javascript 기술이기 때문에 Js가 동작하지 않으면 페이지가 아예 rendering 되지 않습니다.

Next.js에서 이미지와 같은 정적인 컨텐츠를 사용하려면 어떻게 할까요?public이라는 폴더에 이미지와 같은 파일을 위치시키면 됩니다.Welcome페이지에 갖고오고 싶으면 img태그를 사용하면 됩니다.

Nextjs은 백엔드까지 동시에 제공하는 full stack framework입니다. Route Handlers를 사용하면 별도의 백엔드를 구축하지 않고 Nextjs API 서버까지 구축할 수 있습니다.백엔드를 구축하여 내용을 갖고와 동적으로 내용을 표시해봅시다.

구축한 백엔드로 글 목록을 동적으로 생성해 볼 것입니다.Next.js뿐만 아니라 React 18버전부터 이렇게 Server Component가 추가되었습니다.

Html이나 css버튼을 클릭하였을 때 나오는 읽기 기능을 구현해보겠습니다.app/read/id/page.js를 수정해보겠습니다.이 페이지는 사용자와 상호작용하지 않습니다.

생성 기능을 구현하기 위해서는 onSubmit과 같은 사용자와 상호작용하는 코드가 필요합니다. 이런 코드는 서버 쪽에서 실행할 수 없기 때문에 클라이언트 쪽으로 전송되어서 실행되야 합니다.

Create로 게시물 추가 시, 컨텐츠가 생성이 되어 db.json이 수정될 것입니다.URL로 잘 이동하는 것 또한 볼 수 있을텐데 웹페이지에는 추가가 되지 않았습니다.이 문제는 Cache와 관련되어 있습니다.

이번엔 update와 delete 기능을 구현하기 전에 사전작업을 할 예정입니다.글을 선택하고 있지 않은 상태에서는Update와 delete 버튼이 보이지 않는게 맞을 겁니다.반대로, 글을 선택하면 Update와 Delete버튼이 보여야할 것입니다.

글을 누르고 Update버튼을 누르면 404에러가 발생하는 상황입니다.

Delete를 누르면 글이 삭제가 되도록 코딩해보겠습니다.그러기 위해서는 Control.js에서 delete버튼 부분을 수정하면 될 것 입니다.

주소를 보면 localhost로 하드코딩되어 있는 것을 볼 수 있습니다. 개발할 때 사용하는 API와 실서버에서 사용하는 API 주소가 다를 수 있습니다. 즉, 별도로 관리하는 필요성이 생길 수 있습니다. 그럴 땐 무엇을 봐야할까요?바로 환경변수를 살펴보면 됩니다.