{"id":110,"date":"2026-06-26T13:32:39","date_gmt":"2026-06-26T13:32:39","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=110"},"modified":"2026-06-26T13:32:39","modified_gmt":"2026-06-26T13:32:39","slug":"app","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=110","title":{"rendered":"App"},"content":{"rendered":"

01. App.jsx \u2014 \uc804\uccb4 \ub808\uc774\uc544\uc6c3 \uc870\ub9bd<\/h1>\n

\uc774\ubc88 \ub2e8\uacc4\uc5d0\uc11c \ud560 \uc77c<\/h2>\n

\ub9cc\ub4e4 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 App.jsx<\/code> \uc5d0 \ubbf8\ub9ac \ubc30\uce58\ud569\ub2c8\ub2e4.
\n\uc9c0\uae08\uc740 \ube48 \uaecd\ub370\uae30\ub9cc \ub9cc\ub4e4\uace0, \ub2e4\uc74c \ub2e8\uacc4\uc5d0\uc11c \ud558\ub098\uc529 \ucc44\uc6cc\ub098\uac11\ub2c8\ub2e4.<\/p>\n

\n

App.jsx \uc5ed\ud560<\/h2>\n
App.jsx\n  \u251c\u2500\u2500 <Nav \/>        \u2190 \ub124\ube44\uac8c\uc774\uc158\n  \u251c\u2500\u2500 <Hero \/>       \u2190 \ud788\uc5b4\ub85c \uc139\uc158\n  \u251c\u2500\u2500 <main>\n  \u2502     \u251c\u2500\u2500 <AboutMe \/>   \u2190 \uc18c\uac1c\n  \u2502     \u251c\u2500\u2500 <Projects \/>  \u2190 \ud504\ub85c\uc81d\ud2b8\n  \u2502     \u2514\u2500\u2500 <Contact \/>   \u2190 \uc5f0\ub77d\ucc98\n  \u2502   <\/main>\n  \u2514\u2500\u2500 <Footer \/>     \u2190 \ud558\ub2e8 \ud478\ud130\n<\/code><\/pre>\n
\n
STEP 1 \u2014 \ube48 \ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c 6\uac1c \ub9cc\ub4e4\uae30<\/h2>\n
src\/components\/<\/code> \ud3f4\ub354\ub97c \ub9cc\ub4e4\uace0 \uc544\ub798 \ud30c\uc77c\ub4e4\uc744 \uac01\uac01 \uc0dd\uc131\ud569\ub2c8\ub2e4.
\n\uc9c0\uae08\uc740 \uc774\ub984\ub9cc \ud45c\uc2dc\ub418\ub294 \ub2e8\uc21c\ud55c \ub0b4\uc6a9\uc73c\ub85c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
src\/components\/Nav.jsx<\/code><\/h3>\n
const Nav = () => {\n  return <div>Nav<\/div>\n}\nexport default Nav\n<\/code><\/pre>\n
src\/components\/Hero.jsx<\/code><\/h3>\n
const Hero = () => {\n  return <div>Hero<\/div>\n}\nexport default Hero\n<\/code><\/pre>\n
src\/components\/AboutMe.jsx<\/code><\/h3>\n
const AboutMe = () => {\n  return <div>AboutMe<\/div>\n}\nexport default AboutMe\n<\/code><\/pre>\n
src\/components\/Projects.jsx<\/code><\/h3>\n
const Projects = () => {\n  return <div>Projects<\/div>\n}\nexport default Projects\n<\/code><\/pre>\n
src\/components\/Contact.jsx<\/code><\/h3>\n
const Contact = () => {\n  return <div>Contact<\/div>\n}\nexport default Contact\n<\/code><\/pre>\n
src\/components\/Footer.jsx<\/code><\/h3>\n
const Footer = () => {\n  return <div>Footer<\/div>\n}\nexport default Footer\n<\/code><\/pre>\n
\n
STEP 2 \u2014 App.jsx \uc791\uc131<\/h2>\n
\/\/ src\/App.jsx\nimport Nav     from '.\/components\/Nav'\nimport Hero    from '.\/components\/Hero'\nimport AboutMe from '.\/components\/AboutMe'\nimport Projects from '.\/components\/Projects'\nimport Contact from '.\/components\/Contact'\nimport Footer  from '.\/components\/Footer'\n\nconst App = () => {\n  return (\n    <div className="app container">\n      <Nav \/>\n      <Hero \/>\n      <main>\n        <AboutMe \/>\n        <Projects \/>\n        <Contact \/>\n      <\/main>\n      <Footer \/>\n    <\/div>\n  )\n}\n\nexport default App\n<\/code><\/pre>\n
\n
\ucf54\ub4dc \uc124\uba85<\/h2>\n
import \ub780?<\/h3>\n
\ub2e4\ub978 \ud30c\uc77c\uc5d0\uc11c \ub9cc\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubd88\ub7ec\uc624\ub294 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
import Nav from '.\/components\/Nav'\n\/\/     \u2191          \u2191\n\/\/  \ub0b4\uac00 \ubd80\ub97c \uc774\ub984  \ud30c\uc77c \uacbd\ub85c\n<\/code><\/pre>\n