[์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] 9์ฃผ์ฐจ ํšŒ๊ณ ๋ก

2025. 9. 22. 11:01ยท๐Ÿ‘€ ํ”„๋กœ์ ํŠธ ๋ฐ ํ™œ๋™/์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ 19๊ธฐ
๋”๋ณด๊ธฐ

01. 9์ฃผ์ฐจ (9/15 ~ 9/20)

โœ… 9์ฃผ์ฐจ ์ง„ํ–‰

์ฝ”๋”ฉํ…Œ์ŠคํŠธ ๋ฌธ์ œ ํ’€์ด
Styled Components
๋‹ค์–‘ํ•œ CSS ๊ธฐ์ˆ  ์•Œ์•„๋ณด๊ธฐ
React ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„
์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 5
๋ฐ์ผ๋ฆฌ ํŒ€ ๋ฏธํŒ…
์œ„ํด๋ฆฌํŽ˜์ดํผ ์ž‘์„ฑ
๋ฉ˜ํ† ๋ง
๋ณด์ถฉํ•™์Šต
1์ฐจ ํ‰๊ฐ€
์ปค๋ฆฌ์–ด ๋ฏธ์…˜

๐Ÿ‘€ ํ›„๊ธฐ

๊ฐ•์˜  - (Styled Components, ๋‹ค์–‘ํ•œ CSS ๊ธฐ์ˆ  ์•Œ์•„๋ณด๊ธฐ, React ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„)

์ด๋ฒˆ ์ฃผ์ฐจ ๊ฐ•์˜๋Š” ๊ธ€ ์œ„์ฃผ์˜ ์ด๋ก  ์ˆ˜์—…์ด์–ด์„œ ์ง„๋„๋ฅผ ๋‚˜๊ฐ€๋Š”๋ฐ ํฐ ์–ด๋ ค์›€์€ ์—†์—ˆ๋‹ค.

Styled Components ํŒจํ‚ค์ง€๊ฐ€ ์œ ์ง€๋ณด์ˆ˜ ๋ชจ๋“œ๋กœ ์ „ํ™˜๋˜์–ด์„œ ์ž˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ 

์ตœ๊ทผ์—๋Š” CSS ins JS ๋ฐฉ์‹๋ณด๋‹ค๋Š” Tailwind ๊ฐ™์€ ์œ ํ‹ธ๋ฆฌํ‹ฐ ๊ธฐ๋ฐ˜ ์Šคํƒ€์ผ๋ง์„ ๋งŽ์ด ์“ด๋‹ค๋Š” ์ด์•ผ๊ธฐ๋ฅผ ๋“ฃ๊ณ 

์•ž์œผ๋กœ Tailwind๋ฅผ ๊ณต๋ถ€ํ•ด๋ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.

 

์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 5 ์ง„ํ–‰

์ด๋ฒˆ ์ฃผ ๋ชฉํ‘œ์˜€๋˜ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 5๋ฅผ ๋‹คํ–‰ํžˆ ์ œ ์‹œ๊ฐ„ ์•ˆ์— ๋งˆ๋ฌด๋ฆฌํ•˜๊ณ  ์ฝ”๋“œ ๋ฆฌ๋ทฐ๊นŒ์ง€ ๋ฐ›์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๋ฏธ์…˜์— ๋Œ€ํ•œ ์ž์„ธํ•œ ํ›„๊ธฐ๋Š” ๋ณ„๋„๋กœ ๋ธ”๋กœ๊ทธ์— ์ •๋ฆฌํ•  ์˜ˆ์ •์ด๋‹ค.

 

๋ฐ์ผ๋ฆฌ ํŒ€ ๋ฏธํŒ… & ์œ„ํด๋ฆฌ ํŽ˜์ดํผ

์ด๋ฒˆ ์ฃผ์—๋„ ๊พธ์ค€ํžˆ ๋ฐ์ผ๋ฆฌ ํŒ€ ๋ฏธํŒ…์„ ์ง„ํ–‰ํ–ˆ๊ณ , ์œ„ํด๋ฆฌ ํŽ˜์ดํผ๋„ ์ž‘์„ฑํ–ˆ๋‹ค.

์ด๋ฒˆ ์ฃผ์ œ๋Š” ๋ฆฌ์•กํŠธ ์ƒ๋ช…์ฃผ๊ธฐ์™€ ๋ Œ๋”๋ง ๋ฐฉ์‹์ด์—ˆ๋‹ค.

https://cocoding420.tistory.com/88

 

[React] ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ๋ช…์ฃผ๊ธฐ(Life cycle)์™€ useEffect ํ™œ์šฉ

