캠핑사이트 정적웹 개발로 Node.js 입문및 uiux 분석해보기😉

캠핑사이트 정적웹 개발로 Node.js 입문및 uiux 분석해보기😉

2023. 12. 7. 14:55ㆍDevelopment👩🏻‍🦳/Static Web

https://github.com/mijoungkim/Travel-Website-React.js-Next.js-13-Tailwind-CSS

GitHub - mijoungkim/Travel-Website-React.js-Next.js-13-Tailwind-CSS

Contribute to mijoungkim/Travel-Website-React.js-Next.js-13-Tailwind-CSS development by creating an account on GitHub.

github.com

우선 터미널에 npx create-next-app@latest를 통해 종속성을 설치해줍니다

사용자가 새로운 Next.js 프로젝트를 생성할 때,

다양한 옵션을 선택할 수 있게 하기 위해 나타납니다.

각 항목의 의미는 다음과 같습니다:
TypeScript 사용 여부: 프로젝트에서 TypeScript를 사용할 것인지 묻는 질문입니다.

TypeScript는 JavaScript에 정적 타입을 추가하여 더 견고하고 안정적인 코드를 작성할 수 있게 도와줍니다.

ESLint 사용 여부: 코드 품질과 일관성을 유지하기 위해 ESLint를 사용할 것인지 묻는 질문입니다. ESLint는 코드를 분석하여 문제를 찾고 고칠 수 있도록 도와주는 도구입니다.

Tailwind CSS 사용 여부: 유틸리티-퍼스트 CSS 프레임워크인 Tailwind CSS를 프로젝트에 적용할 것인지 묻는 질문입니다. Tailwind CSS를 사용하면 반응형 디자인을 빠르게 구현할 수 있습니다.

src/ 디렉토리 사용 여부: 프로젝트의 소스 파일들을 src/ 디렉토리 안에 구조화하여 관리할 것인지 묻는 질문입니다. 이 구조를 사용하면 프로젝트를 더 깔끔하게 관리할 수 있습니다.

App Router 사용 여부: Next.js 13부터 도입된 App Router를 사용할 것인지 묻는 질문입니다. App Router를 사용하면 페이지 라우팅 및 데이터 로딩을 더 선언적으로 관리할 수 있습니다.

