레이아웃
-
스벨트킷(SvelteKit) 레이아웃 정의하기 - 07SvelteKit 2024. 10. 5. 17:12
지금까지 우리는 라우팅을 다루면서 각 페이지를 독립적인 컴포넌트로 취급했습니다.하지만 애플리케이션을 개발할 때는 모든 페이지에 고정된 레이아웃을 정의하는 것이 흔합니다. 예를 들어, 상단에 헤더와 하단에 푸터를 배치하는 것과 같은 구조가 자주 사용됩니다. SvelteKit에서는 레이아웃을 정의하기 위해 +layout.svelte 파일을 생성할 수 있습니다.레이아웃 정의하기1단계: +layout.svelte 파일 생성우선, routes 폴더 안에 +layout.svelte 파일을 생성합니다. 이 파일이 기본 레이아웃 파일이 됩니다. 이 레이아웃 파일은 모든 페이지에 공통으로 적용됩니다.2단계: 슬롯 태그 사용하기이제 +layout.svelte 파일에 HTML 구조를 추가할 건데요, 여기에서 중요한 것은 s..
-
나만의 홈페이지 만들기-07 [마스터페이지&페이지Route]React 2022. 10. 4. 22:04
마스터페이지를 만들어서 내부의 컨텐츠 컴포넌트만 변경하기 위해 작업 Layout.js 를 추가한다. import React from 'react' import Navbar from 'react-bootstrap/Navbar'; import Container from 'react-bootstrap/Container'; export default function Layout(props) { return ( header {props.children} footer ) } props 파라미터를 이용해서 부모페이지 안쪽에 들어갈 자식 컴포넌트를 선언해준다. props.children 은 Layout tag 안에 들어올 컴포넌트를 말한다. 위처럼 부모 컴포넌트를 만들고 다른컴포넌트를 감싸주면 {getResult &&..
-
나만의 홈페이지 만들기-03 [부트스트랩]React 2022. 8. 31. 16:11
부트스트랩 공식사이트 React-Bootstrap 설치 The best way to consume React-Bootstrap is via the npm package which you can install with npm (or yarn if you prefer). 아래 처럼 터미널에서 설치를 한다. npm install react-bootstrap bootstrap Navbar 넣기 index.js 부트스트랩 css import 하기 // Importing the Bootstrap CSS import 'bootstrap/dist/css/bootstrap.min.css'; app.js 에 container 와 navbar 컴포넌트 임포트 import React from 'react'; import Co..