잠시만 기다려 주세요.
npx create-next-app@latest . 명령어로 설치하며, TypeScript, ESLint, Tailwind, SRC 디렉토리, 앱 라우터 사용 여부를 설정합니다. 🛠️app 디렉토리를 기반으로 하며, 디렉토리 구조와 파일 이름에 따라 라우트가 자동으로 결정됩니다. 📁npm run dev 명령어로 시작하며, 기본적으로 3000번 포트에서 구동됩니다. 🚀page.tsx는 페이지 내용을 정의하고, layout.tsx는 공통 레이아웃을 정의하며, 최소 한 개의 layout.tsx 파일이 필수입니다. 📄app 폴더는 실제 주소의 루트(/)에 대응하며, page.tsx 내용은 layout.tsx의 children으로 렌더링됩니다. 🏠app 폴더 하위에 폴더를 생성하고 그 안에 page.tsx 파일을 두는 방식으로 정의됩니다 (예: app/login/page.tsx는 /login 경로). ➕app/login/sub/page.tsx는 /login/sub 경로). 🌲[]를 사용하여 폴더 이름을 지정하여 동적인 세그먼트를 처리합니다 (예: app/posts/[id]/page.tsx는 /posts/1, /posts/2 등을 처리). 🧩page.tsx 컴포넌트의 속성에서 구조 분해 할당으로 가져올 수 있으며, 함수는 로 선언해야 합니다. 💡paramsasync[...]를 사용하여 폴더 이름을 지정하여 일치하는 모든 하위 세그먼트를 처리합니다 (예: app/docs/[...slug]/page.tsx는 /docs/a, /docs/a/b 등을 처리). 🎣params 속성에서 배열 형태로 가져올 수 있습니다. 📝_를 붙여 외부 접근을 차단하고 라우트 세그먼트로 인식되지 않게 합니다. 🔒()를 사용하여 폴더를 생성하여 라우트들을 그룹화하며, 실제 URL 경로에는 영향을 주지 않고 관리 용도로 사용됩니다. 🗂️Recommanded Videos
2024. 8. 17.
2024. 3. 1.
2025. 2. 28.
2025. 7. 8.
2024. 10. 25.
2024. 12. 24.