{"id":112,"date":"2026-06-26T13:32:39","date_gmt":"2026-06-26T13:32:39","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=112"},"modified":"2026-06-26T13:32:39","modified_gmt":"2026-06-26T13:32:39","slug":"%ec%99%84%ec%84%b1-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=112","title":{"rendered":"\uc644\uc131_\uc815\ub9ac"},"content":{"rendered":"

09. \uc644\uc131 \ubc0f \uc624\ub958 \uc815\ub9ac<\/h1>\n

\ucd5c\uc885 \ud30c\uc77c \ubaa9\ub85d<\/h2>\n
src\/\n\u251c\u2500\u2500 main.jsx            \u2705 \ub77c\uc6b0\ud130 \uc5f0\uacb0\n\u251c\u2500\u2500 router.js           \u2705 \ub77c\uc6b0\ud130 \uc124\uc815\n\u251c\u2500\u2500 App.jsx             \u2705 01\ub2e8\uacc4\n\u251c\u2500\u2500 index.css           \u2705 \uac01 \ub2e8\uacc4\uc5d0\uc11c \ucd94\uac00\n\u2514\u2500\u2500 components\/\n    \u251c\u2500\u2500 SectionTitle.jsx   \u2705 05\ub2e8\uacc4\n    \u251c\u2500\u2500 Nav.jsx            \u2705 03\ub2e8\uacc4\n    \u251c\u2500\u2500 Hero.jsx           \u2705 04\ub2e8\uacc4\n    \u251c\u2500\u2500 AboutMe.jsx        \u2705 05\ub2e8\uacc4\n    \u251c\u2500\u2500 Projects.jsx       \u2705 06\ub2e8\uacc4\n    \u251c\u2500\u2500 Contact.jsx        \u2705 07\ub2e8\uacc4\n    \u2514\u2500\u2500 Footer.jsx         \u2705 08\ub2e8\uacc4\n<\/code><\/pre>\n
\n
\uc804\uccb4 index.css \ucd5c\uc885\ubcf8<\/h2>\n
\ubaa8\ub4e0 \ub2e8\uacc4\uc5d0\uc11c \ucd94\uac00\ud55c CSS\ub97c \ud558\ub098\ub85c \uc815\ub9ac\ud55c \ubc84\uc804\uc785\ub2c8\ub2e4.<\/p>\n
\/* src\/index.css *\/\n\n\/* \u2500\u2500\u2500 \ucd08\uae30\ud654 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@import "reset-css\/reset.css";\n\nbody {\n  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;\n  background-color: #ffffff;\n  color: #1e1e1e;\n}\n\na {\n  text-decoration: none;\n  color: inherit;\n}\n\nul {\n  list-style: none;\n}\n\n.container {\n  padding: 0 10vw;\n  margin: 0 auto;\n}\n\n\/* \u2500\u2500\u2500 Nav \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 99px;\n  padding: 0 24px;\n  background-color: #ffffff;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.nav-list {\n  display: flex;\n  gap: 8px;\n}\n\n.nav-item {\n  display: inline-block;\n  padding: 8px 16px;\n  border-radius: 100px;\n  font-size: 16px;\n  color: #1e1e1e;\n  transition: background-color 0.2s;\n}\n\n.nav-item:hover,\n.nav-item--active {\n  background-color: #f5f5f5;\n}\n\n\/* \u2500\u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.hero {\n  height: 524px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 40px;\n  padding: 0 24px;\n}\n\n.hero-title {\n  font-size: 72px;\n  font-weight: 700;\n  color: #0c0c0d;\n  line-height: 1.2;\n}\n\n.hero-subtitle {\n  font-size: 32px;\n  color: #0c0c0d;\n  margin-top: 8px;\n}\n\n.hero-buttons {\n  display: flex;\n  gap: 16px;\n}\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 0 20px;\n  height: 40px;\n  border-radius: 6px;\n  font-size: 16px;\n  cursor: pointer;\n  transition: opacity 0.2s;\n}\n\n.btn--light { background-color: #e3e3e3; color: #1e1e1e; }\n.btn--dark  { background-color: #2c2c2c; color: #f5f5f5; }\n.btn:hover  { opacity: 0.8; }\n\n\/* \u2500\u2500\u2500 \uc139\uc158 \uc81c\ubaa9 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.section-title {\n  margin-bottom: 48px;\n}\n\n.section-title__row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-bottom: 8px;\n}\n\n.section-title__line {\n  width: 2px;\n  height: 36px;\n  background-color: #000;\n}\n\n.section-title__text {\n  font-size: 48px;\n  font-weight: 700;\n  color: #000;\n}\n\n.section-title__sub {\n  font-size: 16px;\n  color: #555555;\n  padding-left: 18px;\n}\n\n\/* \u2500\u2500\u2500 AboutMe \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.about {\n  padding: 80px 24px;\n}\n\n.about-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 40px;\n}\n\n.about-block { margin-bottom: 32px; }\n\n.about-block__title {\n  font-size: 18px;\n  font-weight: 600;\n  color: #333333;\n  margin-bottom: 16px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #eeeeee;\n}\n\n.about-block__item {\n  display: flex;\n  gap: 16px;\n  padding: 12px 0;\n  font-size: 16px;\n  color: #747474;\n  border-bottom: 1px solid #f5f5f5;\n}\n\n.about-block__date {\n  color: #555555;\n  white-space: nowrap;\n  min-width: 100px;\n}\n\n.info-row {\n  display: flex;\n  gap: 16px;\n  padding: 8px 0;\n  font-size: 16px;\n  border-bottom: 1px solid #f5f5f5;\n}\n\n.info-row__label { width: 70px; color: #3a3a3a; }\n.info-row__value { color: #727272; }\n\n\/* \u2500\u2500\u2500 Projects \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.projects {\n  padding: 80px 24px;\n}\n\n.project-item {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  margin-bottom: 40px;\n  border: 1px solid #f0f0f0;\n}\n\n.project-desc {\n  padding: 40px;\n  background-color: #ffffff;\n}\n\n.project-number {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.project-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: #f26440;\n}\n\n.project-number__text { font-size: 12px; color: #c7c7c7; }\n\n.project-title {\n  font-size: 32px;\n  font-weight: 700;\n  color: #000;\n  margin-bottom: 24px;\n}\n\n.project-info {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 32px;\n}\n\n.project-info__row {\n  display: flex;\n  gap: 8px;\n  font-size: 18px;\n  color: #555555;\n}\n\n.project-info__label {\n  min-width: 140px;\n  flex-shrink: 0;\n}\n\n.project-buttons { display: flex; gap: 16px; }\n\n.project-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 160px;\n  height: 52px;\n  background-color: #000;\n  color: #fff;\n  font-size: 18px;\n  transition: background-color 0.2s;\n}\n\n.project-btn:hover { background-color: #333; }\n\n.project-image {\n  background-color: #e8e8e8;\n  min-height: 447px;\n}\n\n\/* \u2500\u2500\u2500 Contact \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.contact {\n  padding: 80px 24px;\n}\n\n.contact-form {\n  width: 320px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.form-label {\n  font-size: 16px;\n  font-weight: 500;\n  color: #1e1e1e;\n}\n\n.form-input,\n.form-textarea {\n  padding: 0 12px;\n  border: 1px solid #d0d0d0;\n  border-radius: 4px;\n  font-size: 16px;\n  color: #1e1e1e;\n  outline: none;\n  width: 100%;\n}\n\n.form-input { height: 40px; }\n.form-textarea { height: 80px; padding: 10px 12px; resize: none; }\n\n.form-input::placeholder,\n.form-textarea::placeholder { color: #b3b3b3; }\n\n.form-input:focus,\n.form-textarea:focus { border-color: #2c2c2c; }\n\n.form-buttons { display: flex; gap: 12px; }\n\n.form-btn {\n  height: 40px;\n  padding: 0 20px;\n  border: none;\n  border-radius: 4px;\n  font-size: 16px;\n  cursor: pointer;\n  transition: opacity 0.2s;\n}\n\n.form-btn--cancel  { background-color: #f0f0f0; color: #303030; }\n.form-btn--submit  { flex: 1; background-color: #2c2c2c; color: #f5f5f5; }\n.form-btn:hover    { opacity: 0.8; }\n\n\/* \u2500\u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500  *\/\n.footer {\n  padding: 60px 24px;\n  border-top: 1px solid #f0f0f0;\n}\n\n.footer-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 40px;\n}\n\n.footer-thanks { font-size: 20px; font-weight: 500; color: #1e1e1e; }\n\n.footer-sns {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n\n.footer-sns__item {\n  display: flex;\n  align-items: center;\n  opacity: 0.7;\n  transition: opacity 0.2s;\n}\n\n.footer-sns__item:hover { opacity: 1; }\n\n.footer-copy { font-size: 14px; color: #1e1e1e; }\n<\/code><\/pre>\n
\n
\uc790\uc8fc \ubc1c\uc0dd\ud558\ub294 \uc624\ub958 \ubaa8\uc74c<\/h2>\n
1. \ud654\uba74\uc774 \uc548 \ubc14\ub00c\uc5b4\uc694<\/h3>\n
\u2705 \uccb4\ud06c\ub9ac\uc2a4\ud2b8\n\u25a1 \ud30c\uc77c \uc800\uc7a5\ud588\ub098\uc694? (Ctrl+S)\n\u25a1 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc0c8\ub85c\uace0\uce68\ud588\ub098\uc694?\n\u25a1 \ud130\ubbf8\ub110\uc5d0 \ube68\uac04 \uc5d0\ub7ec\uac00 \uc788\ub098\uc694?\n<\/code><\/pre>\n
2. \ube68\uac04 \uc5d0\ub7ec: Module not found<\/code><\/h3>\n
Error: Cannot find module '.\/components\/Nav'\n<\/code><\/pre>\n
\uc6d0\uc778<\/strong>: \ud30c\uc77c \uacbd\ub85c\ub098 \uc774\ub984\uc774 \ud2c0\ub838\uc2b5\ub2c8\ub2e4.<\/p>\n
\/\/ App.jsx\uac00 src\/ \uc5d0 \uc788\ub2e4\uba74\nimport Nav from '.\/components\/Nav'   \/\/ \u2705\nimport Nav from '.\/Components\/Nav'   \/\/ \u274c \ub300\uc18c\ubb38\uc790 \uc8fc\uc758\nimport Nav from '..\/components\/Nav'  \/\/ \u274c \uacbd\ub85c \ubc29\ud5a5 \uc8fc\uc758\n<\/code><\/pre>\n
3. \ube68\uac04 \uc5d0\ub7ec: is not a function<\/code> \ub610\ub294 \ud074\ub9ad\ud574\ub3c4 \ubc18\uc751 \uc5c6\uc74c<\/h3>\n
\/\/ \u274c \ud074\ub9ad \uc989\uc2dc \uc2e4\ud589\ub428\nonClick={handleReset()}\n\n\/\/ \u2705 \ud074\ub9ad\ud560 \ub54c\ub9cc \uc2e4\ud589\ub428\nonClick={handleReset}\n\n\/\/ \uc778\uc790\uac00 \ud544\uc694\ud55c \uacbd\uc6b0\nonClick={() => handleDelete(item.id)}\n<\/code><\/pre>\n
4. \uacbd\uace0: Each child in a list should have a unique "key" prop<\/code><\/h3>\n
\/\/ \u274c key \uc5c6\uc74c\n{items.map((item) => <li>{item}<\/li>)}\n\n\/\/ \u2705 key \ucd94\uac00\n{items.map((item) => <li key={item.id}>{item.name}<\/li>)}\n<\/code><\/pre>\n
5. \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9 \uc548 \ub3fc\uc694<\/h3>\n
\/\/ \u274c HTML \ubc29\uc2dd\n<div class="nav">\n\n\/\/ \u2705 JSX \ubc29\uc2dd\n<div className="nav">\n<\/code><\/pre>\n
\n
\ud575\uc2ec \uac1c\ub150 \ud55c\ub208\uc5d0 \ubcf4\uae30<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n
\uac1c\ub150<\/th>\n\ubb38\ubc95<\/th>\n\uc0ac\uc6a9 \uc608<\/th>\n<\/tr>\n<\/thead>\n
\ucef4\ud3ec\ub10c\ud2b8<\/td>\nconst Nav = () => { return <div\/> }<\/code><\/td>\n\ud654\uba74 \ube14\ub85d \ub2e8\uc704<\/td>\n<\/tr>\n
props<\/td>\n<Title text="Hello" \/><\/code><\/td>\n\ub370\uc774\ud130 \uc804\ub2ec<\/td>\n<\/tr>\n
useState<\/td>\nconst [v, setV] = useState(\ucd08\uae30\uac12)<\/code><\/td>\n\ubcc0\ud558\ub294 \uac12 \uad00\ub9ac<\/td>\n<\/tr>\n
\uc870\uac74\ubd80 \ub80c\ub354\ub9c1<\/td>\n{\uc870\uac74 ? A : B}<\/code><\/td>\n\uc0c1\ud669\uc5d0 \ub530\ub77c \ub2e4\ub978 \ud654\uba74<\/td>\n<\/tr>\n
map<\/td>\n{list.map(item => <li key={item.id}\/>)}<\/code><\/td>\n\ubaa9\ub85d \ubc18\ubcf5 \ucd9c\ub825<\/td>\n<\/tr>\n
\uc774\ubca4\ud2b8<\/td>\nonClick={\ud568\uc218}<\/code><\/td>\n\ud074\ub9ad, \uc785\ub825 \ucc98\ub9ac<\/td>\n<\/tr>\n
\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8<\/td>\nvalue={state} onChange={\ud578\ub4e4\ub7ec}<\/code><\/td>\n\ud3fc \uc785\ub825 \uad00\ub9ac<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"
09. \uc644\uc131 \ubc0f \uc624\ub958 \uc815\ub9ac \ucd5c\uc885 \ud30c\uc77c \ubaa9\ub85d src\/ \u251c\u2500\u2500 main.jsx \u2705 \ub77c\uc6b0\ud130 \uc5f0\uacb0 \u251c\u2500\u2500 router.js \u2705 \ub77c\uc6b0\ud130 \uc124\uc815 \u251c\u2500\u2500 App.jsx \u2705 01\ub2e8\uacc4 \u251c\u2500\u2500 index.css \u2705 \uac01 \ub2e8\uacc4\uc5d0\uc11c \ucd94\uac00 \u2514\u2500\u2500 components\/ \u251c\u2500\u2500 SectionTitle.jsx \u2705 05\ub2e8\uacc4 \u251c\u2500\u2500 Nav.jsx \u2705 03\ub2e8\uacc4 \u251c\u2500\u2500 Hero.jsx \u2705 04\ub2e8\uacc4 \u251c\u2500\u2500 AboutMe.jsx \u2705 05\ub2e8\uacc4 \u251c\u2500\u2500 Projects.jsx \u2705 06\ub2e8\uacc4 \u251c\u2500\u2500 Contact.jsx \u2705 07\ub2e8\uacc4 … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-112","post","type-post","status-publish","format-standard","hentry","category-react-resume"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=112"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/112\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}