17. 매핑 전략 변경
- hibernate.ejb.naming_strategy
18. nullable = false : not null 추가
19. length = 10 : 길이 추가
20. 유니크 제약 조건 : @table(name="..", uniqueConstraints={@UniqueConstraint(name="...",columnNames={"...","..."})})
21. @GeneratedValue : 기본 키 생성 전략
22. @Id 매핑 가능한 타입 : 기본 , Wrapper, String, Date, BigDemical, BigInteger
23. IDENTITY 전략 : MySql , postgresql, SQL Server : AUTO_INCREMENT 가 있는 밴더 : @GeneratedValue(strategy=GenerationType.IDENTITY)
24. SEQUENCE 전략: 오라클, postgresql : @SequenceGenerator(name="...",sequenceName="...",initialValue=1,allocationSize=1) + @GeneratedValue(strategy=GenerationType.SEQUENCE,generator="...")
25. Table 전략 : 키생성 전용 테이블을 만들어 사용 : @TableGenerator(name="...",table="...",pkColumnValue="...",allocationSize=1) +@GeneratedValue(strategy=GenerationType.TALBE,generator="...")
26. Auto 전략 : 자동 : @GeneratedValue(strategy=GenerationType.AUTO)
27. Transient: DB 매핑x
28. Access : JPA 접근 방식 지정
29. @Column : name, nullable , length ,(BigDemical,BigInteger) percision, scale
30. @Colomn 생략지 자바 타입이 기본 타입일 경우를 주의하자
31. @Enumerated : EnumType.ORDINAL enum에 정의된 순서, EnumType.String enum정의된 이름 그대로,
32. @Temporal: Date,Calendar 등 날짜타입 TemporalType.DATE , TemporalType.TIME, TemporalType.TIMESTAMP, 생략시 Timestamp
33. @Access : 엔티티 접근방식 : AccessType.FIELD 필드 직접 접근, AccessType.PROPERTY 접근자 : 사용 생략시 @Id 위치에 따라 접근
34. 연관 관계
35. 방향 : 단방향, 양방향
36. 다중성: N:1, 1:N, 1:1, N:M
37. OWNER : 양방향으로 만들면 OWNER 를 정해야한다.
38. N:1 단방향 연관관계 : x는 하나의 y , y에는 여러 x, 게시물은 1명의 유저, 유저는 여러개의 게시물
39. x에는 y로 접근하는 필드 존재 , x에서는 y로 접근가능 , y에서는 x로 접근 불가
40. @ManuToOne : optional, fetch, cascade, targetEntity: 연관관계 엔티티 타입
41. @JoinColumn(name="연관관계 테이블 컬럼")
웹 페이지 레이아웃에서 "header"는 일반적으로 페이지 상단에 위치한 영역으로, 페이지의 로고, 메뉴, 검색 창 등 중요한 내용을 담고 있습니다. 이를 통해 사용자가 웹 사이트에서 어디에 있는지, 그리고 원하는 정보를 쉽게 찾을 수 있도록 도와줍니다. Header는 일반적으로 사이트의 브랜드, 제목, 로고 등과 같은 정보를 제공하며, 일반적으로 메뉴와 검색 기능이 포함됩니다. 일부 웹 사이트에서는 헤더 영역에서 사용자가 많이 찾는 정보를 제공하기도 합니다.
이전까지 Layout 을 통해서 헤더-컨텐츠-푸터로 이루어지도록 만들었습니다.
이번에는 Header를 좀더 원하는 방향으로 완성 시켜 보려고 합니다.
3부분으로 이루진 Layout에 상간에 위치한 Header에는 최종적으로 로고 + 사이드바 버튼이 들어 가게 됩니다.
1. 로고 이미지 import
2. 좌측 으로 배치
3. 사이드바 버튼 import
4. 우측으로 배치
이 순서대로 진행 되지 않을까 싶네요.
먼저 로고 이미지를 배치 시켜 보겠습니다.
// components/Header/index.js
import "./header.css";
import logo from "../../resources/svg/logo.svg";
export default function Header() {
return (
<header>
<div id="logo">
<img src={logo} alt="logo" />
</div>
<div id="gnb"></div>
</header>
);
}
레이아웃(Layout)은 웹페이지나 애플리케이션의 UI(User Interface)를 설계하는데 매우 중요한 요소입니다. React에서 레이아웃을 만드는 것은 HTML과 CSS를 사용하는 일반적인 웹 개발과 비슷하지만, React에서는 컴포넌트(Component)를 사용하여 레이아웃을 구성합니다.
최종적으로는 위와 같은 결과물을 만드는 것이 목표입니다.
1. Layout 구성
레이아웃 구성은 크게 4부분으로 이루어져 있습니다.
헤더 - 컨텐츠 + 사이드바 - 푸터 여기서 사이드바는 헤더에 추가될 버튼으로 나왔다가 사라졌다가 할거기 때문에
헤거 - 컨텐츠 - 푸터 크게 3부분으로 우선 나누어 줄 예정입니다.
2. 디렉토리 생성
components 디렉토리에 Layout 디렉토리를 만들고 index.js 파일을 하나 만들어 줍니다.
추가적으로 Header 와 Footer 도 마찬가지로 만들어 줍니다.
2. 코드 작성
먼저 Header/index.js에 Header 컴포넌트를 하나 만들어 줍니다.
// components/Header/index.js
export default function Header() {
return <header></header>;
}
Footer 도 마찬가지로 만들어 주겠습니다.
// components/Footer/index.js
export default function Footer() {
return <footer></footer>;
}
이제 Layout/index.js 에 Layout 컴포넌트를 만들어 주면 됩니다.
main 태그로 헤더 - 컨텐츠 - 푸터를 감싸고, 컨텐츠 부분은 section 태그에 id = "content"를 사용해 주겠습니다.
section#content 에는 props 중 children 속성을 넣어 주면, Layout 컴포넌트를 사용하는 컴포넌트들을 동일한 Layout을 가지는 것으로 만들어 줄 수 있습니다.
// Layout/index.js
import Footer from "../Footer";
import Header from "../Header";
export default function Layout({ children }) {
return (
<main>
<Header />
<section id="content">{children}</section>
<Footer />
</main>
);
}
3. Layout으로 감싸주기
우선은 main 화면을 제외하고는 만들어 져있는 메뉴들의 페이지들은 모두 같은 Layout을 사용한다고 생각하고, 각 컴포넌트를 Layout으로 감싸주면 될것같습니다. 그런데 그러면 비효율적일 수도 있다는 생각이 들어 App.js 에서 Layout 을 import 해서 각 페이지 Route 들을 한번에 감싸 줍니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Layout from "./components/Layout";
import Main from "./pages/Main";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
{/* Main */}
<Route path="/" element={<Main />} />
</Routes>
<Layout>
<Routes>
{/* Introduction */}
{/* Work */}
{/* Demo */}
{/* Component */}
</Routes>
</Layout>
</BrowserRouter>
</div>
);
}
export default App;
그런데 아직 모든 페이지가 컴포넌트들을 하나도 안만들었기 때문에 Test 컴포넌트를 하나 만들어서 Layout의 스타일만 우선 지정해 보겠습니다.
