프로젝트 재구성
부트스트랩을 적용
임포트 해준다.
"use client"
//Bootstrap CSS 파일 가져오기
import "bootstrap/dist/css/bootstrap.min.css";
import {useEffect} from "react";
export default function BootstrapClient(){
useEffect(()=>{
//Bootstrap Js 파일 로딩
import("bootstrap/dist/js/bootstrap.bundle.min.js");
},[]);// 한번만 호출
//컴포넌트가 마운트 될 때 딱 1번 람다식을 실행
return null; //ui가 없는 컴포넌트는 return null해준다.
}
클라이언트 컴포넌트를 만드려면 "use client" 선언한다
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import BootstrapClient from "./BootstrapClient";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<BootstrapClient></BootstrapClient>
{children}
</body>
</html>
);
}레이아웃js에 컴포넌트 삽입해줌
"use client" //클라이언트 컴포넌트 이벤트 처리를 해야되기때문에 무조건 client component로 만들어야된다.
import Link from "next/link";
import Image from "next/image";
function AppHeader() {
return (
<nav className="navbar justify-content-between bg-dark">
<Link href="/" className="navbar-brand ps-2 text-white">
{/* Node.js 환경에서 실행할 경우: 이미지 최적화 기능 적용 */}
{/* 이미지 최적화 기능: 크기 조절, 포맷 변환, 지연 로딩, 자동 캐싱등을 말함 */}
{/* public/*는 빌드 후 .next/* 폴더에 저장 */}
{/* <Image src="/logo512.png" alt="" width="30" height="30" className="align-top"/> */}
{/* 정적 내보내기를 할 경우 사용 */}
{/* 이미지 최적화 기능 사용 안함 */}
{/* public/*는 빌드 후 out/* 폴더로 저장 */}
{/*<img src="/logo512.png" alt="" width="30" height="30" className="align-top"/> 이렇게 하면 안됨*/}
<Image src="/logo512.png" alt="" width="30" height="30" className="align-top"/>
{' '} React
</Link>
<div className="pe-2">
<Link href="/" className="btn btn-success btn-sm">로그인</Link>
</div>
</nav>
);
}
export default AppHeader;
Link컴포넌트를 사용해서 페이지 이동한다
home컴포넌트로 이동하라는 뜻이다.
href ="/"
jsx는 class대신에 className이라고 사용해야된다.
{' '} ->한칸 띄우고 글자써라...
공백을 넣을때도 표현식으로 해야된다.
주석방법
{/* 주석넣기 */}
이미지 최적화를 해준다. 크기조절, 포맷변환, 지연로딩, 자동캐싱
훨씬 속도가 빠르다
그런데 정적 내보내기를 할때는
이미지 있는 그대로를 다운한다. 원본 크기 그대로 나옴
app layout.js에서 호출해준다
npm run dev한다
localhostL3000부터 시작하고 다른거 실행하면 1씩 번호가 증가한다...
클라이언트 컴포넌트 만들지 서버클라이언트 만들지 결정?
DOM을 만들어야된다? ->클라이언트로 만든다
이벤트 처리를 한다? ->클라이언트로 만든다
메뉴 컴포넌트를 보면...
서버클라이언트다.
직접 이벤트 처리를 하는 부분이 없다.
링크 있는데 왜? 이벤트 있잖아??
아님.
Link컴포넌트 안에서 이벤트 처리를 하고있기 때문이다.
[콘솔에 HMR] connected이 출력되는 이유]
-**Hot Module Replacement (핫 모듈 교체)**의 약자입니다
- Next.js 개발 서버와 브라우저가 WebSocket으로 연결되었다는 의미입니다.
- 코드를수정하면페이지새로고침없이자동으로변경사항이브라우저에 반영되도록합니다.
- 개발모드(npm run dev)**에서만나타납니다
웹 소켓으로 연결되었다는 뜻...
크롬 확장 프로그램 설치해주면
컴포넌트 찾아주는 확장 프로그램이다
좋다...
Promise
2가지 방법이 있다
1.then
2.await - 비동기 함수여야한다.
React.Suspense
Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다.
지연이 될수있는 컴포넌트를 Suspense로 감싸면
fallback을 불러줌
완성될때까지 보여줄 로딩 UI이다.
첫화면이 나올때 스크롤을 내리면 보여질때 그때 로딩을 해준다. 서스펜스를 쓰면 자동으로 처리 해준다.
넥스트js을 썼을 경우에만...
'React' 카테고리의 다른 글
| [26.02.02] React 재직자 교육 6 - CSS (0) | 2026.02.02 |
|---|---|
| [26.02.02] React 재직자 수업 5 -App Router, JSX (0) | 2026.02.02 |
| [26.02.02] React 재직자 수업 3 -클라이언트 컴포넌트, 서버 컴포넌트 (0) | 2026.02.02 |
| [26.02.02] React 재직자 수업 2 -SSR + Streaming SR (0) | 2026.02.02 |
| [26.02.02] React 재직자 수업 1 - npm 설치 package.json 의미 (1) | 2026.02.02 |
댓글