πͺ 2023. 08. 15. Tuesday_ μλͺ© λκ°...γ γ γ πͺ
β
* μ€λμ 'Study-Day01'μμ 곡λΆν 'μλ¨μ΄ 볡μ΅λ
ΈνΈ λ§λ€κΈ°-(1)' λ΄μ© μ 리μ
λλ€.
β
β
β
node --version
β
npx create-nex-app@latest [ν΄λλͺ
μ μ΄μ£ΌκΈ°]
@tailwind base;
@tailwind components;
@tailwind utilities;
import { NextPage } from "next";
const Home: NextPage = () => {
return <main>Home</main>;
};
export default Home;
npm run dev
β
β
β
#ν
νλ¦Ώ 리ν°λ΄ μ¬μ© : λ³μκ° μλ κ³³μ μμ±κ°μ λμ μΌλ‘ λ³κ²½νκΈ° μν΄ μ¬μ©ν¨.
return (
<html lang="en">
<body className={`${inter.className} max-w-screen-sm mx-auto`}>
{children}
</body>
</html>
);
β
β
import { FC } from "react";
β
type DayCardProps = {
index: number;
};
β
const DayCard: FC<DayCardProps> = ({ index }) => {
return (
<li className="text-center border-black border-2 font-medium rounded-lg shadow-md shadow-gray-300">
<button>Day {index + 1}</button>
</li>
);
};
export default DayCard;
β
# v κ°μ μ¬μ©νμ§ μμ μμ μ΄λΈλ‘ '_'λ‘ λ체ν΄μ€λ€.
{data.map((_, i) => (
<DayCard key={i} index={i} />
))}
β
β
β
β β β
μμ ν λΆλΆμ΄ μλ€λ©΄, μλ €μ£ΌμΈμ~!~ π