wonny.log_20220929 Start๐ŸŒฑ

Wonnyยท2022๋…„ 9์›” 28์ผ
0

TIL (wonny.log)

๋ชฉ๋ก ๋ณด๊ธฐ
1/2
post-thumbnail

TIL ์ž‘์„ฑ Startย ๐Ÿš€

๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด์„œ ๋งค์ผ TIL๋„ ์ž‘์„ฑํ•˜๋Š”๊ฒƒ์„ ์‹œ์ž‘ํ•˜๋ ค๊ณ  ํ•œ๋‹ค!
์‚ฌ์‹ค ์˜ˆ์ „๋ถ€ํ„ฐ ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ์˜ ์ค‘์š”์„ฑ์„ ๋“ฃ๊ณ  ์šด์˜ ํ•ด์•ผ ๋˜๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐ์„ ํ–ˆ์—ˆ๋Š”๋ฐ ๋‹ค๋ฅธ ๊ณต๋ถ€ํ•ด์•ผํ• ๊ฒƒ๋„ ๋งŽ์€๋ฐ ๊ตณ์ด ์ด๋Ÿฐ๊ฑฐ์— ์‹ ๊ฒฝ์„ ์จ์•ผํ•˜๋‚˜? ์ด๋Ÿฐ ์ด์œ ๋กœ ๋ฏธ๋ค„์™”๋‹ค.
๊ทธ๋Ÿฌ๋˜ ์ค‘ ํ”„๋ก ํŠธ์—”๋“œ ๋ถ€ํŠธ์บ ํ”„๋ฅผ ์‹œ์ž‘๋Š”๋ฐ ์ด๊ฑธ ๊ณ„๊ธฐ๋กœ ๋งค์ผ ๋‚ด๊ฐ€ ๋ฌด์—‡์„ ๊ณต๋ถ€ํ–ˆ๋Š”์ง€๋ฅผ ๊ธฐ๋ก์œผ๋กœ ๋‚จ๊ธฐ๊ณ  ์™„์ฃผ ํ›„ ๋‚˜์ค‘์— ์ด๋ ‡๊ฒŒ ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ–ˆ๊ตฌ๋‚˜~๋ฅผ ๋Š๋ผ๊ธฐ ์œ„ํ•ด ํ•‘๊ณ„ ๋Œ€์ง€ ์•Š๊ณ  ์ž˜ ์šด์˜ํ•ด ๊ฐ€๋ณด๋ ค๊ณ ํ•œ๋‹ค.

๊ตณ์ด ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ์— ์ž‘์„ฑํ•˜๋Š” ์ด์œ ?๐Ÿค”

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

๊ทธ๋ฆฌ๊ณ  ์ง€๊ธˆ๊นŒ์ง€ ๊ฐœ๋ฐœ๊ณต๋ถ€๋ฅผ ํ•˜๋ฉด์„œ ๊ตฌ๊ธ€๋ง์„ ๋งŽ์ด ํ•˜๋Š”๋ฐ ๋ชจ๋ฅด๋Š” ๊ฐœ๋…์ด ๋‹ด๊ธด ์‚ฌ์ดํŠธ๋ฅผ ๋ฐฉ๋ฌธํ•˜๊ณ  ๋ช‡๋ฒˆ ์ฝ์–ด๋ณธ ํ›„ ๊ธฐ์–ต ์•ˆ๋‚ ๋•Œ๋งˆ๋‹ค ํ™•์ธํ•ด์•ผ์ง€! ์ด๋Ÿฐ ์ƒ๊ฐ์œผ๋กœ ๋งˆ๊ตฌ์žก์ด ๋ถ๋งˆํฌ๋ฅผ ํ•˜๋‹ค๋ณด๋‹ˆ ๋ถ๋งˆํฌ ๋ฐ”๋„ ๋‚ ์„ ์žก๊ณ  ์ •๋ฆฌ๋ฅผ ํ•ด์ค˜์•ผํ•  ์ง€๊ฒฝ์ด ๋˜์—ˆ๋‹ค๐Ÿ˜‚
์•ž์œผ๋กœ๋Š” ์ด๋Ÿฐ ์ผ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ธ”๋กœ๊ทธ์— ๋ฌธ์ œ์ƒํ™ฉ๊ณผ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•๋“ค ์ „๋ถ€ ๊ธฐ๋ก์„ ํ•˜๋ ค๊ณ  ํ•œ๋‹ค!

