๐Ÿ€ FES 11, 12์ฃผ์ฐจ ํšŒ๊ณ 

Mooongsยท2022๋…„ 6์›” 20์ผ
0

ํ”„๋ก ํŠธ์—”ํŠธ์Šค์ฟจ

๋ชฉ๋ก ๋ณด๊ธฐ
22/28
post-thumbnail
post-custom-banner

โœจ FACT

  • ใ€Œ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธใ€ 06์žฅ ํ”„๋กœํ† ํƒ€์ž… ๋ถ€๋ถ„์„ ์ฝ๊ณ  ์ •๋ฆฌํ–ˆ๋‹ค.
  • 1์ผ 1ํ•จ์ˆ˜ ์Šคํ„ฐ๋””์— ์ฃผ5์ผ ๊พธ์ค€ํžˆ ์ฐธ์—ฌํ–ˆ๋‹ค. (JS ๋ณต์Šต + ๋ฆฌ์•กํŠธ๋กœ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๊ฐ™์€ ๊ฐ„๋‹จํ•œ ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ)
  • freeCodeCamp JS ํŒŒํŠธ๋ฅผ ๋ชจ๋‘ ํ’€์—ˆ๋‹ค.
  • ใ€Œ๊ฐœ๋ฐœ์ž๋กœ ์‚ด์•„๋‚จ๊ธฐใ€๋ฅผ ์ฝ์—ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋กœ์„œ์˜ 30๋…„ ์ปค๋ฆฌ์–ด์— ๋Œ€ํ•ด ๋‚˜๋ˆ ์ ธ ์žˆ๋Š”๋ฐ, ํŒ€ํ”„๋กœ์ ํŠธ, ์‹ ์ž… ๊ฐœ๋ฐœ์ž์— ๊ด€ํ•œ ํŒ์„ ์–ป๊ณ ์ž ๊ฐœ๋ฐœ์ž๋กœ์„œ์˜ ์ปค๋ฆฌ์–ด ์ค‘ ์ฒซ 10๋…„์— ๋Œ€ํ•ด ์“ฐ์‹  ๋ถ€๋ถ„์„ ์ง‘์ค‘์ ์œผ๋กœ ์ฝ์—ˆ๋‹ค.
  • ์›Œ๋‹ˆ๋‹˜์˜ 2์ฐจ ์ด๋ ฅ์„œ ํŠน๊ฐ•์—์„œ ์ด๋ ฅ์„œ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์•˜๋‹ค. ์†Œ๊ฐœ๊ธ€์ด ์ข‹์•˜๊ณ  skills, project๊ฐ€ ์ž˜ ๋ณด์˜€์ง€๋งŒ project์—์„œ ๊ฐœ์„ ํ•œ ๋“ฑ์„ ๋” ๊ฐ•์กฐํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ๋ง์”€ํ•ด์ฃผ์…จ๋‹ค. + ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„์€ 2weeks ์ด๋Ÿฐ ๊ฒƒ๋ณด๋‹ค ๊ตฌ์ฒด์ ์ธ ๊ธฐ๊ฐ„์„ ๋ช…์‹œํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ
  • ๋ฆฌ์•กํŠธ๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด ์ •๋ง ๋งŽ์€ ์ž๋ฃŒ๋ฅผ ์ฐพ์•„๋ณด๊ณ  ์ธ๊ฐ•์˜ ํž˜์„ ๋นŒ๋ ธ๋‹ค. (์ธํ”„๋Ÿฐ, ์ฝ”๋”ฉ ์• ํ”Œ, ๋ณ„์ฝ”๋”ฉ, ๊ฐœ๋ฐœ ํ™”๋ผ๋ฆฌ๋‹˜ ๋“ฑ๋“ฑ)
  • ์ธํ”„๋Ÿฐ ใ€Œ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธใ€ ๊ฐ•์˜์—์„œ ๋ฏธ๋‹ˆ ๋ธ”๋กœ๊ทธ ๋งŒ๋“ค๊ธฐ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•ด๋ณด๊ณ  ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ ๋ฆฌ์•กํŠธ ๊ณผ์ œ๋ฅผ ์ง„ํ–‰์ค‘์— ์žˆ๋‹ค.
  • ํ–ฅ์ˆ˜ ํ…Œ์ŠคํŠธ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ์—์„œ ์ผ๋ถ€์— ์‚ฌ์šฉ๋˜์—ˆ๋˜ ์ œ์ด์ฟผ๋ฆฌ ๋ฌธ๋ฒ•์„ ๋‹ค ๋ฐ”๊พธ๊ณ , ์ž˜๋ชป๋˜์–ด ์žˆ์—ˆ๋˜ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์ˆ˜์ •ํ–ˆ๋‹ค. ์ œํ’ˆ์„ ์กฐ์‚ฌํ•˜๊ณ  ๊ฒฐ๊ณผ์ฐฝ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ ๋“ฑ ํ•  ์ผ์ด ๋‚จ์•˜๋Š”๋ฐ ํ˜„์žฌ ๋‹น์žฅ ๊ธ‰ํ•œ ์ผ๋“ค์ด ๋งŽ์•„์„œ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์กฐ๊ธˆ ๋ฏธ๋ค„๋‘์—ˆ๋‹ค.

