Transparent White Star

๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด

ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ๊ณต๋ถ€ ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป
CSR๊ณผ SSR ๋น„๊ต ๋ฐ CSR์˜ ๋‹จ์  ๋ณด์™„ ๋ฐฉ๋ฒ•์šฐ์„  SPA์™€ MPA์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž1. SPA์™€ MPA์˜ ๊ธฐ๋ณธ ๊ฐœ๋…1๏ธโƒฃ SPA (Single Page Application)ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์ „ํ™˜ ์‹œ ํ™”๋ฉด์ด ๊นœ๋นก์ด์ง€ ์•Š๊ณ , ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•  ๋•Œ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ์ „๋‹ฌ๋ฐ›์•„ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.์ฆ‰, CSR(Client-Side Rendering) ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.2๏ธโƒฃ MPA (Multi Page Application)์ „ํ†ต์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์ „ํ™˜ ์‹œ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ ์ƒˆ๋กœ์šด HTML์„ ๋ฐ›์•„์™€ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ ํŽ˜์ด์ง€๊ฐ€ ๊นœ๋นก์ผ ์ˆ˜ ์žˆ์œผ๋ฉฐ, SSR(Server-Side Rendering) ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.2. CSR(Clie..
public ํด๋”์ •์  ํŒŒ์ผ: public ํด๋”๋Š” ์ •์  ํŒŒ์ผ(์ด๋ฏธ์ง€, ํฐํŠธ, ์•„์ด์ฝ˜ ๋“ฑ)์„ ์ €์žฅํ•˜๋Š” ๊ณณ์ž…๋‹ˆ๋‹ค. ์ด ํด๋”์— ์žˆ๋Š” ํŒŒ์ผ์€ / ๊ฒฝ๋กœ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.์šฉ๋„: ์ •์  ํŒŒ์ผ์„ ์ €์žฅํ•˜๋Š” ํด๋”๋กœ, ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ฆฌ์†Œ์Šค๋ฅผ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.์˜ˆ์‹œ: public/images/logo.png ํŒŒ์ผ์€ /images/logo.png๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค._app.js ํŒŒ์ผ์ปค์Šคํ…€ App ์ปดํฌ๋„ŒํŠธ: _app.js ํŒŒ์ผ์€ Next.js ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ „์ฒด ๋ ˆ์ด์•„์›ƒ๊ณผ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ์ง„์ž…์ ์ž…๋‹ˆ๋‹ค. ๋ชจ๋“  ํŽ˜์ด์ง€์—์„œ ๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉํ•  ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.์šฉ๋„: ๊ฐ ํŽ˜์ด์ง€์—์„œ ๊ณตํ†ต์ ์œผ๋กœ ์ ์šฉํ•  ์„ค์ •์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.์ƒํƒœ ๊ด€๋ฆฌ: ์ „์—ญ ์Šคํƒ€์ผ์ด๋‚˜ ๋ ˆ์ด์•„์›ƒ, ์ปจํ…์ŠคํŠธ ์ œ๊ณต ๋“ฑ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์–ด, ํŽ˜์ด์ง€ ์ „ํ™˜ ์‹œ ์ผ๊ด€๋œ UI๋ฅผ..
1. Styled ComponentsStyled Components๋Š” CSS-in-JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜๋กœ, ์Šคํƒ€์ผ์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ์•ˆ์— ์ž‘์„ฑํ•˜๊ณ , ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ์บก์Šํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค.์žฅ์  ๐Ÿ˜„์ž๋™ ์ตœ์ ํ™”: ๋ถˆํ•„์š”ํ•œ ํด๋ž˜์Šค ์ƒ์„ฑ์ด๋‚˜ ์ค‘๋ณต๋œ ์Šคํƒ€์ผ ์ œ๊ฑฐ ๋“ฑ ์ตœ์ ํ™”๊ฐ€ ์ž๋™์œผ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค.๋™์  ์Šคํƒ€์ผ๋ง: Prop์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ์Šคํƒ€์ผ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.CSS์˜ ๋ฒ”์œ„: CSS๊ฐ€ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ์บก์Šํ™”๋˜์–ด ์ „์—ญ ๋„ค์ž„์ŠคํŽ˜์ด์Šค ์ถฉ๋Œ ๋ฌธ์ œ๊ฐ€ ์—†๋‹ค.๋‹จ์  ๐Ÿ˜ž๋Ÿฐํƒ€์ž„ ์„ฑ๋Šฅ ์ €ํ•˜: Styled Components๋Š” ์Šคํƒ€์ผ์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋Ÿฐํƒ€์ž„ ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ๋‹ค. ํŠนํžˆ ๋งŽ์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ์„ ๊ฒฝ์šฐ ์Šคํƒ€์ผ์„ ๊ณ„์‚ฐํ•˜๊ณ  ์ ์šฉํ•˜๋Š” ์‹œ๊ฐ„์ด ์ฆ๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค.ํŒจํ‚ค์ง€ ํฌ๊ธฐ ์ฆ๊ฐ€: ์ถ”๊ฐ€์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํฌํ•จํ•ด์•ผ..
Scssnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}CSSnav ul { margin: 0; padding: 0; list-style: none;}nav li { display: inline-block;}nav a { display: block; padding: 6px 12px; text-decoration: none;}๋ฏน์Šค์ธ ์˜ˆ์‹œScss@mixin theme($theme: DarkGray) { background: $theme; ..
๐Ÿšช ๋จผ์ € ์•Œ์•„์•ผํ•  ๊ฐœ๋…์ปดํฌ๋„ŒํŠธ ์–ธ๋งˆ์šดํŠธ๋ž€ ?์ปดํฌ๋„ŒํŠธ ์–ธ๋งˆ์šดํŠธ(Unmount)๋Š” React ์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM์—์„œ ์ œ๊ฑฐ๋˜๋Š” ์ƒํƒœ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์—์„œ ์‚ฌ๋ผ์ง€๊ฑฐ๋‚˜ ๋” ์ด์ƒ ํ•„์š” ์—†์„ ๋•Œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.์ผ๋ฐ˜์ ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ธ๋งˆ์šดํŠธ๋˜๋Š” ๊ฒฝ์šฐ ๐Ÿ’ญ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ๋•Œ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ˆจ๊ฒจ์ง€๊ฑฐ๋‚˜ ์ œ๊ฑฐ๋  ๋•Œ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ธ๋งˆ์šดํŠธ๋  ๋•Œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์™€ ํด๋ฆฐ์—…์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ํŠน์ • ์ด๋ฒคํŠธ(์˜ˆ: ํด๋ฆญ, ๋ฆฌ์‚ฌ์ด์ฆˆ, ์ž…๋ ฅ ๋“ฑ)๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, window.addEventListener('resize', handleResize)๋Š” ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์˜ ํฌ๊ธฐ๊ฐ€ ์กฐ์ •๋  ๋•Œ๋งˆ๋‹ค handleResize ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์™œ ํด๋ฆฐ์—…์ด ํ•„์š”ํ•œ๊ฐ€?์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ธ๋งˆ์šดํŠธ..
์ฒซ ๋ฒˆ์งธ ์ฝ”๋“œReact 18import React from 'react';import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(์•ˆ๋…• ๋ฆฌ์•กํŠธ !); React 18 ์ด์ƒ: React 18์—์„œ๋Š” ์ƒˆ๋กœ์šด Root API์ธ ReactDOM.createRoot๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.Concurrent Mode ์ง€์›: ์ด ์ƒˆ๋กœ์šด API๋Š” React์˜ Concurrent Mode์™€ ๋” ๋‚˜์€ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.์‚ฌ์šฉ๋ฒ•createRoot๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ root๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.์ƒ์„ฑ๋œ root์—์„œ render ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ๋‘ ๋ฒˆ์งธ ์ฝ”๋“œReact 17import Reac..
yyezzzy
'๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก (2 Page)