๐Ÿ ๋…ธ๋งˆ๋“œ์ฝ”๋” ํŒŒ์ด์ฌ ์ฑŒ๋ฆฐ์ง€ 1๊ธฐ ์กธ์—… ํ›„๊ธฐ

ํŒŒ์ด์ฌ ์ฑŒ๋ฆฐ์ง€ 1๊ธฐ๋ฅผ ์กธ์—…ํ–ˆ์Šต๋‹ˆ๋‹ค!๐ŸŽŠ

์œ ํŠœ๋ธŒ ํด๋ก  ์ฑŒ๋ฆฐ์ง€ ํ›„๊ธฐ์— ์ด์–ด์„œ ํŒŒ์ด์ฌ ์ฑŒ๋ฆฐ์ง€ ํ›„๊ธฐ๋ฅผ ์จ๋ณด๋ ค ํ•ฉ๋‹ˆ๋‹ค! ํŒŒ์ด์ฌ ์ฑŒ๋ฆฐ์ง€ 1๊ธฐ๋Š” 4์›”์— ํ–ˆ์—ˆ๋Š”๋ฐ ์ง€๊ธˆ์ด 10์›”์ด๋‹ˆ ๋ฒŒ์จ 6๊ฐœ์›”์ด ์ง€๋‚ฌ๊ตฐ์š”๐Ÿ˜ฎ ์‹œ๊ฐ„์ด ์ฐธ ๋น ๋ฅด๋„ค์š”.

์ด์ œ ํ›„๊ธฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค!!๐Ÿ’จ

๋‚ด ์ตœ์•  ํŒŒ์ด์ฌ

์ด๋ฒˆ ํŒŒ์ด์ฌ ์ฑŒ๋ฆฐ์ง€์—์„œ๋Š” ํŒŒ์ด์ฌ ๋ฌธ๋ฒ•๊ณผ ํฌ๋กค๋ง ๊ทธ๋ฆฌ๊ณ  Flask๋ฅผ ์ด์šฉํ•œ ๊ฐ„๋‹จํ•œ ์›น ๊ตฌํ˜„๊นŒ์ง€ ๋ฐฐ์› ๋‹ค! ๋‚ด ์ตœ์•  ์–ธ์–ด์ธ ๐Ÿ’–ํŒŒ์ด์ฌ๐Ÿ’–์„ ์‚ฌ์šฉํ•ด์„œ ๋‹ค๋ฅธ ์ฑŒ๋ฆฐ์ง€ ํ–ˆ์„ ๋•Œ๋ณด๋‹ค๋Š” ํ›จ์”ฌ ์ฆ๊ฒ๊ฒŒ ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ์ž๋ฃŒ๊ตฌ์กฐ๋„ ํ›จ์”ฌ ์ž์œ ๋กญ๊ฒŒ ์“ฐ๊ณ  ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง๊นŒ์ง€ ํ–ˆ์—ˆ๋‹ค.

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

ํฌ๋กค๋ง ์‹ฌํ™”์™€ ๊ฐ„๋‹จํ•œ ์›น์‚ฌ์ดํŠธ ๊ตฌํ˜„

12-1

์กธ์—… ๊ณผ์ œ - stackoverflow์™€ weworkremote์—์„œ ์ผ์ž๋ฆฌ๋ฅผ ํฌ๋กค๋งํ•˜๋Š” ์„œ๋น„์Šค

