๐Ÿ˜๐Ÿ˜4์ฃผ๊ฐ„์˜ ํŒŒ์ด๋„ ํ”„๋กœ์ ํŠธ ํ›„๊ธฐ (3) ์ตœ์ข… ํšŒ๊ณ 

๐ŸŽ“์ˆ˜๋ฃŒ

์˜ค๋Š˜ ๋“œ๋””์–ด ์ด๋จธ์‹œ๋ธŒ 25๊ธฐ๋ฅผ ์กธ์—…ํ–ˆ๋‹ค. ํฌ๊ฒŒ ๊ฐํฅ์ด ์—†์—ˆ๋Š”๋ฐ ์ „ ๊ธฐ์ˆ˜๋ถ„๋“ค์˜ ์—ฐ๋ฝ์ด๋ผ๋“ ์ง€.. ๊ฐ™์€ ๊ธฐ์ˆ˜์—์„œ ํ•™์Šตํ–ˆ๋˜ ๋ถ„๋“ค์—๊ฒŒ ์—ฐ๋ฝ์„ ๋ฐ›์œผ๋ฉด์„œ..

์•„ ๋“œ๋””์–ด ์ฝ”๋“œ ์Šคํ…Œ์ด์ธ ์˜ ๊ณต์‹ ์ผ์ •์€ ๋งˆ๋ฌด๋ฆฌ ๋˜์—ˆ๊ตฌ๋‚˜.. ์‹ถ์—ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์•„์ง ๋๋‚˜์ง€ ์•Š์•˜๋‹ค.

๐ŸŽจ์•„์ง ๋” ๋‹ค๋“ฌ์„ ๋ถ€๋ถ„

์Šค์ผ€์ค„๋Ÿฌ ๋ถ€๋ถ„์€ ์šฐ๋ฆฌ๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ํŠธ๋ ๋กœ ์„œ๋น„์Šค ์ฒ˜๋Ÿผ ์‹ค์ œ ์‚ฌ์šฉ์ž๊ฐ€ ์œ ์ €๊ฐ€ ์นด๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์ˆ˜์ •ํ•˜๊ณ  ์ง€์šฐ๋Š” ์นธ๋ฐ˜ ๋ณด๋“œ ์ฒ˜๋Ÿผ ๋งŒ๋“ค์–ด๊ฐ€๊ธฐ๋กœ ๊ธฐํšํ–ˆ๋‹ค.

CSS ๋กœ ๊ตฌํ˜„ํ•ด ๋‚˜๊ฐ€๋Š”๋ฐ ๊นŒ์ง€๋Š” ๊ทธ๋Ÿญ์ €๋Ÿญ ๊ดœ์ฐฎ์•˜๋‹ค.

React-beautiful-dnd ๋ฅผ ํ†ตํ•œ Drag and Drop ์ด ๊ฐ€๋Šฅ ํ•˜๋„๋ก ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด ๋‚˜๊ฐ€๋Š” ๊ฒƒ์€ ๊ฐ™์ด ์ง„ํ–‰ํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์›๋ถ„๊ป˜์„œ ์ฐธ๊ณ ํ•  ์˜์ƒ๊ณผ ๋ณธ์ธ์ด ์ž‘์„ฑํ•œ

์ฝ”๋“œ๋ฅผ ๊ฐ™์ด ๋ณด์—ฌ์ฃผ์‹œ๋ฉฐ ํ•จ๊ป˜ ์ง„ํ–‰ํ•ด ๋‚˜๊ฐ”๊ธฐ์— ์™„๋ฒฝํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋กœ์ง์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

kanban

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

์ด ๋ถ€๋ถ„์€ ๊ฐ™์ด ๋„์™€์ฃผ์‹  ํŒ€์› ๋ถ„๊ณผ ๋‚ด๊ฐ€ ํ”„๋กœ์ ํŠธ ์ค‘์—์„œ ์ œ์ผ ํฐ ์‚ฐ์„ ๋งŒ๋‚˜๊ฒŒ ๋œ ์…ˆ์ด์˜€๋‹ค.

