* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.

▶️ 헤더(Header)와 푸터(Footer)

• 웹페이지의 공통적인 레이아웃 요소 중 하나.

• 사용자 경험(UX)을 향상시키고 페이지의 일관성을 유지하는 데 중요한 역할을 수행한다.

• 공통적인 레이아웃. 여러 페이지에서 동일한 헤더/푸터를 사용하면 사이트의 일관성을 유지할 수 있다.

• 사용자로 하여금 주요 정보(로고, 네비게이션, 검색창 등)를 쉽게 찾을 수도 있고..

• 푸터에 사이트맵, 중요한 내부 링크를 포함하면 검색 엔진 최적화(SEO)에 도움이 되기도 한다.

• 따라서 통상적으로는 헤더와 푸터를 전역 컴포넌트(Global Component)로 만들고, Layout 컴포넌트에서 이를 공통적으로 사용하도록 구현한다.

import Header from "./Header";
import Footer from "./Footer";

function Layout({ children }) {
  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <main className="flex-grow">{children}</main>
      <Footer />
    </div>
  );
}

export default Layout;

헤더(Header)

• 웹페이지의 최상단에 위치하며, 일반적으로 사이트의 네비게이션(Navigation) 및 주요 정보를 포함하는 영역.

• 웹페이지 로고, 네비게이션 바, 검색창, 회원 기능 버튼, 알림, 장바구니 등의 버튼 등의 요소들이 포함된다.

푸터(Footer)

• 웹페이지의 최하단에 위치하며, 사이트의 추가 정보나 보조적인 콘텐츠를 포함하는 영역.

• 저작권 정보, 소셜 미디어 링크, 개인정보 처리방침, 이용 약관, 회사 정보, 사이트 맵 등의 요소들이 포함된다.

▶️ react-icons

• 링크

• React에서 다양한 아이콘 라이브러리를 쉽게 사용할 수 있도록 도와주는 패키지.

• 프론트 구현 중에 필요한 아이콘들을, 다양하고 / 가볍고 선명하게 / JSX 문법에 친화적이고 / 기본 제공 속성으로 커스터마이징이 쉽게 가능하도록 제공해주고 있다.

• 구글에서 아이콘을 찾고, 규격대로 가공하고, 사이즈 등을 일일이 커스터마이징 하는 것 보다 더 편하게 아이콘을 가져다가 쓸 수 있다.

import { FaBeer } from "react-icons/fa";

function App() {
  return (
    <div>
      <h1>React Icons 사용 예제 <FaBeer /></h1>
    </div>
  );
}

export default App;

• react-icons은 다양한 아이콘 라이브러리들을 포함하고 있다.

• 어떤 아이콘들이 존재하고, 어떻게 사용하는지는 공식 안내 페이지 참조.

기능 구현

비밀번호 초기화

로그인

도서 목록 페이지

목록 필터링

쿼리스트링 활용

페이지네이션