cursor ai로 사이트를 만들고 있다. 그런데 어떻게 어떻게(=ai에 돈을 써서)만들고는 있는데, 이걸 내가 뭘 하고 있는건지 이해는 못함. 그래서 공부를 시작했다. 내가(아니, 돈 내고 쓰는 ai가)만든 코드를 다시 ai에게 물어보며 학습하는 것.
오늘 처음으로 React와 Next.js에 대해 학습을 시작했다.
JavaScript도 모르는데, 어느새 나는 TypeScript를 쓰고 있었던 것이었다… Wow!!
// 주문서처럼 필요한 정보를 전달
<StorySection
title="메뉴이름" // 필수 항목
content="설명" // 필수 항목
summary="요약" // 선택 항목 (?)
/>
// 어떤 정보가 필요한지 미리 정의
interface StorySectionProps {
background: string; // 필수로 필요!
title: string; // 필수로 필요!
summary?: string; // 있으면 좋고, 없어도 됨
}
// HTML과 비슷하게 생겼지만, 더 많은 기능을 제공
function StorySection({ title, content }) {
return (
<div>
<h1>{title}</h1>
<p>{content}</p>
</div>
);
}
// 좋은 예:
StorySection
Header
MainContent
// 나쁜 예:
storySection // ❌
header // ❌
StorySection.tsx
Header.tsx
// 좋은 예:
UserProfile
NavigationMenu
ProductCard
// 나쁜 예:
Thing1 // ❌
Component // ❌
Div1 // ❌
// 일반적인 패턴들:
xxxContainer // 다른 컴포넌트를 담는 컨테이너
xxxList // 목록
xxxItem // 목록의 항목
xxxCard // 카드 형태의 UI
xxxButton // 버튼
xxxLayout // 레이아웃
// HTML 태그는 소문자
<div>
<span>
<button>
// 커스텀 컴포넌트는 대문자
<StorySection>
<Header>
<CustomButton>
// HTML 속성
<img src="이미지.jpg" class="클래스">
// React props
<StorySection
background="이미지.jpg"
className="클래스" // class 대신 className 사용
/>
// HTML에서는 가능하지만
<img src="이미지.jpg">
// React에서는 반드시 닫아야 함
<img src="이미지.jpg" />