React

[TIL/React] 2023/08/28

๋ฌธ์ œ ์ •์˜ ๐ŸŸ ์–ด๋А ํŽ˜์ด์ง€๋ฅผ ๊ฐ€๋„, width๊ฐ€ 900px ์ดํ•˜๊ฐ€ ๋˜๋ฉด ์šฐ์ธก ํ™”๋ฉด์ด ๊นจ์กŒ๋‹ค. ๋ฌธ์ œ ํ•ด๊ฒฐ ์ ‘๊ทผ ๋ฐฉ์‹ ๐Ÿ”ต'์–ด๋А ํŽ˜์ด์ง€๋ฅผ ๊ฐ€๋„'๋ผ๋Š” ๋ง์—์„œ layout์— ๊ด€ํ•œ ์ฝ”๋“œ์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Œ์„ ์ธ์ง€ํ–ˆ๊ณ , 'width๊ฐ€ 900px ์ดํ•˜'๋ผ๋Š” ๋ง์—์„œ ๋””๋ฒ„๊น…์˜ ๋Œ€์ƒ์„ ๊ตฌ์ฒดํ™”

2023๋…„ 8์›” 28์ผ1min read

๋ฌธ์ œ ์ •์˜ ๐ŸŸ 

์–ด๋А ํŽ˜์ด์ง€๋ฅผ ๊ฐ€๋„, width๊ฐ€ 900px ์ดํ•˜๊ฐ€ ๋˜๋ฉด ์šฐ์ธก ํ™”๋ฉด์ด ๊นจ์กŒ๋‹ค.

๋ฌธ์ œ ํ•ด๊ฒฐ ์ ‘๊ทผ ๋ฐฉ์‹ ๐Ÿ”ต

'์–ด๋А ํŽ˜์ด์ง€๋ฅผ ๊ฐ€๋„'๋ผ๋Š” ๋ง์—์„œ layout์— ๊ด€ํ•œ ์ฝ”๋“œ์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Œ์„ ์ธ์ง€ํ–ˆ๊ณ , 'width๊ฐ€ 900px ์ดํ•˜'๋ผ๋Š” ๋ง์—์„œ ๋””๋ฒ„๊น…์˜ ๋Œ€์ƒ์„ ๊ตฌ์ฒดํ™”ํ–ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๊ธฐ์กด ํŒŒ์ผ์—์„œ๋Š” ์ด๋ฏธ ์—ฌ๋Ÿฌ ์ฝ”๋“œ๊ฐ€ ์œ ๊ธฐ์ ์œผ๋กœ ์ƒํ˜ธ์ž‘์šฉํ•˜๊ณ  ์žˆ์—ˆ๊ธฐ์—, ๋””๋ฒ„๊น…์ด ์–ด๋ ค์šธ ๊ฒƒ์ด๋ผ๊ณ  ํŒ๋‹จํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ตœ์†Œํ•œ์˜ ๊ธฐ๋Šฅ๋งŒ์„ ์˜ค๋กฏ์ด ๊ฐ–์ถ˜ '์ตœ์†Œ ์˜ค๋ฅ˜ ๋ชจ๋ธ'์„ ๋งŒ๋“ค์—ˆ๋‹ค.

์ตœ์†Œ ์˜ค๋ฅ˜ ๋ชจ๋ธ ๐ŸŸฃ

๊ธฐ์กด ์˜ค๋ฅ˜๋ฅผ ๊ทธ๋Œ€๋กœ ๊ตฌํ˜„ํ–ˆ๋‹ค. layout์˜ ๊ธฐ๋Šฅ์„ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„์˜ ํŒŒ์ผ์ด๋‹ค. Footer์—์„œ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์ด ๋ˆ„๊ฐ€ ๋ด๋„ ์ˆ˜์ƒํ•˜๋‹ค.

padding์— ๊ด€ํ•œ ์ฝ”๋“œ๋ฅผ ์‚ญ์ œํ–ˆ๋‹ค.

๋‚ด ํ”„๋กœ์ ํŠธ ์ ์šฉ ๐ŸŸข