๐Ÿ”„ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ๋ช…์ฃผ๊ธฐ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” Mount → Update → Unmount ๋‹จ๊ณ„์˜ ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ๊ฐ€์ง„๋‹ค. ๐ŸŸข MountMount๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ฒ˜์Œ ํ™”๋ฉด์— ๋ Œ๋”๋ง๋˜๋Š” ์ˆœ๊ฐ„์„ ์˜๋ฏธํ•œ๋‹ค.ex) ์ปดํฌ๋„ŒํŠธ A๊ฐ€ Mount ๋˜์—ˆ๋‹ค๋Š”

cocoding420.tistory.com

https://cocoding420.tistory.com/89

 

[Web] ์›น ํŽ˜์ด์ง€ ๋ Œ๋”๋ง ๋ฐฉ์‹: CSR, SSR, SSG

์›น ํŽ˜์ด์ง€๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์— ์–ด๋–ป๊ฒŒ ๊ทธ๋ ค์ง€๋Š”์ง€ ๊ฒฐ์ •ํ•˜๋Š” ๋ Œ๋”๋ง ๋ฐฉ์‹์€ ํฌ๊ฒŒ ์„ธ ๊ฐ€์ง€๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.CSR(Client-Side Rendering)SSR(Server-Side Rendering)SSG(Static Site Generation)๊ฐ ๋ฐฉ์‹์˜ ํŠน์ง•๊ณผ ์žฅ๋‹จ์ ์— ๋Œ€ํ•ด

cocoding420.tistory.com

์ƒ๋ช… ์ฃผ๊ธฐ๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ์ค‘์‹ฌ์œผ๋กœ ์ •๋ฆฌํ–ˆ๊ณ , ๋ Œ๋”๋ง ๋ฐฉ์‹์€ ๊ฐ ๋ฐฉ์‹์˜ ์žฅ๋‹จ์ ์„ ๋น„๊ตํ•˜์—ฌ ์ž‘์„ฑํ–ˆ๋‹ค.

 

๋ฉ˜ํ† ๋ง

๋ฉ˜ํ† ๋ง ์‹œ๊ฐ„์—๋Š” ์งˆ์˜์‘๋‹ต์„ ์ง„ํ–‰ํ•œ ๋’ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋”ฅ ๋‹ค์ด๋ธŒ ์ฑ…์„ ํ•จ๊ป˜ ์ฝ์—ˆ๋‹ค.

์ฑ… ๋‚ด์šฉ ์ค‘์— ํ•จ์ˆ˜ ์„ ์–ธ์‹ ๋ถ€๋ถ„์—์„œ ํ—ท๊ฐˆ๋ ธ๋˜ ๋ถ€๋ถ„์ด ์žˆ์–ด์„œ

์ด ๋‚ด์šฉ์€ ๋ธ”๋กœ๊ทธ์— ๋”ฐ๋กœ ์ •๋ฆฌํ•ด๋ณผ ๊ณ„ํš์ด๋‹ค.

