들어가기 전에..
- 리엑트와 비슷하지만.. 초기 설정부터 라우팅하는것과 레이아웃 잡는게 너무 적응이 안돼서, 강의때 배웠던것과 공식문서, 구글링을 계속할수 밖에 없었다…
Link태그나 Image태그를쓰는데도 정말..익숙하지 않다.. 몇번을 버벅이면서 해야해서…힘들었다..
특히 tailwind는….편하면서..친하지 않은..그런 어색한 느낌이 있어서 타일윈드에 반응형을 간단하게 넣는 것이나 hover를 넣는 것에도 타일윈드 공식문서를 계속 찾아보면서 할수 밖에 없었다..😇
조금 더 Next.js와 친해져야 겠다.....👩🏻💻- tailwind로 반응형은 우선 구현했다가, 나중에 스크린 크기는 따로 커스텀으로 수정해야 겠다.
- Next.js 파일 규칙
- page.js: 경로의 고유한 UI를 생성하고 경로를 공개적으로 액세스할 수 있도록 합니다.
- layout.js: 세그먼트와 그 하위 세그먼트에 대한 공유 UI를 만듭니다. 레이아웃은 페이지 또는 하위 세그먼트를 래핑합니다.
초기세팅
- 배웠던 버전으로 만들기 위해 13.2.4 버전으로 진행했다.
- 팀 프로젝트를 했던게 벌써 한달전일이므로, Github를 잘 활용하기로 결정했다.
- css는 제일 익숙하지 않은 tailwind로만들기로 결정했다.
- 빠르게 만들기 위해서 대부분 강의때 배운 Next.js를 활용해서 포트폴리오를 만들 예정이다.
- tsconfig.json 에서 target를 ES6로 설정했다.
- globals.css 파일 수정
/* globals.css */
html,
body {
height: 100vh;
overflow-y: auto;
}- layout.tsx에서 기본 폰트를 Open_Sans로 수정
//layout.tsx
import { Open_Sans } from "next/font/google";
import { Open_Sans } from "next/font/google";
const sans = Open_Sans({ subsets: ["latin"] });
//코드 생략
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={sans.className}>
<body>
{children}
</body>
</html>
);
}레이아웃 설정, 라우팅
- 레이아웃에 넣을 Header는 components 파일 안에 Header.tsx만들어줌, 그다음 layout.tsx에 헤더 컴포넌트를 넣어줬다.
- Home, About, Resume, Contact 를 헤더에 넣어 네비게이션 바로 만들어 줬다.
- 라우팅을 하기 위해 app폴더안에 about폴더와 contact폴더를 만들어 줬다.
//layout.tsx
import Header from "@/components/Header";
import "./globals.css";
import { Open_Sans } from "next/font/google";
const sans = Open_Sans({ subsets: ["latin"] });
//나중에 수정할 예정
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={sans.className}>
<body className="flex flex-col w-full max-w-auto mx-auto">
<Header />
<main className="grow">{children}</main>
</body>
</html>
);
}- Header.tsx
import Link from "next/link";
import { LuFlower2 } from "react-icons/lu";
export default function Header() {
return (
<header className="flex justify-between items-center">
<Link href="/">
<div className="flex items-center pl-3 pt-3">
<h1 className="text-2xl font-bold text-pink-500 ml-4">
{"SungEun's Portfolio"}
</h1>
{/* 반응형은 나중에 수정할 예정 */}
<LuFlower2 className="text-3xl text-pink-500 max-sm:hidden" />
</div>
</Link>
<nav className="flex gap-4 mt-5 font-bold text-pink-500 text-lg p-3 mr-4">
<Link href="/">Home</Link>
<Link href="/about">About</Link>
{/* Resume누르면 이력서 pdf로 뜨게 할 예정 */}
<Link href="">
Resume
</Link>
<Link href="/contact">Contact</Link>
</nav>
</header>
);
}
함께 일하는 프론트엔드 개발자 이성은입니다🐥