ํฌ๋กค๋ง์€ ์ฝ”์•Œ๋ผ์œ ๋‹ˆ๋ธŒ ํ™œ๋™์—์„œ ์ฒ˜์Œ ๋ฐฐ์› ๋Š”๋ฐ ํ›จ์”ฌ ๊นŠ์ด์žˆ๊ฒŒ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค. requests๋กœ ๋ฐ์ดํ„ฐ ๊ธ์–ด์˜ค๊ธฐ, ํŽ˜์ด์ง€๋ฅผ ๋„˜๊ธฐ๊ธฐ, csv ํŒŒ์ผ์„ ๋งŒ๋“ค๊ธฐ ๋“ฑ์„ ํ•จ์ˆ˜์™€ ์—ฌ๋Ÿฌ ํŒŒ์ด์ฌ ํŒŒ์ผ๋กœ ์„ธ๋ถ„ํ™”๋ฅผ ํ–ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ์‚ฌ์ดํŠธ์— ๋งž์ถ”์–ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ธ์–ด์˜ค๋Š” ์ž‘์—…๋งŒ ์ฝ”๋“œ๋กœ ์งœ์ฃผ๋ฉด ๋‚˜๋จธ์ง€๋Š” ๊ธฐ์กด์— ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค!

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

๐Ÿ‘‰ ํŒŒ์ด์ฌ ์ฑŒ๋ฆฐ์ง€ ์กธ์—… ์ž‘ํ’ˆ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ

์ง€์˜ฅ์˜ ๋ฌดํ•œ๊ณผ์ œ ์ƒํƒœ

12-3

์™„๋ฃŒ๋จ 41๊ฐœ ์‹คํ™”๋ƒ..?

์ด ๋•Œ ํ•™๊ต๋ฅผ ๋‹ค๋‹ˆ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์˜จ๋ผ์ธ ๊ฐ•์˜๋ผ ๊ณผ์ œ๊ฐ€ ๋ฏธ์นœ๋“ฏ์ด ๋งŽ์ด ๋‚˜์™”์—ˆ๋‹ค. ์ผ์ฃผ์ผ์— ๊ณ ์ •์ ์œผ๋กœ ๊ณผ์ œ 4๊ฐœ๊ฐ€ ์žˆ์—ˆ๋‹ค. ๋‚œ์ด๋„๋Š” ์‰ฌ์›€์—์„œ ๋ณดํ†ต์ •๋„ ์˜€์ง€๋งŒ ๊ฐ„๊ฐ„ํžˆ ์–ด๋ ค์›€ ๋‚œ์ด๋„์˜ ๊ณผ์ œ๊ฐ€ ๋ผ์–ด์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ •๋ง ํ—ฌ์ด์—ˆ๋‹ค. ์˜จ๋ผ์ธ ๊ฐ•์˜? ์ ˆ๋Œ€ ๋ชปํ•˜๊ฒ ๋‹ค.

์–ด์จŒ๋“  ์ด ๋‹น์‹œ ๋„ˆ๋ฌด ๋ฐ”๋นด๋˜ ํ„ฐ๋ผ ์กธ์—…๊ณผ์ œ์— ํฐ ์‹œ๊ฐ„์„ ์Ÿ์ง€ ๋ชปํ–ˆ๋‹ค๐Ÿ˜ฅ ์กฐ๊ธˆ ๋” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์—ˆ์ง€๋งŒ์€ flask-pagination ๋ชจ๋“ˆ๋กœ ํŽ˜์ด์ง€ ์ƒ์„ฑ๊นŒ์ง€ ๋ฐ–์— ๋ชปํ–ˆ๋‹ค. ๊ฒ€์ƒ‰๊ธฐ๋Šฅ์ด๋‚˜ ๊ฒ€์ƒ‰ ์ž๋™์ €์žฅ ๊ธฐ๋Šฅ ๋“ฑ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ์„ ๋„ฃ๊ณ  ์‹ถ์—ˆ์ง€๋งŒ์€ ๊ทธ๋Ÿฌ์ง€ ๋ชปํ•ด์„œ ๋งŽ์ด ์•„์‰ฌ์› ๋‹คใ… ใ…  โ €

ํŒŒ์ด์ฌ ์ฑŒ๋ฆฐ์ง€ ์กธ์—…๊ณผ ๊ทธ ํ›„

12-2