๊ฒฐ๋ก ์€ ๋‚ด๊ฐ€ ๋ฆฌ๋•์Šค๋ฅผ ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜์ง€ ์•Š์•˜๋‹ค๋Š” ์ ์ด์˜€๊ณ , ๊ทธ๊ฒƒ์ด ์•ˆํƒ€๊น์ง€๋งŒ ๋ฐ”๋กœ ์ธ์ •ํ•ด์•ผ ๋  ๋ถ€๋ถ„์ด์˜€๋‹ค.

๋งˆ์ง€๋ง‰ 4์ฃผ์ฐจ ์ค‘๋ฐ˜์— ์ด ์–ด๋ ค์›€์„ ๋งž๋‹ฅ ๋œจ๋ ค์„œ ์Šค์Šค๋กœ ๋ฐค์„ ์ƒˆ์›Œ๋ณด๋ฉด์„œ ์‹œ๋„ํ•ด ๋ด๋„ ์ž˜ ๋˜์ง€๋Š” ์•Š์•˜๋‹ค.

๋ฐœํ‘œ๋ฅผ ์•ž๋‘๊ณ  ์žˆ์œผ๋‹ˆ๊นŒ ์ผ๋‹จ gif ์˜์ƒ์„ ํ†ตํ•ด ์šฐ๋ฆฌ ํŒ€์ด ์˜๋„ํ•˜๋Š” ๊ธฐ๋Šฅ์€ ์ ์–ด๋„ ์ด๋Ÿฌํ•œ ๊ฒƒ์„ ์˜๋ฏธํ–ˆ๋‹ค๋Š” ์ •๋„๋Š” ์•Œ๋ ค์ค˜์•ผ ํ–ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๋ฐฑ์—”๋“œ์™€์˜ ์‹ค์ œ ์š”์ฒญ๊ณผ ์‘๋‹ต์ด ์˜ค๊ณ  ๊ฐ€์ง€๋Š” ์•Š์ง€๋งŒ, React ๋‚ด์—์„œ ์Šค์ผ€์ค„ ์นด๋“œ ํ•˜๋‚˜๊ฐ€ ์ถ”๊ฐ€๋˜๊ณ  ์‚ญ์ œ๋˜๋ฉฐ ์ด๋™ํ•˜๋Š” ๊ฒƒ ๊นŒ์ง€๋Š” ๊ตฌํ˜„ํ•˜์—ฌ ๋ฐœํ‘œ ์ „๋‚ 

gif ์˜์ƒ์„ ์ฐ์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๐Ÿšจ๋‚ด๊ฐ€ ๊ณ ์ณ์•ผ ํ•  ์ 

4์ฃผ ๊ฐ„์˜ ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„ ์ค‘ 4์ฃผ์ฐจ ์ดˆ๋ฐ˜ ๊นŒ์ง€๋Š” ํŒ€์›๋“ค์˜ ์ƒํ˜ธ ์†Œํ†ต๊ณผ ๋„์›€์œผ๋กœ ํšŒ์› ์ธ์ฆ ๋ฐ ์ •๋ณด ์ˆ˜์ • ๊ณผ ๊ด€๋ จ๋œ CRUD ๋Š” ๊ฑฐ์˜ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

์Šค์ผ€์ค„๋Ÿฌ ํŽ˜์ด์ง€ ๊ตฌํ˜„์„ ์‹œ์ž‘ํ•˜๋ฉด์„œ ๋ฐฑ์—”๋“œ ํŒŒํŠธ ํŒ€์›๋ถ„๋“ค์—๊ฒŒ API ์ˆ˜์ •์„ ์กฐ๊ธˆ ๊ฐ•ํ•˜๊ฒŒ ์š”์ฒญ ๋“œ๋ ธ๋˜ ๋ถ€๋ถ„์ด ๋– ์˜ค๋ฅธ๋‹ค.