๐Ÿ’— FEELING

  • ๊ธด ๋ฐฉํ•™์„ ๋ณด๋‚ด๊ณ  ์™”๋Š”๋ฐ ์˜คํžˆ๋ ค ์ง€์น˜๋Š” ๋Š๋‚Œ์ด ๋“ค์—ˆ๋˜ 2์ฃผ์˜€๋‹ค.
  • ํŒ€ ํ”„๋กœ์ ํŠธ์—์„œ 1์ธ๋ถ„์€ ํ•  ์ˆ˜ ์žˆ์„๊นŒ ํ•˜๋Š” ๋‘๋ ค์›€, ์ด์™•์ด๋ฉด ์ž˜ ์ด๋„๋Š” ์—ญํ• ๊นŒ์ง€ ์ˆ˜ํ–‰ํ•˜๊ณ  ์‹ถ์€๋ฐ ๊ฐ€๋Šฅํ• ๊นŒ.. ํŒ€์›๋“ค๋ผ๋ฆฌ ์–ด๋–ป๊ฒŒ ์‹ ๋ขฐ๋ฅผ ์Œ“์•„๋‚˜๊ฐˆ๊นŒ ํ•˜๋Š” ์ƒ๊ฐ, ๋ฆฌ์•กํŠธ๋Š” ์‹ค์ „์— ์–ด๋–ป๊ฒŒ ์ž˜ ์ ์šฉํ• ๊นŒ ๊ผฌ๋ฆฌ์— ๊ผฌ๋ฆฌ๋ฅผ ๋ฌด๋Š” ์ƒ๊ฐ์ด ์ด์–ด์ ธ์„œ ์‹์š•์ด ์—†์–ด์ง€๊ธฐ๋„ ํ–ˆ๋‹ค.ใ…‹.ใ…‹.... ๐Ÿ˜ฅ
  • ๊ณต๋ถ€๋ฅผ ํ•˜๋‹ค๋ณด๋ฉด ๋ฐ”๋กœ ์„ฑ์žฅํ•œ ๊ฒŒ ๋ˆˆ์œผ๋กœ ๋ณด์ด์ง€ ์•Š๋Š” ๊ฒŒ ๋‹น์—ฐํ•œ๋ฐ, ๋ƒ…๋‹ค ํ•จ์ˆ˜ ์Šคํ„ฐ๋””๋ฅผ ๋งค์ผ ๊พธ์ค€ํžˆ ํ•˜๋Š” ๊ฒƒ ์ž์ฒด๋กœ ์ž‘์€ ์„ฑ์ทจ๊ฐ์ด ์žˆ๋‹ค๋Š” ๊ฒŒ ์ข‹์€ ํšจ๊ณผ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค.
  • ๋ฆฌ์•กํŠธ.... ์ปดํฌ๋„ŒํŠธํ™”ํ•ด์„œ ๋ฐ˜๋ณต์ ์ธ UI ๊ตฌํ˜„์— ์•„์ฃผ ์ข‹๋‹ค๋Š” ๊ฒƒ์€ ์•Œ๊ฒ ์œผ๋‚˜.... ๊ณผ์ œํ•˜๋ฉด์„œ ์„ค๊ณ„ํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ ๋ช‡๊ฐœ ๋งŒ๋“ค๊ณ  ๋ผ์šฐํ„ฐ ์„ค์ •ํ–ˆ๋”๋‹ˆ ์ฃผ๋ง์ด ๋๋‚˜๋ฒ„๋ ธ๋‹ค. (????) ์•„์ง ๋‚ฏ์„ค์–ด์„œ ๊ทธ๋ ‡๋‹ค๊ณ  ์ณ๋„ ์ด๊ฒŒ ๋งž๋‚˜ ์‹ถ์–ด์„œ ํ˜„ํƒ€๊ฐ€ ์ œ๋Œ€๋กœ ์™”๋‹ค. ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ทธ๋ฆฌ์›Œ์„œ ๊ด‘๊ด‘ ์šธ์–ด๋”ฐ
  • TMI: ๋ˆ„๊ฐ€ ์ž๊พธ ์ง‘ ์•ˆ์—์„œ ๋‹ด๋ฐฐ๋ฅผ ํ”ผ๋Š”์ง€ ๋ƒ„์ƒˆ๊ฐ€ ๋“ค์–ด์˜ค๋Š”๋ฐ ๋ฐฉ ๊ตฌ์กฐ์ƒ ํ™˜๊ธฐ๊ฐ€ ์•ˆ๋ผ์„œ ์ธ์„ฑ์ด ๋” ํŒŒํƒ„๋‚˜๋Š” ์ค‘

