폴리프레임

NextJS는 라우팅폴더와 파일규칙외에는 프로젝트 파일 구성및 배치에 대하여는 관여하지 않습니다. 여기서는 프로젝트을 구성하는데 이용 할 수 있는 몇가지 기본요소와 특징을 살펴봅니다. 1. 안전한 코로케이션 - app 디랙토리안에, 중첩폴더 형태로 계층 구조를 설계합니다. - 각각의 폴더명은 URL path에서 연결된 하나의 라우터 부문입니다. - 라우터 구조가 폴더명을 통하여 설정되어도, 하나의 page.js 또는 route.js 파일이 없으면 공개적으로 접근 할 수 없습니다. - 라우터가 접근되면, page.js 또는 route.js 파일 전체가 아니고, 내용만 전달되는 것입니다. - 따라서 프로젝트 파일들이 route 부문에 함께 있어도, 노출되지 않고 안전하다는 것입니다. 이 것이 page Dir..

Next.js 2023. 6. 5. 13:52

NextJS는 pages 디렉토리와 app 디랙토리 둘다에서 작동하도록, version 13으로 업그레이드를 권장하고 있으며, 점진적으로 기존의 개발환경은 pages 에서 app 중심으로 바뀌어 갈 것을 예고하고 있습니다. 이후 버젼에서는 pages 디랙토리는 디폴트 환경이 아닙니다. - App Route는 app 이라는 새로운 디랙토리안에서 작동합니다. - App Route는 shared layouts, nested routing, loading states, error handling 등을 지원하는 React Server Components 위에 설계되었으며, 따라서 Server Side Randering이 디폴트입니다. - App Router는 Page Router 보다 우선합니다. ( 이전 버젼의..

Next.js 2023. 6. 5. 12:22

1. ( ) - Route Group - (폴더이름) 형태로 사용 함. - URL path에는 영향을 미치지 않음. - 동일한 유형의 site section, intent, team을 묶을 때 유용함. 2. [ ] - Dynamic Routes - [폴더이름] 형태로 사용 함 ( 폴더이름과 같이 함- [id] 또는 [slug] ) - URL의 파라미터(params)로 넘어오는 동적 데이터를 이용하여 경로를 생성하는 경우 사용합니다. - NextJs에서는 Dynamic Segments라고 하며, params props로 layout, page, route, generateMetadata 함수로 보냅니다. - 추가 이해를 위해 링크를 첨부합니다. https://nextjs.org/docs/app/buildi..

Next.js 2023. 6. 5. 10:41

Next.JS 자동 설치를 선택하면 " No" 또는 "Yes" 을 선택해야 하는 항목들이 있습니다. 관련하여 링크 또는 간단 요약을 첨부합니다. > npx create-next-app@latest ./ √ Would you like to use TypeScript with this project? ... No / Yes √ Would you like to use ESLint with this project? ... No / Yes √ Would you like to use Tailwind CSS with this project? ... No / Yes √ Would you like to use `src/` directory with this project? ... No / Yes √ Use App Rou..

Next.js 2023. 6. 5. 00:29

SPA( Single Page Application )의 혁신적인 REACT의 설치 명령인 npx create-react-app 은 현재 react 공식 홈페이지에서도 사용치 않고, 프레임웍 이용을 권장합니다. REACT팀과 협업 중이라는 Vercel의 Next.js가 대표적인 추천 프레임웍 입니다. Next.js의 설치는 npx create-next-app 으로 "next" 라는 단어의 변화가 새로운 웹 프로그래밍의 질서를 세웁니다. Next.js 13.4 버전 설치 1. 시스템은 Node.js 16.8 이후 버젼, React 18.2+ 이상을 추천합니다. 2. 자동 설치 create-next-app은 입력하는 프로젝트 이름으로 폴더를 생성하고, 필요한 종속 항목을 설치합니다. > npx create-..

Next.js 2023. 6. 4. 22:20