React ๋นผ๊ณ  ๋‹ค ๋ชจ์•˜๋‹ค. React ์ฑŒ๋ฆฐ์ง€์— ๋„์ „ํ–ˆ์ง€๋งŒ..

ํŒŒ์ด์ฌ ์ฑŒ๋ฆฐ์ง€๋ฅผ ๋์œผ๋กœ ์ฑŒ๋ฆฐ์ง€๋Š” ์ฐธ์—ฌํ•˜์ง€ ์•Š์•˜๋‹ค. ์ •ํ™•ํžˆ ๋งํ•˜๋ฉด 1ํ•™๊ธฐ ๋™์•ˆ๋งŒ์ด๋‹ค. ํŒŒ์ด์ฌ์€ ๋‚ด๊ฐ€ ์ด๋ฏธ ๊ณต๋ถ€ํ•œ ์–ธ์–ด๋ผ์„œ ์ฑŒ๋ฆฐ์ง€๋ฅผ ๋ณ‘ํ–‰ํ•  ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ ์ƒˆ๋กœ ๋ฐฐ์šฐ๋Š” react๋ฅผ ํ•™๊ธฐ ๊ณต๋ถ€๋ฅผ ๋ณ‘ํ–‰ํ•˜๋ฉด์„œ ํ•˜๊ธฐ์—๋Š” ๋„ˆ๋ฌด ๋ฒ…์ฐผ๋‹ค.

์กธ์—… ํ›„ 6๊ฐœ์›”์ด ์ง€๋‚œ ํ›„ ์“ฐ๋Š” ํ›„๊ธฐ๋ผ ์ถ”๊ฐ€๋กœ ์ ์ž๋ฉด ์—ฌ๋ฆ„๋ฐฉํ•™ ๋•Œ ๋ฆฌ์•กํŠธ ์ฑŒ๋ฆฐ์ง€์— ๋„์ „ํ–ˆ๋‹ค๊ฐ€ ํฌ๊ธฐํ–ˆ๋‹ค. ์‚ฌ์‹ค ์ดํ‹€๋งŒ ๋ฒ„ํ‹ฐ๋ฉด ์กธ์—…์ด์—ˆ๋Š”๋ฐ, ๋ฐค์ด ๋˜์„œ์•ผ ๊ฐ•์˜ ๋“ฃ๊ณ  ๊ธ‰ํ•˜๊ฒŒ ๊ณผ์ œ๋ฅผ ๋๋‚ด์„œ โ€œ์ด๋ ‡๊ฒŒ ์กธ์—…ํ•ด์„œ ์˜๋ฏธ๊ฐ€ ์žˆ์„๊นŒ?โ€ ์ƒ๊ฐ์ด ๋“ค์–ด ํฌ๊ธฐํ–ˆ๋‹ค. ํด๋ก ์ฝ”๋”ฉ ์˜ํ™” ํ‰์  ์›น์„œ๋น„์Šค๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  16์ผ ๋’ค ์—ด๋ฆฌ๋Š” ๋‹ค์Œ ์ฑŒ๋ฆฐ์ง€์— ์ฐธ์—ฌํ•  ์˜ˆ์ •์ด๋‹ค. ๋‹ค์Œ์—๋Š” ๋ฆฌ์•กํŠธ ์ฑŒ๋ฆฐ์ง€๋ฅผ ์šฐ์ˆ˜ ์กธ์—…๐ŸŽ“ํ•ด์„œ ์ฐพ์•„์˜ค๊ฒ ๋‹ค!

๊ทธ๋Ÿผ ์ด์ด๐Ÿ’จ


Written by@์ฝ”๋”ฉํ•˜๋Š”ํŽญ๊ท„
ํŒŒ์ด์ฌ๊ณผ ์›น์— ๊ด€์‹ฌ ๋งŽ์€ ์ปด๊ณต ์ „๊ณต์ž๐Ÿ‘ฉโ€๐Ÿ’ป

GitHubInstagram