์Šค์ผ€์ค„๋Ÿฌ ๋ถ€๋ถ„์ด ์ธ๋„ค์ผ ์ด๋ฏธ์ง€๋‚˜ ์Šค์ผ€์ค„๋Ÿฌ ํƒ€์ดํ‹€ ๋“ฑ์˜ ์ •๋ณด๋ฅผ ๋ฐ”๊พธ๋Š” ํŒŒํŠธ์™€ ์•„๋ž˜ ์นธ๋ฐ˜ ๋ณด๋“œ๊ฐ€ ์žˆ๋Š” ๋‘ ๋ถ€๋ถ„์œผ๋กœ ๋˜์–ด ์žˆ์œผ๋‹ˆ ์š”์ฒญ์„ ๋‚˜๋ˆ„์–ด ๋‹ฌ๋ผ๊ณ  ํ–ˆ์—ˆ๋˜ ๊ฒƒ์ธ๋ฐ,

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

๋ฐฑ์—”๋“œ ์—์„œ ์ฝ”๋“œ๋ฅผ ํ•˜๋‚˜๋กœ ํ•ฉ์ณ์„œ ํ•˜๋Š” ๊ฒƒ์ด ์–ด์ฉŒ๋ฉด ๋” ํšจ์œจ์  ์ผ ์ˆ˜๋„ ์žˆ๋Š”๋ฐ ๋ง์ด๋‹ค.

๋ฌด์Šจ ์ผ์ด๋“  ํ™•์‹คํ•œ ๊ฒƒ์€ ํ•˜๋‚˜๋„ ์—†๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์งœ๋Š” ์ฝ”๋“œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€ ์ธ๋ฐ ์กฐ๊ธˆ ๋” ์‹ ์ค‘ํ•œ ํƒœ๋„๋ฅผ ๊ฐ€์ง€๊ณ  ํŒ€์› ๋ถ„๋“ค๊ณผ ๋” ๋งŽ์€ ๋Œ€ํ™”๋ฅผ ํ†ตํ•ด ๋งž์ถฐ๋‚˜๊ฐ€๋„๋ก ๋…ธ๋ ฅํ•ด์•ผ ๊ฒ ๋‹ค.

my memo

๊ทธ๋ฆฌ๊ณ  ๊ฐ™์€ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์› ๋ถ„๊ณผ ์ดˆ๋ฐ˜์— CSS ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์—ญํ• ์„ ์„œ๋กœ ๋‘˜๋กœ ๋‚˜๋ˆ„์—ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์˜ˆ์ƒ ๋ฐ–์œผ๋กœ ํŒ€์› ๋ถ„๊ป˜์„œ ๊ตฌํ˜„์— ์–ด๋ ค์›€์„ ๋งŽ์ด ๊ฒช์œผ์‹œ๋Š” ๋“ฏ ํ–ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ๊ฐ€ ์›Œ๋‚™ ๋ฐ”์˜๊ฒŒ ์ง„ํ–‰๋˜๊ธฐ๋„ ํ•˜๊ธฐ์— ๊ทธ๋ ‡๋‹ค๋Š” ๋ณ€๋ช…์„ ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๊ฐ™์ด ํ•˜๋Š” ํŒ€์› ๋ถ„์˜ ์–ด๋ ค์›€์„ ์ž˜ ์‚ดํ”ผ๊ณ  ๋ณด๋‹ค ๋” ์ฑ™๊ฒจ ๋“œ๋ ธ์–ด์•ผ ํ–ˆ๋Š”๋ฐ,

์ด ๋ถ€๋ถ„์—์„œ ์กฐ๊ธˆ ๋ถ€์กฑํ–ˆ๋˜ ๊ฑฐ ๊ฐ™๋‹ค.