๐Ÿ’ก FINDING

  • ์—ฌ๋Ÿฌ ๋™์˜์ƒ, ์ž๋ฃŒ๋ฅผ ๋ณด๋‹ค๋ณด๋ฉด ๊ณตํ†ต์ ์œผ๋กœ ๊ฐ•์กฐํ•˜๋Š” ๋ถ€๋ถ„์ด ์žˆ๊ณ  ๊ฐ™์€ ๋‚ด์šฉ์ด๋ผ๋„ ๋‹ค๋ฅธ ํ‘œํ˜„์œผ๋กœ ์„ค๋ช…ํ•ด์ฃผ์‹œ๊ธฐ ๋•Œ๋ฌธ์— ์ดํ•ด๊ฐ€ ๋” ๋น ๋ฅด๊ฒŒ ๋˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค.
  • ๋ฆฌ์•กํŠธ ํ›…์„ ์™œ ์‚ฌ์šฉํ•˜๋Š”์ง€, ๊ฐ๊ฐ์˜ ๋ชฉ์ ์ด ๋ฌด์—‡์ธ์ง€ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. useEffect, useState์€ ์†์— ์ต๊ธฐ ์‹œ์ž‘ํ–ˆ๋Š”๋ฐ ๋‚˜๋จธ์ง€ ํ›…๋“ค์€ ์•„์ง ์‚ฌ์šฉ ๊ฒฝํ—˜์ด ๊ฑฐ์˜ ์—†๋Š” ์ƒํƒœ์ด๋‹ค. useContext๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ๋„ˆ๋ฌด ๋ง˜์— ๋“œ๋ค„์จ์ด!!!!!! ๋กœ๊ทธ์ธ ์œ ๋ฌด๋ณ„ ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง, ๋‹คํฌ๋ชจ๋“œ ๋“ฑ์˜ ์šฉ๋„๋กœ ์‚ฌ์šฉํ•  ๋•Œ ์•„์ฃผ ์œ ์šฉํ• ๋“ฏ
  • CSS in JS ๊ฐœ๋…์„ ๋ฐฐ์šฐ๋ฉด์„œ ์ด๊ฑธ ๊ตณ์ด ์™œ...? styled component ๊ตณ์ด ์™œ...? tagged template literal ๋ฌธ๋ฒ•์€ ์™“๋”...ํƒœ๊ทธ ๋’ค์— ๋ฐฑํ‹ฑ..? ๋„ˆ๋ฌด ๋‚ฏ์„ค์—ˆ๋Š”๋ฐ CSS ์‚ฌ์šฉ๊ณผ ๋น„๊ตํ•ด๋ณด๋ฉด์„œ styled component์˜ ์žฅ์ ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ  ๋ฏธ๋‹ˆ ๋ธ”๋กœ๊ทธ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉด์„œ ์š”์ƒํ•˜๊ฒŒ ๋Š๊ปด์กŒ๋˜ ๋ฌธ๋ฒ•๋„ ์†์— ์ต์—ˆ๋‹ค. ๋ฌด์—‡๋ณด๋‹ค ํด๋ž˜์Šค๋ช…์„ ์•ˆ์ •ํ•ด๋„ ๋˜๋Š” ๊ฒƒ๊ณผ ํด๋ž˜์Šค๋ช… ์ค‘๋ณต ๋•Œ๋ฌธ์— ์ถฉ๋Œ๋‚˜์ง€ ์•Š๋Š” ๊ฒŒ ์ƒ๊ฐ๋ณด๋‹ค ๋„ˆ๋ฌด ํŽธ๋ฆฌํ•˜๊ณ  ์ข‹์•˜๋‹ค.
  • freeCodeCamp๊ฐ€ ์œ ๋ช…ํ•œ ๋ฐ์—๋Š” ์ด์œ ๊ฐ€ ์žˆ์—ˆ๋‹ค...! ์–ธ์–ด, ์ฃผ์ œ๋ณ„ ์ปจํ…์ธ ๋„ ๋‹ค์–‘ํ•˜๊ณ  ์ตœ๊ทผ์—๋Š” ๋ฐ˜์‘ํ˜• ์›น์„ ์—ฐ์Šตํ•˜๊ธฐ ์œ„ํ•œ ๋ฌธ์ œ๋“ค๋„ ์ƒ๊ฒผ๋‹ค.(์ซœ๋“ํ•œ UI ๊ตฌํ˜„ ์‹ค๋ ฅ์ด ์•„์ง ๋ถ€์กฑํ•œ ๊ฒƒ ๊ฐ™์•„์„œ ๊ผญ ํ’€์–ด๋ณผ ์˜ˆ์ •) ๋ฆฌ์•กํŠธ๋Š” ๋‹ค ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ๋กœ๋งŒ ๋˜์–ด ์žˆ์–ด์„œ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ์—ฐ์Šตํ•˜๊ธฐ์—๋Š” ๋น„์ถ”,,

