TIL_221118 ๐ŸšฉBasic_Project, CS

์ •์œค์ˆ™ยท2022๋…„ 11์›” 18์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
19/192

๋‚ด์ผ๋ฐฐ์›€์บ ํ”„ 4๊ธฐ ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉ React B๋ฐ˜


๐Ÿ“’ ์˜ค๋Š˜์˜ ๊ณต๋ถ€

1. ํ”„๋กœ์ ํŠธ ์‹œ์ž‘

  • ์ •๋ฆฌ ์ •๋ฆฌ ์ •๋ฆฌ
    • ์„ธ์„ธํ•˜๊ฒŒ ๋ชจ๋‘ ๊ธฐ๋กํ•ด ๋†“๊ณ  ์‹ถ์–ด์„œ SA ์ œ์ถœ์„ ์œ„ํ•œ ์ •๋ฆฌ, ํ”„๋กœ์ ํŠธ ์ „์ฒด ์ง„ํ–‰์ƒํ™ฉ ์ •๋ฆฌ ๋“ฑ์€ ๋‚ด๊ฐ€ ๋งก์•„์„œ ํ–ˆ๋‹ค.
    • ์•„์นจ 9์‹œ๋ถ€ํ„ฐ ์‹์‚ฌ ์‹œ๊ฐ„ ์ œ์™ธํ•˜๊ณ  ๋ฐค 10์‹œ ๋„˜์–ด์„œ๊นŒ์ง€ ํ•˜๋ฃจ์ข…์ผ ๋จธ๋ฆฌ๋ฅผ ์“ฐ๋‹ˆ๊นŒ ๋„ˆ๋ฌด ํ”ผ๊ณคํ•˜๊ณ  ํž˜๋“ค์—ˆ๋‹ค..

2. CS ํŠน๊ฐ•_ํ”„๋กœ์„ธ์Šค, ์Šค๋ ˆ๋“œ, ๋น„๋™๊ธฐ

  • ํ”„๋กœ์„ธ์Šค
    • ๋…๋ฆฝ์ . ์•ˆ์ „
  • ๋ธ”๋กœํ‚น vs ๋…ผ๋ธ”๋กœํ‚น
  • ๋™๊ธฐ vs ๋น„๋™๊ธฐ

3. Ajax, MPA&SPA ํŠน๊ฐ•

  • Ajax
    • 'a'๋ฅผ ์ž…๋ ฅํ–ˆ์„ ๋•Œ 'a'๋กœ ์‹œ์ž‘ํ•˜๋Š” ์—ฐ๊ด€ ๊ฒ€์ƒ‰์–ด๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ
  • SPA
    • ์ฒซ๋žœ๋”ฉ, ์ƒˆ๋กœ๊ณ ์นจ ํ•  ๋•Œ ์ „์ฒด index.html์„ ๊ฐ€์ ธ์™”๋‹ค๊ฐ€ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐˆ ๋•Œ ์„œ๋ฒ„์— ์š”์ฒญํ•˜์ง€ ์•Š๊ณ  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์บ์‹ฑํ•œ ๊ฒƒ์„ ๋ฐ”๋กœ ์ฃผ๋Š” ๊ฒƒ(304 ์ƒํƒœ)
    • ๊ธฐ๋ณธ์ ์œผ๋กœ CSR์ด์ง€๋งŒ SSR์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์€ ์•„๋‹˜

๐Ÿšฉ