โœ… ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ

  1. git/github - git flow strategy
  2. CSS Flex

โœ… ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์ค‘์— ์–ด๋ ค์› ๋˜ ์ 

์ด๋ฒˆ์ฃผ ๋‚ด๋‚ด git/github ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•์ค‘์ธ๋ฐ ๊ฐ•์‚ฌ๋‹˜ ์„ค๋ช…์„ ๋“ค์„๋•Œ๋Š” ์ดํ•ด๊ฐ€ ๊ฐ€๋Š”๋ฐ ๋ง‰์ƒ ํ˜ผ์ž ๋‹ค์‹œ ํ•˜๋ ค๊ณ  ํ•˜๋ฉด ๋„ˆ๋ฌด ์–ด๋ ต๋‹ค. ๊ฐ€์žฅ ๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐ๋˜๋Š” ๋ถ€๋ถ„์€ ์›ํ•˜๋Š” ๋™์ž‘์„ ํ•˜๊ธฐ์œ„ํ•ด์„œ๋Š” ์–ด๋–ค ๋ช…๋ น์–ด๋ฅผ ์จ์•ผํ•˜๋Š”์ง€๋Š” ์•Œ๊ฒ ๋Š”๋ฐ ์™œ ๊ทธ ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ๋Š” ์•„์ง๋„ ์•Œ์•„๊ฐ€๋Š” ์ค‘์ด๋‹ค..ใ… ใ… 
์˜ค๋Š˜์€ git flow strategy์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋Š”๋ฐ ๋‹น์žฅ ๋‚ด์ผ ์˜ค๋Š˜ ๋ฐฐ์šด๋‚ด์šฉ ํ† ๋Œ€๋กœ ํŒ€ ๊ณผ์ œ๋ฅผ ์ž˜ ํ•ด๋‚ผ ์ˆ˜ ์žˆ๋Š”์ง€ ๊ฑฑ์ •์ด๋œ๋‹ค. ๊ทธ๋ž˜๋„ ์ง์ ‘ํ•ด๋ณด๋ฉด ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์›Œ์ง€๋‹ˆ๊นŒ ๋‚ด์ผ์€ ์˜ค๋Š˜๋ณด๋‹ค ๋” ์ž˜ ์ดํ•ดํ•œ ๋‚ด๊ฐ€ ๋  ์ˆ˜ ์žˆ์„๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹คโœŠ ์ด๋ ‡๊ฒŒ๋ผ๋„ ์ƒ๊ฐ์•ˆํ•˜๋ฉด ๋ฉ˜๋ถ•์˜ฌ๊ฑฐ๊ฐ™์œผ๋‹ˆ๊นŒใ…‹ใ…‹ใ…‹

CSS Flex๋Š” ํด๋ก ์ฝ”๋”ฉ์„ ํ• ๋•Œ ๋ฌธ์ œ์—†์ด ์ž˜ ๋‹ค๋ค˜์–ด์„œ ๋‚˜๋ฆ„ ๋งˆ์Šคํ„ฐํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์ž˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๋˜ ์†์„ฑ๋“ค์„ ์ด์šฉํ•ด๋ณด๋ ค๊ณ  ํ•˜๋‹ˆ๊นŒ ๋ฉ˜๋ถ•์ด ์™”๋‹ค๐Ÿ˜ฑ
ํŠนํžˆ Flex Items์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์†์„ฑ์ค‘์— flex-grow, flex-shrink๋Š” ๋ณผ๋•Œ๋งˆ๋‹ค ๊นŒ๋จน๋Š”๊ฑฐ ๊ฐ™์•„์„œ ์•„์˜ˆ ๋ธ”๋กœ๊ทธ์— ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค. ์•ž์œผ๋กœ ์ด์ฒ˜๋Ÿผ ์ž˜ ๋ชจ๋ฅด๋Š” ๋‚ด์šฉ๋“ค์€ ์˜ˆ์ œ์™€ ํ•จ๊ป˜ ํฌ์ŠคํŒ…์„ ํ•˜๋ ค๊ณ  ํ•œ๋‹คโœŠ

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ๊ฟˆ๊พธ๋ฉฐ

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