기본 import alias (@/*) 커스텀 여부: 프로젝트 내에서 사용할 기본 import 경로 별칭을 사용자 정의할 것인지 묻는 질문입니다. 이를 사용하면 프로젝트 내의 경로를 더 쉽게 관리할 수 있습니다.

위 설정들은 프로젝트의 초기 설정 단계에서 사용자의 개발 환경과 선호에 맞게 프로젝트를 구성하는 데 도움을 줍니다.

Next.js-?

정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 모두 지원하는 React 기반 프레임워크로, 이를 통해 빠르고 최적화된 웹사이트를 구축할 수 있습니다. 정적 사이트 생성은 사이트의 각 페이지를 빌드 타임에 미리 생성하여 배포하는 방식으로, 이는 로딩 시간을 줄이고 성능을 향상시킵니다.

Next.js의 역활

초기 페이지 로드 시 사용자에게 보여줄 HTML과 CSS를 미리 생성합니다.
데이터 페칭(Data Fetching) - 예를 들어, API 호출을 서버에서 수행하여 페이지에 필요한 데이터를 사전에 준비합니다.
SEO 최적화 - 검색 엔진이 콘텐츠를 인덱싱하기에 적합한 완성된 페이지를 제공합니다.

리액트와 Node.js의 차이점은-?

React는 클라이언트 사이드 라이브러리로, 사용자 인터페이스를 만드는 데 사용됩니다.
Next.js는 React 기반의 서버 사이드 렌더링을 지원하는 프레임워크로,

서버 렌더링 및 정적 사이트 생성 등의 추가 기능을 제공합니다.
두 명령어 모두 npx를 사용하여 실행되며, npx는 Node.js를 설치할 때 함께 설치되는 도구입니다.

이를 통해 Node 패키지를 로컬 설치 없이 실행할 수 있습니다.

터미널 명령어

npm run dav로 홈페이지 띄운후 초기 ui 먼저 확인해주세요

초기 세팅후 page에있는 기본 코드들을 전부 지워준후

테스트코드 먼저 작성해봅니다

정상적으로 출력된다면 이는 tailwind이 잘작동하고 있다는겁니다 !

globals.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter;
}

@layer utilities {
  .btn_white { 
    @apply  border-white bg-white px-8 py-3 text-green-50
  }
  .btn_white_text  { 
    @apply  border-white bg-white px-8 py-3 text-gray-90
  }
  .btn_green  { 
    @apply  border-green-50 bg-green-50 px-8 py-5 text-white
  }
  .btn_dark_green { 
    @apply  bg-green-90 px-8 py-4 text-white transition-all hover:bg-black
  }
  .btn_dark_green_outline  { 
    @apply border-gray-20 bg-green-90 px-8 py-5 text-white
  }
  
  .max-container {
    @apply mx-auto max-w-[1440px];
  }

  .padding-container {
    @apply px-6 lg:px-20 3xl:px-0;
  }

  .flexCenter {
    @apply flex items-center justify-center;
  }

  .flexBetween {
    @apply flex items-center justify-between;
  }

  .flexStart {
    @apply flex items-center justify-start;
  }

  .flexEnd {
    @apply flex items-center justify-end;
  }

  /* FONTS */
  .regular-64 {
    @apply text-[64px] font-[400] leading-[120%];
  }

  .regular-40 {
    @apply text-[40px] font-[400] leading-[120%];
  }

  .regular-32 {
    @apply text-[32px] font-[400];
  }

  .regular-24 {
    @apply text-[24px] font-[400];
  }

  .regular-20 {
    @apply text-[20px] font-[400];
  }

  .regular-18 {
    @apply text-[18px] font-[400];
  }

  .regular-16 {
    @apply text-[16px] font-[400];
  }

  .regular-14 {
    @apply text-[14px] font-[400];
  }

  .medium-14 {
    @apply text-[14px] font-[600];
  }

  .bold-88 {
    @apply text-[88px] font-[700] leading-[120%];
  }

  .bold-64 {
    @apply text-[64px] font-[700] leading-[120%];
  }

  .bold-52 {
    @apply text-[52px] font-[700] leading-[120%];
  }

  .bold-40 {
    @apply text-[40px] font-[700] leading-[120%];
  }

  .bold-32 {
    @apply text-[32px] font-[700] leading-[120%];
  }

  .bold-20 {
    @apply text-[20px] font-[700];
  }

  .bold-18 {
    @apply text-[18px] font-[700];
  }

  .bold-16 {
    @apply text-[16px] font-[700];
  }

  /* Hero */
  .hero-map {
    @apply absolute right-0 top-0 h-screen w-screen bg-pattern-2 bg-cover bg-center md:-right-28 xl:-top-60;
  }

  /* Camp */
  .camp-quote {
    @apply absolute -right-6 bottom-4 w-[140px] lg:bottom-10 xl:-right-8 xl:w-[186px] 3xl:right-0;
  }

  /* Feature */
  .feature-phone {
    @apply absolute top-[13%] z-10 hidden max-w-[1500px] rotate-[15deg] md:-left-16 lg:flex  3xl:left-20;
  }

  /* Get App */
  .get-app {
    @apply max-container relative flex w-full  flex-col justify-between gap-32 overflow-hidden bg-green-90 bg-pattern bg-cover bg-center bg-no-repeat px-6 py-12 text-white sm:flex-row sm:gap-12 sm:py-24 lg:px-20 xl:max-h-[598px] 2xl:rounded-5xl;
  }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

이 코드는 Tailwind CSS를 사용하는 프로젝트의 전역 스타일 시트입니다.

Tailwind CSS는 유틸리티 우선의 CSS 프레임워크로,

다양한 디자인 요소를 클래스로 빠르게 적용할 수 있게 해줍니다.

코드의 내용은 다음과 같습니다:

Google Fonts 연결:

Google Fonts의 'Inter' 폰트 패밀리를 임포트합니다. 이 폰트는 웹사이트에서 사용될 기본 폰트로 설정됩니다.

Tailwind CSS의 핵심 스타일 적용: @tailwind base;, @tailwind components;, @tailwind utilities;

지시어를 통해 Tailwind CSS의 기본 스타일, 컴포넌트 스타일, 유틸리티 스타일을 적용합니다.

글로벌 스타일 초기화: 모든 요소에 대해 마진과 패딩을 0으로 설정하고,

box-sizing을 border-box로 설정합니다.

Body 스타일 설정: 웹사이트의 본문에 'Inter' 폰트를 적용합니다.

유틸리티 클래스 정의: @layer utilities 블록 안에서 다양한 커스텀 유틸리티 클래스를 정의합니다.

이 클래스들은 버튼, 컨테이너, flex 레이아웃, 폰트 스타일 등 웹사이트에서 재사용될 스타일을 적용합니다.

스크롤바 숨기기: .

hide-scrollbar 클래스를 사용하여 웹킷 기반 브라우저

(Chrome, Safari, Opera), IE, Edge, Firefox에서 스크롤바를 숨깁니다.

이 코드는 전체적으로 웹사이트의 스타일링을 위한 기본 설정을 제공하며,

Tailwind CSS의 클래스를 사용하여 일관된 디자인 시스템을 구축합니다.

사용자 정의 유틸리티 클래스를 통해 반복적으로 사용되는 스타일 패턴을 쉽게 적용할 수 있으며,

유지 관리와 확장성을 향상시킬 수 있습니다.

해당 프로젝트가 끝나면 타이완에 대해서도 한번 다뤄보는 시간을 가져보도록 하겠습니다

<main className="relative overflow-hidden">
{children}

<main> 태그: HTML에서 <main> 태그는 웹 페이지의 주요 콘텐츠를 나타냅니다. 이 태그 안에 들어가는 내용은 페이지의 핵심적인 내용을 포함하며, 문서의 주된 흐름에 속하는 요소들이 위치합니다.

className 속성: className="relative overflow-hidden"은 CSS 클래스를 지정합니다. 이 클래스들은 스타일링을 위해 사용됩니다. relative는 해당 요소의 위치를 상대적으로 설정하고, overflow-hidden은 내용이 요소의 경계를 넘어갈 때 보이지 않도록 처리합니다.

{children}: {children}은 React에서 사용되는 특별한 prop입니다.

이를 통해 다른 컴포넌트에서 넘겨진 자식 요소들을 이 위치에 렌더링할 수 있습니다.

예를 들어, RootLayout 컴포넌트 안에서 <RootLayout><p>Hello World</p></RootLayout>처럼 사용하면, <p>Hello World</p>가 <main> 태그 안에서 렌더링됩니다.

이 구조를 사용함으로써, RootLayout 컴포넌트를 재사용할 때 다양한 내용을 <main> 태그 안에 유연하게 삽입할 수 있습니다. 이는 컴포넌트 기반 아키텍처에서 매우 일반적인 패턴으로, 코드의 재사용성과 유지보수성을 높여줍니다.

import React from 'react' 생략가능 -?

import React from 'react' 문장은 React 17 버전 이전에서 JSX를 사용하는 컴포넌트를 작성할 때 필요했습니다. JSX는 JavaScript XML의 약자로, React 요소를 생성하는 데 사용되는 구문입니다. React 17 버전 이전에서는, JSX를 사용하는 모든 파일에서 React를 임포트해야 했으며, 이는 JSX 코드가 React.createElement 호출로 변환되기 때문입니다.

그러나 React 17 버전부터는 새로운 JSX 변환을 도입하여 import React from 'react' 문장이 더 이상 필요하지 않게 되었습니다. 이 새로운 변환은 JSX를 처리할 때 React를 범위 안에 포함하지 않아도 되도록 해줍니다. 따라서 React 17 이상을 사용한다면 import React from 'react' 문장을 생략할 수 있습니다.

그러나 여전히 몇 가지 주의해야 할 사항이 있습니다:

React 버전: 프로젝트가 React 17 이상을 사용하고 있는지 확인해야 합니다.

구 버전에서는 여전히 이 임포트가 필요합니다.

린팅 도구: 일부 린팅 도구나 코드 편집기는 여전히 import React가 필요하다고 경고할 수 있습니다.

이는 도구의 설정을 업데이트해야 할 수도 있음을 의미합니다.

(하지만 초반 설정에서 깔지 않았습니다.)

정적 웹 사이트: 정적 웹 사이트를 만들 때도 React를 사용하는 경우,

React 버전에 따라 이 임포트의 필요성이 결정됩니다.

단순히 HTML, CSS, JavaScript만을 사용하여 정적 웹 사이트를 만들 경우 React 자체가 필요 없습니다.

요약하자면, React 17 이상을 사용하는 경우에는 import React from 'react'를 생략할 수 있으나, 프로젝트의 React 버전과 도구 설정을 확인해야 합니다.

초기 구현 화면입니다

<ul> 태그를 이용

hidden lg:flex 클래스를 사용하여 대형 화면에서만 표시되도록 설정되어 있습니다.

hidden 클래스는 모든 화면 크기에서 요소를 숨기고,

lg:flex 클래스는 large breakpoint 이상의 화면 크기에서만 flex 컨테이너로 만듭니다.

gap-12 클래스는 flex 아이템 사이에 고정된 간격을 설정합니다.
h-full 클래스는 <ul> 요소의 높이를 부모의 높이와 동일하게 설정합니다.

각 Link 컴포넌트는 고유한 key prop를 가지고 있습니다.

이는 React가 리스트 아이템을 효율적으로 렌더링하고 재사용하기 위한 것입니다.

flexCenter 클래스는 사용자 지정 클래스사용,

이는 해당 요소를 flex 컨테이너로 만들고 아이템들을 중앙에 정렬해줍니다

regular-16과 text-gray-50은 각각 글꼴 크기와 색상을 설정하는 클래스입니다

pb-1.5는 패딩 바텀(padding-bottom)을 설정합니다.

transition-all 클래스는 모든 속성 변경에 대해 전환 효과를 적용합니다.

hover:font-bold은 사용자가 링크 위로 마우스를 올렸을 때 글꼴을 굵게 만듭니다.

className={``}와 className={' '} 사이에는 주로 두 가지 주요 차이점

값의 타입과 내용:
className={``}: 이것은 JavaScript 표현식으로 해석됩니다. 여기서 사용된 백틱(``)은 ES6의 템플릿 리터럴을 나타냅니다. 이 경우 템플릿 리터럴은 빈 문자열을 나타냅니다. 따라서, 이 표현은 공백이 없는 빈 문자열을 className에 할당합니다.
className={' '}: 이것도 JavaScript 표현식이지만, 여기서는 작은 따옴표('')를 사용하여 문자열을 나타냅니다.

이 문자열은 공백 문자 하나를 포함합니다. 따라서,

이 표현은 공백 문자가 포함된 문자열을 className에 할당합니다.

실제 HTML 클래스 할당에 미치는 영향:
className={``}: 이 표현은 실제로 HTML 요소에 아무런 클래스를 추가하지 않습니다.

빈 문자열이기 때문에, 클래스 속성은 비어 있게 됩니다.

className={' '}: 이 표현은 공백 문자를 포함하는 클래스를 추가합니다. HTML에서 클래스 이름은 공백으로 구분되므로, 이 공백은 실제로는 무시될 수 있지만, 기술적으로는 공백 문자를 포함하는 클래스를 추가하려고 시도합니다.
요약하자면, className={``}는 빈 클래스를, className={' '}는 공백 문자를 포함하는 클래스를 할당합니다.

그러나 실제 HTML 렌더링에서는 두 경우 모두 클래스가 없는 것처럼 보일 수 있습니다.

응용

첫 번째 코드 (className={flexCenter gap-3 rounded-full border ${variant} ${full && 'w-full'}}):

이 코드는 템플릿 리터럴을 사용합니다. 템플릿 리터럴은 백틱(``)으로 둘러싸인 문자열로,

문자열 내에서 ${} 구문을 사용해 JavaScript 표현식을 삽입할 수 있습니다.
여기서 ${variant}와 ${full && 'w-full'}는 변수 variant의 값과 조건문 full && 'w-full'의 결과를 해당 위치에 문자열로 삽입합니다.
결과적으로, variant 변수의 값과 full 변수가 true일 경우 'w-full' 클래스가 실제 클래스 문자열에 동적으로 포함됩니다.

두 번째 코드 (className={'flexCenter gap-3 rounded-full border ${variant} ${full && 'w-full'}}`):

이 코드는 일반 문자열을 사용합니다. 작은 따옴표('')로 둘러싸인 이 문자열은 문자 그대로 해석됩니다.
${variant}와 ${full && 'w-full'}은 이 경우 단순한 문자열로 취급되며,

JavaScript 표현식으로서의 기능을 하지 않습니다.

결과적으로, 문자열은 변수나 조건문의 값을 반영하지 않고, 'flexCenter gap-3 rounded-full border ${variant} ${full && 'w-full'}'라는 정확한 문자열을 className에 할당합니다.

요약하면, 첫 번째 코드는 변수와 조건문의 값을 동적으로 클래스 이름에 포함시키는 반면,

두 번째 코드는 변수와 조건문을 문자열의 일부로서 정적으로 사용합니다.

이 차이는 클래스 이름이 실제로 어떻게 구성되는지에 영향을 미칩니다.

첫 번째 코드는 더 유연하고 동적인 클래스 할당을 가능하게 합니다.

예시를 들자면

className={'flexCenter gap-3 rounded-full border ' + (variant || '') + ' ' + (full ? 'w-full' : '')}

이런식으로 따옴표를 사용하여 코드를 짜도 되지만 코드 복잡성과 가독성이 떨러진다는 단점이있다

className={`flexCenter gap-3 rounded-full border ${variant || ''} ${full ? 'w-full' : ''}`}

템플릿 리터럴 사용이 코드가 간결해지다보니 현재에는 리터럴을 사용하여 리액트 코드를 많이짜곤하는데

짜는 과정에서 우리들 스스로가 리팩터링을 해나가는것이다

리터럴 사용의 장점

가독성: 템플릿 리터럴은 코드의 가독성을 향상시킵니다. 변수와 표현식이 명확하게 보여지며, 문자열 내에서 직접 삽입됩니다. 이로 인해 코드를 읽고 이해하기가 더 쉬워집니다.

간결성: 템플릿 리터럴은 + 연산자를 사용하여 여러 문자열을 연결하는 것보다 훨씬 간결합니다.

코드가 더 짧고 명료해지며, 오류 발생 가능성도 줄어듭니다.

유연성: 템플릿 리터럴은 복잡한 문자열 조합도 쉽게 처리할 수 있게 해줍니다.

멀티라인 문자열, 표현식 삽입, 변수 포함 등이 더 간단해집니다.

유지보수: 템플릿 리터럴을 사용하면 코드의 유지보수가 더 쉬워집니다. 코드의 명확성과 간결성이 높아지기 때문에, 나중에 코드를 수정하거나 확장할 때 오류를 줄일 수 있습니다.

따라서, 템플릿 리터럴은 현대 JavaScript와 React 개발에서 문자열 조작에 있어 선호되는 방식입니다. 이는 특히 복잡한 문자열 조작이나 동적 클래스 이름 생성과 같은 경우에 더욱 그렇습니다.

문자열 내에서 변수나 표현식을 사용할 수 있는 기능을 가리키는

한 글자로 정의하는 용어는 보간법(Interpolation)입니다.

템플릿 리터럴 내에서 사용되는 ${} 구문을 통해 이루어지며,

자바스크립트에서는 이를 통해 문자열 안에 변수의 값을 삽입하거나 표현식을 계산할 수 있습니다.

템플릿 리터럴 사용 (보간법 사용):

`... ${expression} ...`

이 구문은 표현식을 평가하여 문자열의 해당 부분에 결과를 삽입합니다.

작은따옴표/큰따옴표 사용 (보간법 미사용):

'... ${expression} ...'

또는

"... ${expression} ..."

이 구문들은 표현식을 문자 그대로의 값으로 처리하며, 표현식을 평가하지 않고 단순히 문자열의 일부로 포함합니다.

요약하면, 템플릿 리터럴과 보간법을 사용하면 동적인 값을 문자열에 포함시킬 수 있고,

작은따옴표나 큰따옴표를 사용하면 정적인 문자열만을 처리할 수 있다는 점이 주된 차이입니다.

파일구조의 세분화(조직화)

가독성: 각 컴포넌트가 자신의 파일을 가지므로 코드를 찾고 이해하기 쉽습니다.

이는 유지 보수와 팀원 간의 협업에 큰 도움이 됩니다.

재사용성: 각 컴포넌트를 개별적인 모듈로 분리함으로써 재사용성이 높아집니다.

다른 부분에서 같은 컴포넌트를 재사용하기 쉬워집니다.

유지 보수: 문제가 발생했을 때 해당 컴포넌트만을 수정하면 됩니다.

전체 시스템을 건드리지 않고도 특정 부분만을 집중적으로 관리할 수 있습니다.

병렬 작업: 여러 개발자가 동시에 다른 컴포넌트에서 작업할 수 있어 프로젝트의 병렬 개발이 용이합니다.

효율적인 버전 관리: 각 파일이 독립적으로 버전 관리될 수 있어, 변경 사항 추적이 쉬워집니다.

테스트 용이성: 각 컴포넌트를 독립적으로 테스트할 수 있어,

유닛 테스트와 같은 테스트 방법론을 적용하기에 적합합니다.

이와 같은 파일 구조는 큰 규모의 프로젝트나 여러 사람이 협업할 때 특히 유용합니다.

그러나, 너무 많은 분리는 프로젝트의 복잡성을 증가시킬 수 있으니,

적절한 수준에서 세분화를 결정하는 것이 중요합니다.

globals.css

  .hero-map {
    @apply absolute right-0 top-0 h-screen w-screen bg-pattern-2 bg-cover bg-center md:-right-28 xl:-top-60;
  }

Hero.tsx

import React from "react";

const Hero = () => {
  return(
    <section className="max-container padding-container flex
    flex-col gap-20 py-10 pb-32 md:gap-28 xl:flex-row border-2
    border-red-500">
      <div className="hero-map" />
    </section>
  )
}

export default Hero

      <div className="relative z-20 flex flex-1 flex-col xl:w-1/2">
        <Image 
        src="camp.svg"
        alt="camp"
        width={50}
        height={50}
        className="absolute left-[-5px] top-[-30px] w-10 lg:w-[50px]"
        />

Tailwind CSS 구문에 맞춰서 이미지 위치및 크기조정을 해줍니다

<div className="relative z-20 flex flex-1 xl:w-1/2">:

relative: 이 div는 포지셔닝 컨텍스트를 상대적으로 설정합니다.

이는 내부에 절대 위치가 지정된 요소(absolute)가 div를 기준으로 위치하도록 합니다.
z-20: z-index가 20으로 설정되어 다른 요소들과의 쌓임 순서를 결정합니다.
flex: 이 div는 플렉스 컨테이너로 동작합니다.
flex-1: 플렉스 아이템으로서 사용 가능한 공간을 모두 차지하도록 합니다.
xl:w-1/2: 화면의 너비가 xl 브레이크포인트에 도달하면, 이 div의 너비는 부모 컨테이너의 50%가 됩니다.

<Image> 컴포넌트:
src="camp.svg": 이미지의 소스 파일로 camp.svg를 사용합니다.
alt="camp": 이미지에 대한 대체 텍스트로 'camp'를 제공합니다.

이미지가 로드되지 않을 때나 스크린 리더가 사용될 때 표시됩니다.
width={50}: 이미지의 너비를 50픽셀로 설정합니다.
height={50}: 이미지의 높이를 50픽셀로 설정합니다.
className="absolute left-[-5px] top-[-30px] w-10 lg:w-[50px]":
absolute: 이미지가 절대 위치를 가지고 부모의 relative 포지셔닝 컨텍스트에 따라 위치하게 됩니다.
left-[-5px]: 이미지의 왼쪽 마진을 -5픽셀로 설정하여 오른쪽으로 5픽셀 이동합니다.
top-[-30px]: 이미지의 상단 마진을 -30픽셀로 설정하여 아래로 30픽셀 이동합니다.
w-10: 이미지의 너비를 Tailwind CSS의 w-10 클래스에 해당하는 크기로 설정합니다.
lg:w-[50px]: 화면의 너비가 lg 브레이크포인트에 도달하면 이미지의 너비를 50픽셀로 설정합니다.

CSS에서 top 속성은 ?

요소의 상단 가장자리의 위치를 결정합니다. 이 속성은 주로 position 속성이

absolute, relative, fixed, 또는 sticky로 설정된 요소에 사용됩니다.

top의 값이 양수일 경우 요소는 기준점으로부터 아래로 이동하고,

음수일 경우 기준점으로부터 위로 이동합니다.

예를 들어, top: 10px;은 요소를 기준점으로부터

아래로 10픽셀 이동시키는 반면, top: -10px;은 요소를 기준점으로부터 위로 10픽셀 이동시킵니다.

따라서, 예시에서 사용된 top-[-30px]는 요소를 상단 기준점으로부터 30픽셀 위로 이동시키는 것을 의미합니다.

top이 어떻게 작동하는지는 position 속성에 따라 달라집니다:

absolute: 요소는 가장 가까운 위치 지정된 조상 요소에 대해 상대적으로 배치됩니다.
relative: 요소는 자기 자신의 정상 위치를 기준으로 배치됩니다.
fixed: 요소는 뷰포트를 기준으로 배치됩니다.
sticky: 요소는 사용자의 스크롤 위치에 따라 relative와 fixed 배치 사이를 전환합니다.

고차 함수(Higher-Order Function)
체이닝(Chaining)의 활용

고차 함수(Higher-Order Function): 고차 함수는 다른 함수를 매개변수로 받거나 함수를 결과로 반환하는 함수입니다. JavaScript의 .map(), .filter(), .reduce() 같은 배열 메서드들은 고차 함수의 예입니다.

이들은 각 배열 요소에 대해 콜백 함수를 실행하고, 그 결과를 반환합니다.

체이닝(Chaining): 메서드 체이닝은 여러 메서드를 연결하여 호출하는 프로그래밍 패턴입니다.

이 패턴을 사용하면 코드를 간결하고 읽기 쉽게 만들 수 있습니다.

예를 들어, Array(5).fill(1).map(...)에서 fill 메서드와 map 메서드가 연쇄적으로 호출되는 것이 체이닝의 좋은 예입니다.

<div className="my-11 flex flex-wrap gap-5">
  <div className="flex items-center gap-2">
    {Array(5).fill(1).map((_, index) => (
      <Image
        src="/star.svg"
        key={index}
        alt="star"
        width={24}
        height={24}
      />
    ))}
  </div>
</div>

외부 div 요소
className="my-11 flex flex-wrap gap-5": 이 클래스는 여러 CSS 스타일을 적용합니다.
my-11: 위와 아래에 마진(margin)을 적용합니다.

Tailwind CSS에서 11은 일반적으로 특정 크기의 공간을 의미합니다.
flex: Flexbox 레이아웃을 활성화합니다.
flex-wrap: Flexbox 아이템이 컨테이너의 너비를 초과할 경우 줄바꿈을 허용합니다.
gap-5: Flexbox 아이템 사이의 간격을 설정합니다.

내부 div 요소
className="flex items-center gap-2": 이 클래스 역시 여러 스타일을 적용합니다.
flex: Flexbox 레이아웃을 활성화합니다.
items-center: Flexbox 아이템들을 세로 방향 중앙에 정렬합니다.
gap-2: 아이템 사이의 간격을 설정합니다.

Image 컴포넌트
Array(5).fill(1).map((_, index) => (...): 5개의 요소를 가진 배열을 생성하고,

각 요소에 대해 Image 컴포넌트를 렌더링합니다.

fill(1)은 배열을 1로 채우지만, 여기서는 실제 값보다는 반복 횟수가 중요합니다.
src="/star.svg": 이미지 소스로 "/star.svg"를 사용합니다.
key={index}: React에서 배열을 렌더링할 때 각 요소에 고유한 키를 제공합니다.
alt="star": 이미지에 대한 대체 텍스트로 "star"를 사용합니다.
width={24}와 height={24}: 이미지의 너비와 높이를 각각 24픽셀로 설정합니다.
이 코드는 주로 별 모양의 이미지 5개를 가로로 정렬하여 표시하는 데 사용됩니다. 예를 들어, 별점 시스템이나 평가 시스템의 UI 요소로 사용될 수 있습니다.

'키(key)'는 React가 DOM 변경 사항을 효율적으로 감지하고 처리하는 데 도움이 됩니다.

키의 중요성:
성능 최적화: 키는 React에게 각 요소가 어떻게 변화, 추가, 제거되었는지를 알려줍니다. 이를 통해 React는 필요한 부분만을 재렌더링하여 성능을 최적화합니다.

재사용과 재정렬: 배열이나 리스트에서 요소의 순서가 변경되거나, 요소가 추가/삭제될 때,

키를 통해 React는 어떤 요소가 변경되었는지 파악하여 DOM을 효율적으로 업데이트합니다.

키 할당 방법:
주로 데이터의 고유한 값을 키로 사용합니다.

예를 들어, 데이터베이스에서 가져온 아이템의 ID, 혹은 리스트 아이템이 갖는

고유한 속성값 등을 키로 사용할 수 있습니다.

배열의 인덱스를 키로 사용할 수도 있지만,

리스트 아이템의 순서가 자주 바뀌거나 아이템이 추가/삭제되는 경우

문제가 발생할 수 있으므로 권장되지 않습니다.

import { PEOPLE_URL } from "@/constants";
import Image from "next/image";

interface CampProps {
    backgroundImage: string;
    title: string;
    subtitle: string;
    peopleJoined: string;
}
//메인 이미지 타이틀
const CampSite = ({ backgroundImage, title, subtitle, peopleJoined }:
    CampProps) => {
    return(
        <div className={`h-full w-full min-w-[1100px] ${backgroundImage}
        bg-cover bg-no-repeat lg:rounded-r-5xl 2xl:rounded-5xl`}>
            <div className="flex h-full flex-col items-start justify-between
            p-6 lg:px-20 ig:py-10">
                <div className="flexCenter gap-4">
                    <div className="rounded-full bg-green-50 p-4">
                        <Image
                        src="folded-map.svg"
                        alt="map"
                        width={28}
                        height={28}
                        />
                    </div>
                    <div className="flex flex-col gap-1">
                        <h4 className="bold-18 text-white">{title}</h4>
                        <p className="regular-14 text-white">{subtitle}</p>
                    </div>
                </div>
/하단 서브타이틀
                <div className="flexCenter gap-6">
                    <span className="flex -space-x-4 overflow-hidden">
                        {PEOPLE_URL.map((url) => (
                            <Image
                            className="inline-block h-10 w-10 rounded-full"
                            src={url}
                            key={url}
                            alt="person"
                            width={52}
                            height={52}
                            />
                        ))}
                    </span>
                    <p className="bold-16 md:20 text-white">{peopleJoined}</p>
                </div>
            </div>
        </div>
    )
}

클래스명 사용: Tailwind CSS 클래스가 사용되었으며

크기에 따라 다른 스타일을 적용하는 반응형 디자인이 적용되어 있습니다.

2xl:max-container와 같은 클래스명은 Tailwind CSS에서 사용되는 명명 규칙을 따르고 있습니다.

반응형 디자인: lg:와 xl: 접두사를 사용하여 다양한 화면 크기에 대응하는 스타일을 적용했습니다.

이는 더 큰 화면에서 섹션의 마진, 높이 및 패딩을 조정합니다.

컴포넌트 구성: CampSite 컴포넌트는 여러 개의 속성을 전달 받아서 사용하고 있으며,

재사용성을 위해 분리되어 있습니다.

가독성: JSX는 깔끔하게 정리되어 있으며, 클래스명이나 다른 속성들이 잘 정렬되어 있어 코드의 가독성이 좋습니다.

접근성: 이미지 태그에 alt 속성이 포함되어 있어 스크린 리더 사용자를 위한 접근성이 고려되었습니다.

코드 최적화: CampSite 컴포넌트에 동일한 속성 값이 중복되어 있습니다 (title과 peopleJoined).

만약 이 값들이 동일한 컨텍스트를 가진다면 컴포넌트 내에서 기본값을 설정하는 것이 좋을 수 있습니다.

에러 핸들링: 코드에는 에러 핸들링 로직이 보이지 않습니다.

CampSite 컴포넌트가 실패하거나 예상치 못한 입력을 받았을 때를 대비한 처리가 필요할 수 있습니다.

스크롤바 숨기기: hide-scrollbar 클래스는 스타일시트에 정의되어 있어야 하며,

기본 브라우저 스크롤바를 숨기는 스타일을 포함해야 합니다.

이것이 빠졌다면 스크롤바가 여전히 보일 것입니다.

일관성: className의 값에서 텍스트 크기를 지정하는 클래스에 regular-24, md:regular-32, 2xl:regular-64와 같은 사용자 정의 클래스가 보입니다. 이러한 클래스명이 Tailwind CSS의 기본 설정과 일관성을 유지하는지 확인해야 합니다.

SEO 고려사항: 이미지 태그에 alt 속성이 있어 접근성과 SEO에 도움이 되지만,

페이지의 다른 부분에서 SEO를 고려한 요소(예: 메타 태그, 구조화된 데이터)가 있는지 확인해야 합니다.

전반적으로 코드는 잘 작성되어 있지만, 실제 프로덕션 환경에서는 에러 처리, SEO 최적화 및 사용자 정의 클래스의 일관성 등을 추가로 고려해야 할 수 있습니다.

Guide.tsx

import Image from 'next/image'
import React from 'react'

const Guide = () => {
    return (
        <section className='flexCenter flex-col'>
            <div className='padding-container
            max-container w-full pb-24'>
                <Image src="/camp.svg" alt="camp" width={50} height={50}/>
            <p className='uppercase regular-18 -mt-1 mb-3 text-green-50'>
                We are here for you
            </p>
            <div className='flex flex-wrap justify-between gap-5 lg:gap-10'>
                <h2 className='bold-40 lg:bold-64 xl:max-w-[390px]'>Guide You to Easy path</h2>
                <p className='regular-16 text-gray-30 xl:max-w-[520px]'>Only with the hilink application you will no longer gat
                    lost and get lost again, because we already support offline
                    maps when there is no internet connection in the field.
                    Invite your friends, relatives and friends to have fun 
                    in the wilderness through the valley and reach the top of the
                    mountain</p>
            </div>
            </div>
            <div className='flexCenter max-container relative w-full'>
                <Image
                src='/boat.png'
                alt='boat'
                width={1440}
                height={580}
                className='w-fill object-cover object-center 2xl:rounded-5xl'
                />
                <div className='absolute flex bg-white py-8 pl-5 pr-7 gap-3
                rounded-3xl border shadow-md md:left-[5%] lg:top-20'>
                    <Image 
                    src='/meter.svg'
                    alt='meter'
                    width={16}
                    height={158}
                    className='h-full w-auto'/>
                    <div className='flexBetween flex-col'>
                        <div className='flex w-full flex-col'>
                            <div className='flexBetween w-full'>
                                <p className='regular-16 text-gray-20'>Destination</p>
                                <p className='bold-16 text-green-50'>48 min</p>
                            </div>
                            <p className='bold-20 mt-2'>Aguas Calientex</p>
                        </div>
                        <div className='flex w-full flex-col'>
                                <p className='regular-16 text-gray-20'>Start track</p>
                            <p className='bold-20 mt-2 whitespace-nowrap'>Wonorejo Pasuruan</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Guide

구조: 컴포넌트는 두 개의 주요 div로 구성되어 있으며,

모두 최대 너비를 가지고 중앙에 위치하도록 스타일링 되어 있습니다.

이러한 구조는 섹션을 명확하게 구분하고 가독성을 높입니다.

스타일링과 일관성: 클래스명은 일관적으로 사용되었으며, 의미가 명확합니다.

flexCenter, padding-container, max-container 등의 클래스는 해당 스타일시트에서

사용자 정의 클래스로 정의되어 있어야 합니다.

반응형 디자인: lg:와 xl: 접두사를 사용해 대응하는 브레이크포인트에 따른 스타일을 적용했습니다.

이를 통해 다양한 화면 크기에 적절한 레이아웃을 제공합니다.

Next.js의 Image 컴포넌트: 이미지 최적화를 위해 next/image 컴포넌트를 사용했습니다. 이 컴포넌트는 자동으로 이미지를 최적화하고 성능을 향상시킵니다.

접근성: 모든 이미지에 alt 속성이 제공되어 있어, 스크린 리더 사용자에게 도움이 됩니다. 이는 웹 접근성을 높이는 중요한 부분입니다.

에러 핸들링: 컴포넌트 내에서 이미지 경로가 잘못되거나 이미지 로딩에 실패했을 경우를 대비한 에러 핸들링 로직이 보이지 않습니다.

텍스트 오류: gat lost는 get lost로 수정해야 합니다. 또한, friends가 두 번 반복되는데, 이는 의도적인 중복이 아니라면 수정해야 합니다.

클래스명 오류: -mt-1은 음수 마진을 나타냅니다. 이 클래스가 의도한 대로 작동하는지 확인해야 합니다.

SEO 고려사항: 이미지에 alt 태그가 있지만, 페이지의 다른 SEO 관련 요소들(예: 메타 태그)이 고려되었는지는 볼 수 없습니다.

레이아웃 최적화: max-container는 여러 곳에서 사용되고 있는데, 이는 일관된 최대 너비를 설정하는 사용자 정의 클래스로 추정됩니다. 컴포넌트의 크기를 일관되게 유지하는데 도움이 됩니다.

Features

import { FEATURES } from '@/constants'
import Image from 'next/image'
import React from 'react'

const Features = () => {
    return(
        <section className='flex-col flexCenter overflow-hidden
        bg-feature-bg bg-center bg-no-repeat py-24'>
            <div className='max-container padding-container relative w-full flex justify-end'>
                <div className='flex flex-1 lg:min-h-[900px]'>
                    <Image
                    src='/phone.png'
                    alt='phone'
                    width={440}
                    height={1000}
                    className='feature-phone'/>
                </div>

                <div className='z-20 flex w-full flex-col lg:w-[60%]'>
                    <div className='relative'>
                        <Image 
                            src='camp.svg'
                            alt='camp'
                            width={50}
                            height={50}
                            className='absolute left-[-5px] top-[-28px] w-10 lg:w-[50px]'/>
                            <h2 className='bold-40 lg:bold-64'>Our Features</h2>
                    </div>
                    <ul className='mt-10 grid gap-10 md:grid-cols-2 lg:mg-20 ib:gap-20'>
                        {FEATURES.map((feature) => (
                        <FeatureItem 
                        key={feature.title}
                        title={feature.title}
                        icon={feature.icon}
                        description={feature.description}/>
                    ))}</ul>
                </div>
            </div>
        </section>
    )
}

type FeatureItem = {
    title: string;
    icon: string;
    description: string;
}

const FeatureItem = ({ title, icon, description } : 
    FeatureItem ) =>{
    return (
        <li className='flex w-full flex-1 flex-col items-start'>
            <div className='rounded-full p-4 ig:p-7 bg-green-50'>
                <Image src={icon} alt='map' width={28} height={28}/>
            </div>
            <h2 className='bold-20 lg:bold-32 mt-5 capitalize'>
                {title}
            </h2>
            <p className='regular-16 mt-5 bg-white/80 text-gray-30 ig:mt-[30px] ig:bg-none'>
                {description}
            </p>
        </li>
    )
}


export default Features

코드 구조:

import 문을 사용하여 필요한 모듈과 컴포넌트를 불러오고 있습니다.

예를 들어, Image 컴포넌트는 Next.js의 이미지 최적화 기능을 사용하기 위해 불러옵니다.
Features 컴포넌트는 화면에 특징들을 보여주는 주요 부분입니다.
FeatureItem 타입은 각 특징 항목의 속성을 정의합니다 (title, icon, description).
FeatureItem 컴포넌트는 개별 특징 항목을 렌더링하는 데 사용됩니다.

스타일링:
Tailwind CSS를 사용하여 스타일을 적용 , 예를 들어, flex, w-full, bg-green-50 등의 클래스명을 사용했습니다.
반응형 디자인을 위해 다양한 크기의 화면에 대응하는 클래스(lg, md, ig)를 사용했습니다.

기능:
FEATURES 배열에서 각 특징 항목의 데이터를 가져와 FeatureItem 컴포넌트에 전달합니다.
각 FeatureItem은 제목, 아이콘, 설명을 포함합니다.

li태그의 중요성

<li> 태그는 HTML에서 "list item"의 약자로, 목록 항목을 나타내는 데 사용됩니다. 이 태그는 주로 <ul> (unordered list, 즉 순서 없는 목록) 또는 <ol> (ordered list, 순서 있는 목록) 태그 내부에 위치하여 목록의 각 항목을 구분합니다.

FeatureItem 컴포넌트에서 <li> 태그를 사용하는 이유는 다음과 같습니다:

의미론적 HTML 구조: <li> 태그는 웹 문서 내에서 목록 항목을 의미론적으로 나타내는 데 적합합니다.

이는 웹 페이지의 구조를 더 명확하게 만들고, 검색 엔진 최적화(SEO)와 접근성에 긍정적인 영향을 미칩니다.

스타일링과 조직: 목록 항목을 <li> 태그로 구분함으로써, 각 항목에 대한 스타일링과 관리가 용이해집니다.

CSS를 사용하여 각 목록 항목의 레이아웃, 여백, 배경 등을 통제할 수 있습니다.

접근성: 스크린 리더와 같은 보조 기술은 <li> 태그를 사용하여 목록 항목을 사용자에게 명확하게 전달합니다.

이는 시각 장애가 있는 사용자들이 웹 콘텐츠를 더 쉽게 탐색하고 이해할 수 있게 합니다.

코드의 맥락에서, FeatureItem 컴포넌트는 아마도 <ul> 또는 <ol> 태그 내부에서 여러 번 호출되어 각각의 특징들을 목록 형태로 표시하고자 하는 목적으로 사용되는 것으로 보입니다.

또한 코드의 자식요소들이 많아질수록 flex태그를 신경써서 사용을 해줘야지만 원하는 위치에

요소구현이 가능합니다

alt 속성에 이름을 지정하는 주요 이유는?

접근성(Accessibility): alt 속성은 시각 장애가 있는 사용자들이 스크린 리더를 통해 이미지의 내용을 이해할 수 있도록 돕습니다. 스크린 리더는 alt 속성의 텍스트를 읽어 사용자에게 이미지의 내용을 전달합니다.

이미지 로딩 실패 시 대체 텍스트: 만약 이미지가 로딩되지 않을 경우, alt 속성에 지정된 텍스트가 이미지 대신 표시됩니다. 이는 사용자에게 이미지의 내용을 전달하는 데 도움이 됩니다.

검색 엔진 최적화(SEO): 검색 엔진은 이미지의 alt 텍스트를 분석하여 이미지의 내용과 관련성을 이해합니다. 이는 이미지가 검색 결과에 적절하게 나타나도록 하는 데 중요한 역할을 합니다.

Footer

import { FOOTER_CONTACT_INFO, FOOTER_LINKS, SOCIALS } from '@/constants'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'

const Footer = () => {
    return(
        <footer className='flexCenter mb-24'>
            <div className='padding-container max-container flex w-full
            flex-col gap-14'>
                <div className='flex flex-col items-start justify-center
                gap-[10%] md:flex-row'>
                    <Link href='/' className='mb-10'>
                        <Image src='hilink-logo.svg' alt='logo' width={74} height={29} />
                    </Link>

                    <div className='flex flex-wrap gap-10 sm:justify-between md:flex-1'>
                        {FOOTER_LINKS.map((columns) => (
                            <FooterColumn title={columns.title}>
                                <ul className='regular-14 flex flex-col gap-4 text-gray-30'>
                                    {columns.links.map((link) => (
                                        <Link href='/' key={link}>
                                            {link}
                                        </Link>
                                    ))}
                                </ul>
                            </FooterColumn>
                        ))}

                        <div className='flex flex-col gap-5'>
                            <FooterColumn title={FOOTER_CONTACT_INFO.title}>
                                <ul className='regular-14 flex gap-4 text-gray-30'>
                                {FOOTER_CONTACT_INFO.links.map((link) => (
                                    <Link
                                    href='/'
                                    key={link.label}
                                    className='flex gap-4 md:flex-col lg:flex-row'
                                    >
                                        <p className='Whitespace-nowrap'>
                                            {link.label}:
                                        </p>
                                        <p className='medium-14 whitespace-nowrap text-blue-70'>
                                            {link.value}
                                        </p>
                                    </Link>
                                ))}
                                </ul>
                            </FooterColumn>
                        </div>

                        <div className='flex flex-col gap-5'>
                            <FooterColumn title={SOCIALS.title}>
                                <ul className='regular-14 flex gap-4 text-gray-30'>
                                    {SOCIALS.links.map((link) => (
                                        <Link href='/' key={link}>
                                            <Image src={link} alt='logo' width={24} 
                                            height={24} />
                                        </Link>
                                    ))}
                                </ul>
                            </FooterColumn>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    )
}

type FooterColumnProps = {
    title: string;
    children: React.ReactNode;
}



const FooterColumn = ({ title, children} : FooterColumnProps ) =>{
    return(
        <div className='flex flex-col gap-5'>
        <h4 className='bold-18 whitespace-nowrap'>{title}</h4>
        {children}
        </div>
    )
}

export default Footer

// NAVIGATION
export const NAV_LINKS = [
    { href: '/', key: 'home', label: 'Home' },
    { href: '/', key: 'how_hilink_work', label: 'How Hilink Work?' },
    { href: '/', key: 'services', label: 'Services' },
    { href: '/', key: 'pricing ', label: 'Pricing ' },
    { href: '/', key: 'contact_us', label: 'Contact Us' },
  ];
  
  // CAMP SECTION
  export const PEOPLE_URL = [
    '/person-1.png',
    '/person-2.png',
    '/person-3.png',
    '/person-4.png',
  ];
  
  // FEATURES SECTION
  export const FEATURES = [
    {
      title: 'Real maps can be offline',
      icon: '/map.svg',
      variant: 'green',
      description:
        'We provide a solution for you to be able to use our application when climbing, yes offline maps you can use at any time there is no signal at the location',
    },
    {
      title: 'Set an adventure schedule',
      icon: '/calendar.svg',
      variant: 'green',
      description:
        "Schedule an adventure with friends. On holidays, there are many interesting offers from Hilink. That way, there's no more discussion",
    },
    {
      title: 'Technology using augment reality',
      icon: '/tech.svg',
      variant: 'green',
      description:
        'Technology uses augmented reality as a guide to your hiking trail in the forest to the top of the mountain. Already supported by the latest technology without an internet connection',
    },
    {
      title: 'Many new locations every month',
      icon: '/location.svg',
      variant: 'orange',
      description:
        'Lots of new locations every month, because we have a worldwide community of climbers who share their best experiences with climbing',
    },
  ];
  
  // FOOTER SECTION
  export const FOOTER_LINKS = [
    {
      title: 'Learn More',
      links: [
        'About Hilink',
        'Press Releases',
        'Environment',
        'Jobs',
        'Privacy Policy',
        'Contact Us',
      ],
    },
    {
      title: 'Our Community',
      links: ['Climbing xixixi', 'Hiking hilink', 'Hilink kinthill'],
    },
  ];
  
  export const FOOTER_CONTACT_INFO = {
    title: 'Contact Us',
    links: [
      { label: 'Admin Officer', value: '123-456-7890' },
      { label: 'Email Officer', value: 'hilink@akinthil.com' },
    ],
  };
  
  export const SOCIALS = {
    title: 'Social',
    links: [
      '/facebook.svg',
      '/instagram.svg',
      '/twitter.svg',
      '/youtube.svg',
      '/wordpress.svg',
    ],
  };

Footer 컴포넌트:
Footer 함수형 컴포넌트는 웹사이트의 하단 부분을 구성합니다.
Tailwind CSS를 활용하여 스타일링이 적용되어 있으며, flexCenter, mb-24, flex, gap-14 등의 클래스를 사용합니다.

상수 데이터 사용:
@/constants에서 FOOTER_LINKS, FOOTER_CONTACT_INFO, SOCIALS 등의 데이터를 불러와서 사용합니다.

이러한 방식은 코드의 관리를 용이하게 하며 재사용성을 높여줍니다.

FooterColumn 컴포넌트:
FooterColumn 컴포넌트는 각 푸터 열(칼럼)을 구현합니다. title과 children props를 받아 사용합니다.
이 컴포넌트는 푸터의 각 섹션 제목과 내용(자식 요소)을 표시합니다.

Link와 Image 컴포넌트:
Next.js의 Link와 Image 컴포넌트를 사용하여 이미지와 링크를 최적화된 방식으로 표시합니다.

맵핑된 데이터 렌더링:
FOOTER_LINKS 배열의 각 항목을 FooterColumn 컴포넌트를 사용하여 렌더링합니다.
FOOTER_CONTACT_INFO와 SOCIALS의 데이터도 유사한 방식으로 처리합니다.

반응형 디자인:
md:flex-row와 같은 Tailwind CSS 클래스를 사용하여 중단점(breakpoint)에 따라 레이아웃을 조정합니다.

이 코드는 모듈화된 접근 방식을 통해 재사용 가능한 컴포넌트를 생성하고, 외부 데이터 파일을 통해 콘텐츠를 관리하는 효과적인 방법을 보여줍니다. 이는 유지보수가 용이하며, 코드의 가독성을 향상시키는 방법입니다.

 <div className='border bg-gray-20' />
            <p className='regular-14 w-full text-center text-gray-30'>
                2023 Hilink | All rights reserved
            </p>
            </div>

최하단 설명란까지 제작한 이후에 기초 캠핑웹사이트 구현은 마치겠습니다 :)!

웹사이즈의 구현화면입니다

앱사이즈의 구현화면입니다

Augusta Ada King, Countess of Lovelace

Augusta Ada King, Countess of Lovelace

태그

최근글

댓글

공지사항

아카이브

티스토리툴바