(https://cocoding420.tistory.com/91)

 

๋ณด์ถฉํ•™์Šต

์ด๋ฒˆ ๋ณด์ถฉํ•™์Šต์€ ์ง€๋‚œ์ฃผ์— ์ด์–ด ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ๋‚ด์šฉ์œผ๋กœ ์ง„ํ–‰๋˜์—ˆ๋‹ค.

React์˜ ์—ฌ๋Ÿฌ useํ›… ๋“ค์„ ์„ค๋ช…ํ•ด์ฃผ์…จ๊ณ 

๋งˆ์ง€๋ง‰์—๋Š” ํŒ€ ํ”„๋กœ์ ํŠธ์™€ ๊ด€๋ จ๋œ ์œ ์˜์‚ฌํ•ญ์„ ๊ฐ•์กฐํ•ด์ฃผ์…จ๋‹ค.

๋ฌด์—‡๋ณด๋‹ค ์‹ธ์šฐ์ง€ ๋ง๊ณ  ์†Œํ†ต์„ ๋งŽ์ดํ•˜๋ผ๋Š” ์กฐ์–ธ์ด ํŠนํžˆ ๊ธฐ์–ต์— ๋‚จ์•˜๋‹ค.

 

1์ฐจ ํ‰๊ฐ€ & ์ปค๋ฆฌ์–ด ๋ฏธ์…˜

์ด๋ฒˆ ์ฃผ์—๋Š” 1์ฐจ ํ‰๊ฐ€์™€ ์ปค๋ฆฌ์–ด ๋ฏธ์…˜๋„ ์žˆ์—ˆ๋‹ค.

1์ฐจ ํ‰๊ฐ€๋Š” ์ฃผ๋กœ ์ด๋ก ์ ์ธ ๋‚ด์šฉ์„ ์–ผ๋งˆ๋‚˜ ์ž˜ ์ดํ•ดํ–ˆ๋Š”๋ฐ ์„œ์ˆ ํ•˜๋Š” ํ˜•ํƒœ์˜€๊ณ ,

์ปค๋ฆฌ์–ด ๋ฏธ์…˜์€ ๋‚˜์˜ ๊ฐ•์ ์„ ๋ถ„์„ํ•˜๊ณ  ๊ฐ„๋‹จํžˆ ๊ธ€๋กœ ์ž‘์„ฑํ•˜๋Š” ๊ณผ์ œ์˜€๋‹ค.

๋ฏธ์…˜์„ ์ž‘์„ฑํ•  ๋•Œ ์ด์ „์— ์ž‘์„ฑํ–ˆ๋˜ ์ž์†Œ์„œ๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ์ž‘์„ฑํ–ˆ๋Š”๋ฐ,

์—ญ์‹œ ๋‚ด ์ด์•ผ๊ธฐ๋ฅผ ๊ธ€๋กœ ์ž˜ ํ’€์–ด๋‚ด๋Š”๊ฒŒ ์ œ์ผ ์–ด๋ ค์šด ๊ฒƒ ๊ฐ™๋‹ค.

 

02. ๋งˆ๋ฌด๋ฆฌ + TMI

์–ด์ œ ํšŒ๊ณ ๋ก์„ ์ž‘์„ฑํ•˜๋ ค ํ–ˆ์ง€๋งŒ ์—ฌ๋Ÿฌ ์ผ์ด ๊ฒน์ณ์ ธ ๋ฏธ๋ค„์กŒ๋‹ค.

์•ž์œผ๋กœ๋Š” ๊ณ„ํšํ•œ ์‹œ๊ฐ„์— ๋งž์ถฐ์„œ ๊พธ์ค€ํžˆ ์ž‘์„ฑํ•ด์•ผ๊ฒ ๋‹ค๐Ÿ˜…

 

๊ทธ๋ฆฌ๊ณ  10์ฃผ์ฐจ๋ถ€ํ„ฐ ํŒ€ ํ”„๋กœ์ ํŠธ๊ฐ€ ์‹œ์ž‘๋œ๋‹ค.

๊ฑฑ์ • ๋ฐ˜, ์…€๋ ˜ ๋ฐ˜์ด์ง€๋งŒ ํŒ€์› ๋ชจ๋‘๊ฐ€ ๋‹ค ๊ฐ™์ด ์ž˜ ํ•ด๋‚ผ ์ˆ˜ ์žˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค...

 

 

728x90
'๐Ÿ‘€ ํ”„๋กœ์ ํŠธ ๋ฐ ํ™œ๋™/์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ 19๊ธฐ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] 8์ฃผ์ฐจ ํšŒ๊ณ ๋ก
  • [์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] 7์ฃผ์ฐจ ํšŒ๊ณ ๋ก
  • [์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] 6์ฃผ์ฐจ ํšŒ๊ณ ๋ก
  • [์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 4 ํ›„๊ธฐ
_์ด์•Ž
_์ด์•Ž
๊ณต๋ถ€ ๊ธฐ๋ก ๋ธ”๋กœ๊ทธ
  • _์ด์•Ž
    ๊ณต๋ถ€
    _์ด์•Ž
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • โœ๏ธ ๋ชจ๋“  ๊ธ€ (56) N
      • ๐Ÿ“š ํ”„๋ก ํŠธ์—”๋“œ (40) N
        • React (11) N
        • HTML_CSS (9)
        • Javascript (14)
        • git_github (4)
        • Web (2)
      • ๐Ÿ‘€ ํ”„๋กœ์ ํŠธ ๋ฐ ํ™œ๋™ (12)
        • ์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ 19๊ธฐ (12)
      • โš™๏ธ etc. (4)
  • ๋งํฌ

    • ๐Ÿ‘‹ GitHub
    • ๐Ÿง ์ฝ”๋”ฉํ…Œ์ŠคํŠธ ๊ธฐ๋ก
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
    • ๋ฐฉ๋ช…๋ก
  • ์ธ๊ธฐ ๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.4
_์ด์•Ž
[์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] 9์ฃผ์ฐจ ํšŒ๊ณ ๋ก
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”