๐Ÿ”ฅ FUTURE ACTION

  • ๋‹ค์Œ์ฃผ ์ฃผ๋ง์— ํŒ€ํ”„๋กœ์ ํŠธ ํŒ€์›๋“ค๊ณผ ๋Œ€์ „์—์„œ ๋งŒ๋‚˜ ํ”Œ์ ์— ๋Œ€ํ•œ ๊ตฌ์ฒด์ ์ธ ๋…ผ์˜ ์˜ˆ์ •
  • ์—…๋ฌด ๋ถ„๋‹ดํ•œ ๊ฒƒ ๊ธฐ๋ฐ˜์œผ๋กœ ํผ๋ธ”๋ฆฌ์‹ฑ ์‹œ์ž‘ํ•˜๊ณ , node๋„ ํ™œ์šฉํ•˜๊ธฐ๋กœ ํ–ˆ์œผ๋‹ˆ ๊ด€๋ จ ๊ณต๋ถ€ ํ‹ˆํ‹ˆ์ด ํ•˜๊ธฐ
  • HTML, CSS๋กœ ๋งŒ๋“ค์–ด์ง„ ๋ธ”๋กœ๊ทธ๋ฅผ ๋ฆฌ์•กํŠธ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ œ๋ฅผ ์™„์„ฑ ํ›„ ์ œ์ถœํ•˜๊ธฐ
  • freeCodeCamp ๋ฒˆ์—ญ ํ”„๋กœ์ ํŠธ ๊ด€๋ จ ๋‹ด๋‹น์ž๋‹˜๊ณผ ์ด๋ฒˆ์ฃผ ๋ฏธํŒ… ์˜ˆ์ •
  • 7์›” ์ดˆ๋ถ€ํ„ฐ fetch, axios ์ฑ… ์ง‘ํ•„ ํšŒ์˜ ์˜ˆ์ •. ๊ทธ ์ „๊นŒ์ง€๋Š” ๊ด€๋ จ ๋‚ด์šฉ ๊ณต๋ถ€ ํ•ด๋‘๊ธฐ
  • REACT๋ž‘ ๋” ์นœํ•ด์ง€๊ธฐโญ

๐Ÿ€ FEEDBACK

  • ํ”ผ๋“œ๋ฐฑ ์ž‘์„ฑํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ๋„ ์žŠ๊ณ  ์ด๋•Œ ์“ด ํšŒ๊ณ ์— ๋Œ€ํ•ด์„œ๋„ ์žŠ๊ณ  ์žˆ์—ˆ๋‹ค... ํšŒ๊ณ  ์“ฐ๋Š” ์˜์˜ ๋ฌด์—‡..............
  • ๋ญ”๊ฐ€ ๊ณ„์† ํ–ˆ์œผ๋‚˜ ๋ญ˜ ํ–ˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ๋˜ 2์ฃผ์˜€๋‹ค.
  • ํ•˜๋‚˜ ๋ฟŒ๋“ฏํ–ˆ๋˜ ์ ์€ Future Action์— ์ ์—ˆ๋˜ ๋ฆฌ์•กํŠธ์™€ ์กฐ๊ธˆ ๋” ์นœํ•ด์กŒ๋‹ค๋Š” ๋Š๋‚Œ. ๋ฆฌ์•กํŠธ ๋ธ”๋กœ๊ทธ ๊ณผ์ œ๋ฅผ ์ œ์ถœํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ useState, useEffect๋ฅผ ์ œ์™ธํ•œ ํ›…๊ณผ๋Š” ์•„์ง ๊ฑฐ๋ฆฌ๋‘๊ธฐ์ค‘
  • ํšŒ๊ณ  ์ ์€ ๊ฒƒ๋„ ํ‹ˆํ‹ˆ์ด ๋ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค. ๋งค์ฃผ ๊ณ„ํš์„ ์„ธ์šฐ์ง€๋งŒ ํšŒ๊ณ ํ•˜๋ฉด์„œ ๋‹ค์งํ•œ ๋‚ด์šฉ์„ ๋ชจ๋‘ ๋‹ด์ง€๋Š” ์•Š์•„์„œ ์žŠ์„ ๋•Œ๊ฐ€ ์žˆ๋‹ค...!
profile
#FE๊ฐœ๋ฐœ์ž๐Ÿฃ #์ƒˆ๋กœ์šด๊ฑด #์งœ๋ฆฟํ•ด
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€