๊ทผ๋ฐ ์™œ ๋‚ด ํ”„๋กœ์ ํŠธ์—๋Š” ๋ฐ˜์˜์ด ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์ผ๊นŒ? ์ฝ”๋“œ๋ฅผ ๊ฑฐ์ง€๊ฐ™์ด ์ž‘์„ฑํ•œ ์ฃ„๋กœ ๋‚ด์ผ์€ ์ „์ฒด๋ฅผ ๋‹ค ๊ฐˆ์•„์—Ž์–ด์•ผ๊ฒ ๋‹ค. ๊ฐˆ์•„์—Ž๊ธฐ ๋จผ์ € ์„ฑ๊ณตํ•˜๊ณ , ์‹œ๊ฐ„ ๋‚จ์œผ๋ฉด ๋”ฅ๋‹ค์ด๋ธŒ ์ฝ๋Š” ๊ฑธ๋กœ! ๋ณตํ•™ ์ „ ์ตœ๊ณ ์˜ ์„ ํƒ์ด ๋˜๊ธฐ๋ฅผ...

More to read

Amazon VPC

Amazon VPC Architecture ์ดํ•ดํ•˜๊ธฐ

์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ๊ธฐํšํ•˜๋ฉฐ, ๊ฐœ๋ฐœ์—์„œ ๋ฌด์—‡์„ ๊ฐ€์žฅ ๋จผ์ € ๊ณ ๋ฏผํ•ด์•ผ ํ•˜๋Š”์ง€ ๋‹ค์‹œ ๋Œ์•„๋ณด๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.ํ•œ๋•Œ๋Š” ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ๋ชจ๋“  ์„ค๊ณ„์˜ ์ถœ๋ฐœ์ ์ด๋ผ๊ณ  ๋ฏฟ์—ˆ์Šต๋‹ˆ๋‹ค. ์œ ์ €๊ฐ€ ๋ฌด์—‡์„ ๋ณด๊ณ , ์–ด๋–ค ํ๋ฆ„์—์„œ ๋จธ๋ฌด๋ฅด๊ณ  ์ดํƒˆํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ์ดํ•ด ์—†์ด ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ ๋‹ค๋Š” ๊ฑด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๊ธฐ

'์›์‚ฌ์ดํŠธ'

ํ”„๋ก ํŠธ์—”๋“œ ๊ด€์ ์œผ๋กœ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์ดํ•ดํ•˜๊ธฐ

์˜ค๋žœ๋งŒ์— ๋ฐฉ๋ฒ•๋ก ์— ๊ด€ํ•œ ๊ธ€์„ ์“ฐ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ ์ƒํ™ฉ์€ ์ด๋ ‡์Šต๋‹ˆ๋‹ค. SSAFY์—์„œ๋Š” ํ•˜๋ฃจ์— ์—„์ฒญ๋‚œ ์–‘์˜ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ๋“ค์„ ๊ณผ์ œ๋กœ ์ˆ˜ํ–‰ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ ๊ณผ์ •์—์„œ, '๊ตฌํ˜„๋ ฅ'์ด ๋งค์šฐ ๋–จ์–ด์ง„๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์™„์ „ํžˆ ์–ด๋ ค์šด ๋ฌธ์ œ๋ผ๋ฉด '์•„์‰ฌ์›€'์ด๋ผ๋Š” ๊ฐ์ •์กฐ์ฐจ ๋А๋ผ์ง€

Subnet

VPC ์„ค๊ณ„์˜ ์‹œ์ž‘: IP์™€ Subnet

๋ฐ˜๋ณต๋˜๋Š” ๋ฃจํ‹ด ์†์—์„œ ์–ป์€ ์•ˆ์ •๊ฐ์„ ๋ฐœํŒ ์‚ผ์•„, ์ด์ œ๋Š” ๊ธฐ์ˆ ์  ์ŠคํŽ™ํŠธ๋Ÿผ์„ ๋„“ํžˆ๊ธฐ ์œ„ํ•œ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ์— ์ฐฉ์ˆ˜ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์˜ ๋ชฉํ‘œ๋Š” ๋‹จ์ˆœํ•œ ํฌํŠธํด๋ฆฌ์˜ค ๊ตฌ์ถ•์„ ๋„˜์–ด, ์‹ค์ œ ์„œ๋น„์Šค ์ˆ˜์ค€์˜ ๋ธ”๋กœ๊ทธ ์‹œ์Šคํ…œ ๊ตฌํ˜„๊ณผ ๋‹ค๊ตญ์–ด ์ฒ˜๋ฆฌ ์ ์šฉ ๋“ฑ ์‹ค๋ฌด์— ๊ฐ€๊นŒ์šด ์—ญ๋Ÿ‰์„ ํ•œ ๋‹จ๊ณ„