지난번에 만든 게시판에 crud 기능을 구현해 게시글을 추가하고, 수정하고, 삭제할 수 있게 만들어 보았다. 라우트를 위와 같이 추가해서 글쓰기/수정/삭제마다 이동할 수 있게 한다. 글쓰기 export default async function Write() { return ( 글 쓰기 전송 ); } /write 경로로 가면 위와 같이 form에 글을 쓰고 action 속성에 지정해 준 경로로 POST 요청을 보내도록 했다. 요청을 받을 서버도 구현해야 하는데, 글 추가를 했을 때 데이터베이스에 바로 접근하도록 하면 위험하기 때문에 반드시 서버를 거쳐서 데이터베이스의 데이터를 추가하거나 변경/삭제할 수 있게 만들어야 한다. 서버를 위한 경로를 설정해주고 import { connectDB } from "@..
Next.js의 라우팅 방식에 대해 알아보고 실습으로 구현해보자. 라우팅 알아보기 라우트 정의 app 디렉토리 내에서 폴더를 생성하면 폴더명으로 라우트가 정의된다. 폴더 내에 새로운 폴더를 만들면 하위 경로를 만들 수 있다. 폴더 내에 page.js 파일을 만들면 해당 라우트 url의 페이지가 된다. 페이지와 레이아웃 페이지란 하나의 라우트를 통해서만 접근할 수 있는 고유한 UI를 말한다. page.js 파일에서 컴포넌트를 export하면 페이지를 정의할 수 있다. 레이아웃이란 여러 페이지에서 공유되는 공통된 UI를 말한다. 내브바 같은 것을 삽입할 때 유용하다. 사용자가 페이지를 이동해도 공통의 레이아웃은 재렌더링되지 않고, 상태를 보존한다. 레이아웃은 layout.js파일에서 컴포넌트를 export해..
Next.js란 리액트 애플리케이션에서 서버사이드렌더링(SSR)을 쉽게 구현할 수 있게 도와주는 프레임워크다. Next.js 왜 쓸까? 공식 홈페이지에서 내세우는 장점은 다음과 같다. 직관적인 페이지 기반 라우팅(동적 라우트 지원) 사전 렌더링, SSG/SSR 모두 페이지 단위 지원 더 빠른 페이지 로딩을 위한 자동 코드 분할 최적화된 프리페칭을 갖춘 클라이언트 사이드 라우팅 내장 CSS 및 SASS 지원, 모든 CSS-in-JS 라이브러리에 대한 지원 빠른 새로고침이 지원되는 개발환경 서버리스 Functions를 사용하여 API엔드포인트를 빌드 완전 확장 가능 Next.js의 특징 라우팅 app 폴더에서 새로운 폴더를 만들어서 url 경로를 지정할 수 있다. 폴더를 중첩해서 하위 경로를 지정할 수 있고..
Next.js 베타 문서 번역 프로젝트 GitHub - XionWCFM/Nextjs-docs-Korean-translation: 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. Contribute to XionWCFM/Nextjs-docs-Korean-translation development by creating an account on GitHub. github.com https://beta.nextjs.org/docs/data-fetching/api-routes 위 문서에 대한 번역을 진행합니다. Next.js 베타 문서 번역 프로젝트는 상단 깃허브에서 확인할 수 있습니다. 번역시점은 2023-05-03로 공..
Next.js 베타 문서 번역 프로젝트 GitHub - XionWCFM/Nextjs-docs-Korean-translation: 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. Contribute to XionWCFM/Nextjs-docs-Korean-translation development by creating an account on GitHub. github.com https://beta.nextjs.org/docs/api-reference/use-pathname 위 문서에 대한 번역을 진행합니다. Next.js 베타 문서 번역 프로젝트는 상단 깃허브에서 확인할 수 있습니다. 번역시점은 2023-05-03로..
Next.js 베타 문서 번역 프로젝트 GitHub - XionWCFM/Nextjs-docs-Korean-translation: 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. Contribute to XionWCFM/Nextjs-docs-Korean-translation development by creating an account on GitHub. github.com https://beta.nextjs.org/docs/api-reference/use-selected-layout-segments 위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-03로 공식문서의 추가적인 업데이트가 있을 수 있습니다...
Next.js 베타 문서 번역 프로젝트 GitHub - XionWCFM/Nextjs-docs-Korean-translation: 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. Contribute to XionWCFM/Nextjs-docs-Korean-translation development by creating an account on GitHub. github.com https://beta.nextjs.org/docs/api-reference/use-selected-layout-segment 위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-03로 공식문서의 추가적인 업데이트가 있을 수 있습니다. ..
Next.js 베타 문서 번역 프로젝트 GitHub - XionWCFM/Nextjs-docs-Korean-translation: 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다. Contribute to XionWCFM/Nextjs-docs-Korean-translation development by creating an account on GitHub. github.com https://beta.nextjs.org/docs/configuring/turbopack 이 글은 위 문서에 대한 번역입니다. Next.js 베타 문서 번역 프로젝트는 상단 깃허브에서 확인할 수 있습니다. 번역시점은 2023-05-03로 공식문..