์ด ๋ถ€๋ถ„์€ ์ฐจ์ฃผ ํŒ€์›๋ถ„๊ณผ ์คŒ์—์„œ ๋ฏธํŒ…์„ ํ†ตํ•ด ๊ทธ๋™์•ˆ ์ง„ํ–‰ํ–ˆ๋˜ ์ฝ”๋“œ๋“ค์— ๋Œ€ํ•ด ์ž˜ ์„ค๋ช…๋“œ๋ฆฌ๊ณ  ํ•จ๊ป˜ ์ถ”๊ฐ€ ํ•™์Šต์„ ์ง„ํ–‰ํ•ด ๋‚˜๊ฐ€๋ฉฐ ํ•จ๊ป˜ ๋ณด์™„ํ•ด ๋‚˜๊ฐ€๋ ค๊ณ  ํ•œ๋‹ค.

ํŒ€์› ๋ถ„๋“ค๊ณผ ๋จธ๋ฆฌ๋ฅผ ๋งž๋Œ€๊ณ  (์คŒ ํ™”์ƒ์œผ๋กœ ใ…Žใ…Ž) ๊ณ ๋ฏผํ•˜๋‹ค๊ฐ€ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ๊ณ , ๊ทธ ์ฝ”๋“œ ๋กœ์ง์ด ์‹คํ˜„์ด ๋  ๋•Œ ๊ทธ ๊ธฐ์จ์€ ์ด๋ฃจ ๋ง๋กœ ๋‹ค ํ•  ์ˆ˜ ์—†์„ ์ •๋„์˜€๋‹ค.

์ด๋Ÿฌํ•œ ๊ฒฝํ—˜์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค€ ์ด๋จธ์‹œ๋ธŒ 25๊ธฐ 6ํŒ€ ZoomInCenter ํŒ€์› ๋ถ„๋“ค์—๊ฒŒ ์ •๋ง ๊ฐ์‚ฌํ•˜๋‹ค.

๐ŸŒŸ๊ณ„ํš

์ฐจ์ฃผ ๋ถ€ํ„ฐ ํŒ€์›๋“ค๊ณผ ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง ์ง„ํ–‰์„ ํ†ตํ•ด ๋ ˆ์ด์•„์›ƒ, CSS, ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์ตœ๋Œ€ํ•œ ์‹œ๋„ํ•˜๊ณ  ์™„์„ฑํ•  ์˜ˆ์ •์ด๋‹ค.

๋ฉด์ ‘ ์ค€๋น„๋„, ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ ํ’€์ด๋„ ๋ฌด์—‡ ํ•˜๋‚˜ ๋†“์น  ๊ฒƒ์ด ์—†๋‹ค.

๊ณ„ํš์„ ์ž˜ ์„ธ์šฐ๊ณ  ์–ด์ฉŒ๋ฉด ํ”„๋กœ์ ํŠธ ๋•Œ๋ณด๋‹ค ๋” ๋” ์˜ฌ๋นผ๋ฏธ์กฑ์ด ๋˜์–ด์•ผ ํ•  ๊ฒƒ๋งŒ ๊ฐ™๋‹ค.

๊ธ‰ํ•˜๊ฒŒ ์ด๋ ฅ์„œ๋ฅผ ์ œ์ถœํ•˜๊ณ  ๊ตฌ์ง์„ ํ•˜๊ธฐ ๋ณด๋‹ค๋Š” ์ผ์ฃผ์ผ ์ •๋„๋Š” ๋นก์„ธ๊ฒŒ ๋‚˜๋ฅผ ๋ชฐ์•„๋ถ™์—ฌ์„œ ์ž์‹ ๊ฐ 2g ํ•œ์Šคํ‘ผ ๋” ์ฑ„์šฐ๊ณ  ๋ณธ ๊ฒŒ์ž„์— ๋“ค์–ด๊ฐ€๋ ค ํ•œ๋‹ค.

ํ™”์ดํŒ…!!๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜


Written by@[DotoriMook]
ํ”„๋ก ํŠธ์—”๋“œ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ๋„ํ† ๋ฆฌ๋ฌต์˜ ๊ธฐ์ˆ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ ์ž…๋‹ˆ๋‹ค.

GitHubMediumTwitterFacebook