ํŒ€์žฅ ์—ญํ•  ์ค‘๊ฐ„ ์ ๊ฒ€

  • ํ•ด์•ผ ํ•  ๊ฒŒ ๋งŽ์•„ ๋˜ ์ฐจ๋ถ„ํ•˜๊ฒŒ ํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ƒ๊ฐ์„ ๋ชป ํ•˜๊ณ  ์งˆ์ฃผํ•˜๋“ฏ์ด ๋‹ฌ๋ฆฐ ๊ฒƒ ๊ฐ™๋‹ค.
    • ํ”„๋กœ์ ํŠธ ์ฃผ์ œ ํšŒ์˜ํ•  ๋•Œ ์ฃผ์ œ๋ฅผ ์ •ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์— ์ง‘์ค‘ํ•˜๋Š๋ผ ์ƒˆ๋กœ์šด ์ฃผ์ œ์— ๋Œ€ํ•œ ์–˜๊ธฐ๋ฅผ ์ถฉ๋ถ„ํžˆ ์ˆ˜์šฉํ•˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™๋‹ค.
  • ์ ์‹ฌ ์‹œ๊ฐ„๋™์•ˆ ๋‚ด ์ž์‹ ์„ ๋Œ์•„๋ณด๋‹ค๊ฐ€ ๋„ˆ๋ฌด ํœ˜๋ชฐ์•„์น˜๋Š” ์†๋„์— ํŒ€์›๋“ค์ด ๋ถ€๋‹ด์„ ๋Š๋ผ์ง€๋Š” ์•Š๋Š”์ง€, ๋‚ด๊ฐ€ ๊ณ ์ณ์•ผ ํ•  ๊ฒƒ์ด ์žˆ๋Š”์ง€ ํŒ€์›๋“ค์—๊ฒŒ ๋ฌผ์–ด๋ดค๋‹ค.
    • ํŠนํžˆ ๋Šฆ๊ฒŒ ํ•ฉ๋ฅ˜ํ•ด์„œ ํ”„๋กœ์ ํŠธ๋Š” ์ด๋ฒˆ์ด ์ฒ˜์Œ์ธ ํŒ€์›์ด ๋ถ€๋‹ด์„ ๋งŽ์ด ๋Š๋ผ๋Š” ๊ฒƒ ๊ฐ™์•„ ๊ฑฑ์ •์„ ์ข€ ๋œ์–ด์ฃผ๊ณ  ์‹ถ์—ˆ๋‹ค.
    • ๋‹คํ–‰ํžˆ ํŒ€์›๋“ค์ด ๊ดœ์ฐฎ๋‹ค๊ณ  ํ•ด์ค˜์„œ ํ˜น์‹œ๋ผ๋„ ๋ถˆํŽธํ•œ ๊ฒŒ ์ƒ๊ธฐ๋ฉด ๋ฐ”๋กœ๋ฐ”๋กœ ๋งํ•ด๋‹ฌ๋ผ๊ณ  ํ–ˆ๋‹ค.
  • ์—ญํ• ๋ถ„๋‹ด ์งˆ์งˆ ๋ˆ ๊ฒƒ ๊ฐ™๋‹ค.
    • ์˜คํ›„์— ์—ญํ•  ๋ถ„๋‹ด์„ ํ•˜๋Š”๋ฐ ํŒ€์›๋ณ„ ํ•˜๊ณ  ์‹ถ์€ ์ž‘์—…์ด ์žˆ๋Š” ์ง€ ๋‹ค ๋ฌผ์–ด๋ณด๊ณ  ๋‚˜๋„ ๋ง์„ค์ด๋Š๋ผ ์—ญํ•  ๋ถ„๋‹ด์ด ๊ณ„์† ๋‹ค์Œ ์ˆœ์„œ๋กœ ๋ฏธ๋ค„์กŒ๋‹ค.
    • ๋‚˜๋Š” ์ด๋ฒˆ์— ๋ฐœํ‘œ์—๋„ ๋„์ „ํ•ด๋ณด๊ณ  ์‹ถ๊ณ  ์ €๋ฒˆ ํ”„๋กœ์ ํŠธ์™€ ๋‹ฌ๋ฆฌ ํ”„๋ก ํŠธ ์ž‘์—…๋„ ํ•ด๋ณด๊ณ  ์‹ถ์–ด์„œ ๋ง์„ค์˜€๊ณ  ํŒ€์›๋“ค๋„ ๋„์ „์€ ํ•˜๊ณ  ์‹ถ์€๋ฐ ๋ง์„ค์—ฌ์„œ ๊ณ„์† ๋‹ค๋ฅธ ์ž‘์—…์„ ๋จผ์ € ํ•˜๊ฒŒ ๋๋‹ค. ๊ทธ๋ƒฅ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋ฐ”๋กœ ์‚ฌ๋‹ค๋ฆฌ ํƒ€๊ธฐ๋ฅผ ํ•˜๊ฑฐ๋‚˜ ํ•ด์„œ ๋นจ๋ฆฌ ์ •ํ–ˆ์œผ๋ฉด ์ข‹์•˜์„ ๊ฒƒ ๊ฐ™๋‹ค. ์ด๊ฑด ๋‚ด๊ฐ€ ํŒ€์žฅ ์—ญํ• ์„ ์ž˜ ๋ชปํ•œ ๊ฒƒ ๊ฐ™๋‹ค.
  • WireFrame์ž‘์—…
    • ์ƒ๊ฐ๋ณด๋‹ค ๊ต‰์žฅํžˆ ์˜ค๋žœ ์‹œ๊ฐ„์ด ๊ฑธ๋ ค ์˜คํ›„ 6์‹œ ๋งˆ๊ฐ์‹œ๊ฐ„์— ๋งž์ถฐ SA๋ฅผ ์ œ์ถœํ–ˆ๋‹ค. ๋””์ž์ธ ํ•˜์…จ๋˜ ๋ถ„์ด ์—„์ฒญ ์—ด์‹ฌํžˆ ๋งŒ๋“ค์–ด ์ฃผ์…จ๊ณ  ๋‚˜๋„ ์ž์„ธํ•œ wireframe์ด ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ CSS๋กœ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ์„ธ์„ธํ•œ ๋ถ€๋ถ„์€ ๊ทธ๋ƒฅ ๋Œ€๋žต์ ์ธ ๊ฒƒ๋งŒ ๋งŒ๋“ค๊ณ  ์ œ์ถœํ•˜์ž๊ณ  ์ด๋Œ์—ˆ์œผ๋ฉด ์ข‹์•˜์„ ๊ฒƒ ๊ฐ™๋‹ค.
profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

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