๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Lect & Tip118

[React] REST API, AXIOS๋กœ ๋ฐ›์•„์˜จ Array ๊ฐ์ฒด๋ฅผ mapํ•จ์ˆ˜ ํ˜ธ์ถœ์ด ๋ถˆ๊ฐ€๋Šฅํ• ๋•Œ [React] REST API, AXIOS๋กœ ๋ฐ›์•„์˜จ Array ๊ฐ์ฒด๋ฅผ mapํ•จ์ˆ˜ ํ˜ธ์ถœ์ด ๋ถˆ๊ฐ€๋Šฅํ• ๋•Œ์ด ๊ธ€์—์„œ๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ REST API๋กœ๋ถ€ํ„ฐ Axios๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๋ฐฐ์—ด(Array) ๊ฐ์ฒด์˜ map ํ•จ์ˆ˜ ํ˜ธ์ถœ ์˜ค๋ฅ˜์— ๋Œ€ํ•ด ์ƒ์„ธํžˆ ์„ค๋ช…ํ•˜๊ณ , ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ฐ„๋‹จํ•˜๋ฉด์„œ๋„ ํšจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ์™€ ๊ด€๋ จํ•˜์—ฌ Promise ๊ฐ์ฒด๊ฐ€ ํ•ด๊ฒฐ๋˜๊ธฐ ์ „์— ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง๋˜์–ด ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜์˜ ์›์ธ๊ณผ ํ•ด๊ฒฐ์ฑ…์„ ์ค‘์ ์ ์œผ๋กœ ๋‹ค๋ฃจ๋ฉฐ, ๋กœ๋”ฉ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ํ™œ์šฉํ•œ ์ ‘๊ทผ๋ฒ•์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค.๋„์ž…๋ถ€React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€ ๋ Œ๋”๋งํ•˜๋Š” ๊ณผ์ •์€ ๋งค์šฐ ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค. ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด Axios๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ REST API์™€ ํ†ต์‹ ํ•˜๋ฉฐ ๋ฐ์ดํ„ฐ.. 2024. 10. 18.
ํŒŒ์ด์ฌ '์—ฐ์ฐจํœด๊ฐ€์ผ์ˆ˜ ๊ณ„์‚ฐ๊ธฐ' ๋งŒ๋“ค๊ธฐ ํŒŒ์ด์ฌ '์—ฐ์ฐจํœด๊ฐ€์ผ์ˆ˜ ๊ณ„์‚ฐ๊ธฐ' ๋งŒ๋“ค๊ธฐ์ง์žฅ์—์„œ ์—ฐ์ฐจ ํœด๊ฐ€๋Š” ์ง์›๋“ค์˜ ์ค‘์š”ํ•œ ๊ถŒ๋ฆฌ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์—ฐ์ฐจ๋ฅผ ๊ณ„์‚ฐํ•˜๋Š” ์ผ์ด ์ข…์ข… ๋ฒˆ๊ฑฐ๋กญ๊ณ  ๋ณต์žกํ•˜๊ฒŒ ๋Š๊ปด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ๋•๊ธฐ ์œ„ํ•ด ์šฐ๋ฆฌ๋Š” ํŒŒ์ด์ฌ์„ ์‚ฌ์šฉํ•ด ์—ฐ์ฐจํœด๊ฐ€์ผ์ˆ˜๋ฅผ ์‰ฝ๊ฒŒ ๊ณ„์‚ฐํ•  ์ˆ˜ ์žˆ๋Š” '์—ฐ์ฐจํœด๊ฐ€์ผ์ˆ˜ ๊ณ„์‚ฐ๊ธฐ'๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด ์—ฐ์ฐจํœด๊ฐ€์ผ์ˆ˜ ๊ณ„์‚ฐ๊ธฐ ํ”„๋กœ๊ทธ๋žจ์€ ์ž…์‚ฌ์ผ์„ ๊ธฐ์ค€์œผ๋กœ ์—ฐ์ฐจํœด๊ฐ€๋ฅผ ์ž๋™์œผ๋กœ ๊ณ„์‚ฐํ•˜์—ฌ ๋ณต์žกํ•œ ์ˆ˜์‹์„ ๋Œ€์‹ ํ•ด์ค„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ์ฝ”๋“œ๋ฅผ ๋‹จ๊ณ„๋ณ„๋กœ ์„ค๋ช…ํ•˜๊ณ , ๊ทธ ํ™œ์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.์—ฐ์ฐจํœด๊ฐ€ ๊ณ„์‚ฐ ๊ทœ์น™ ์ดํ•ดํ•˜๊ธฐ๋จผ์ € ์—ฐ์ฐจํœด๊ฐ€ ๊ณ„์‚ฐ์˜ ๊ธฐ๋ณธ ๊ทœ์น™์„ ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋Œ€ํ•œ๋ฏผ๊ตญ ๊ทผ๋กœ๊ธฐ์ค€๋ฒ•์— ๋”ฐ๋ฅด๋ฉด ์—ฐ์ฐจํœด๊ฐ€๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ถ€์—ฌ๋ฉ๋‹ˆ๋‹ค.์ž…์‚ฌ ํ›„ 1๋…„ ๋ฏธ๋งŒ: ๋งค๋‹ฌ ๊ฐœ๊ทผ ์‹œ 1์ผ์˜ ์œ ๊ธ‰ํœด๊ฐ€๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.์ž…์‚ฌ ํ›„ 1๋…„ ์ด์ƒ: 1๋…„ ๋™์•ˆ 80.. 2024. 10. 10.
์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์™€ ์ปดํฌ๋„ŒํŠธ์˜ ๋ถ„๋ฆฌ: ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๋†’์ด๋Š” ๋ฐฉ๋ฒ• ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์™€ ์ปดํฌ๋„ŒํŠธ์˜ ๋ถ„๋ฆฌ: ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๋†’์ด๋Š” ๋ฐฉ๋ฒ•๊ฐœ๋ฐœ์„ ํ•˜๋‹ค ๋ณด๋ฉด ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๊ทธ๋Œ€๋กœ ํ™”๋ฉด์— ๋ Œ๋”๋งํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌํ•œ ๊ฒฝ์šฐ, ์„œ๋ฒ„์—์„œ ๋ฐ˜ํ™˜๋˜๋Š” ๋ฐ์ดํ„ฐ์˜ ํ˜•์‹์ด ๋ณ€๊ฒฝ๋˜๋ฉด ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ์—๋„ ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ฒŒ ๋˜์–ด ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์–ด๋ ค์›Œ์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์™€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ฐ๊ฐ์˜ ์ฑ…์ž„์„ ๋ช…ํ™•ํžˆ ํ•˜๊ณ , ๋ณ€ํ™”ํ•˜๋Š” ํ™˜๊ฒฝ์—์„œ๋„ ์•ˆ์ •์ ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๋ฌธ์ œ์˜ ์ถœ๋ฐœ์ : ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์™€ ์ปดํฌ๋„ŒํŠธ์˜ ๊ฐ•ํ•œ ๊ฒฐํ•ฉ๋Œ€๋ถ€๋ถ„์˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„ ์ด๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๋Š” ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ ์ดˆ๊ธฐ์—๋Š” ์„œ๋ฒ„์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ฐ์ดํ„ฐ ํ˜•์‹์— ๋งž์ถฐ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ์ž์—ฐ์Šค๋Ÿฌ์›Œ ๋ณด์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค.. 2024. 9. 9.
bootstrap selectpicker multiple js ์ˆ˜์ •: ์ „์ฒด ์„ ํƒ์ด ์ฒดํฌ ๋˜์–ด ์žˆ๋Š” ์ƒํƒœ์—์„œ ๋‹ค๋ฅธ ์˜ต์…˜์ด ํ•˜๋‚˜๋ผ๋„ ์ฒดํฌ ํ•ด์ œ๋  ๊ฒฝ์šฐ ์ „์ฒด ์„ ํƒ๋„ ๊ฐ™์ด ์ฒดํฌ ํ•ด์ œ ๋˜๊ฒŒ bootstrap selectpicker multiple js ์ˆ˜์ •: ์ „์ฒด ์„ ํƒ์ด ์ฒดํฌ๋˜์–ด ์žˆ๋Š” ์ƒํƒœ์—์„œ ๋‹ค๋ฅธ ์˜ต์…˜์ด ํ•˜๋‚˜๋ผ๋„ ์ฒดํฌ ํ•ด์ œ๋  ๊ฒฝ์šฐ ์ „์ฒด ์„ ํƒ๋„ ๊ฐ™์ด ์ฒดํฌ ํ•ด์ œ๋˜๊ฒŒBootstrap์€ ์›น ๊ฐœ๋ฐœ์—์„œ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ, ๋‹ค์–‘ํ•œ UI ์ปดํฌ๋„ŒํŠธ์™€ ์Šคํƒ€์ผ์„ ์ œ๊ณตํ•ด ๊ฐœ๋ฐœ์ž๋“ค์ด ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค. ๊ทธ์ค‘์—์„œ๋„ bootstrap-select๋Š” ๊ธฐ๋ณธ HTML ์š”์†Œ๋ฅผ ๋”์šฑ ์„ธ๋ จ๋˜๊ฒŒ ๋ณด์ด๋„๋ก ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๋Š” ๋ฐ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ํŠนํžˆ selectpicker๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์˜ต์…˜์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ€ํ‹ฐ ์…€๋ ‰ํŠธ(dropdown) ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ๋ฉ€ํ‹ฐ ์…€๋ ‰ํŠธ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ๋•Œ, "์ „์ฒด ์„ ํƒ(Select All)" ์˜ต์…˜๊ณผ ๊ด€๋ จ๋œ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ •์—์„œ.. 2024. 8. 23.
๋ฆฌ๋ˆ…์Šค์—์„œ Mattermost๋ฅผ HTTPS(SSL)๋กœ ์šด์˜ํ•˜๋Š” ๋ฐฉ๋ฒ• ๋ฆฌ๋ˆ…์Šค์—์„œ Mattermost๋ฅผ HTTPS(SSL)๋กœ ์šด์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•๋ฆฌ๋ˆ…์Šค ํ™˜๊ฒฝ์—์„œ Slack์˜ ๋Œ€์•ˆ์œผ๋กœ ์ž๋ฆฌ์žก๊ณ  ์žˆ๋Š” Mattermost๋ฅผ ์„ค์น˜ํ•˜๊ณ  HTTPS(SSL) ๋ชจ๋“œ๋กœ ์šด์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด์ „ ๊ธ€์—์„œ๋Š” Mattermost์˜ ๊ธฐ๋ณธ ์„ค์น˜ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋‹ค๋ฃจ์—ˆ์œผ๋‚˜, ์ด๋ฒˆ์—๋Š” HTTPS๋กœ ๋ณด์•ˆ์„ ๊ฐ•ํ™”ํ•˜์—ฌ Mattermost๋ฅผ ์šด์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ž์„ธํžˆ ์„ค๋ช…๋“œ๋ฆด ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ˜„์žฌ ์ €๋Š” Mattermost๋ฅผ HTTPS ๋ชจ๋“œ๋กœ ์„ฑ๊ณต์ ์œผ๋กœ ์šด์˜ ์ค‘์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” HTTPS ์„ค์ •์„ ์™„๋ฃŒํ•œ Mattermost์˜ ์ง์ ‘์ ์ธ ์„ค์ • ๋ฐฉ๋ฒ•์„ ์•ˆ๋‚ดํ•˜๋ฉฐ, NGINX ํ”„๋ก์‹œ ์„ค์ • ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ๋Š” ์ถ”ํ›„ ์„ฑ๊ณต ์‹œ ๋ณ„๋„๋กœ ์„ค๋ช…๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.1. ๋„๋ฉ”์ธ ๊ตฌ๋งคMattermost๋ฅผ HTTPS๋กœ ์šด์˜ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋„๋ฉ”์ธ์ด ํ•„์š”.. 2024. 8. 15.
์œˆ๋„์šฐ 10์—์„œ Linux Bash Shell ์„ค์น˜ ๋ฐ WSL ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ์œˆ๋„์šฐ 10์—์„œ Linux Bash Shell ์„ค์น˜ ๋ฐ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์œˆ๋„์šฐ 10์—์„œ Linux Bash Shell์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๊ฐœ๋ฐœ์ž์™€ IT ์ „๋ฌธ๊ฐ€๋“ค ์‚ฌ์ด์—์„œ ์ ์  ๋” ์ธ๊ธฐ๋ฅผ ๋Œ๊ณ  ์žˆ๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ์œˆ๋„์šฐ์™€ Linux ํ™˜๊ฒฝ์„ ๋™์‹œ์— ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋‹ค์–‘ํ•œ ๊ฐœ๋ฐœ ๋„๊ตฌ์™€ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ๋” ์œ ์—ฐํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ์œˆ๋„์šฐ 10์—์„œ Linux Bash Shell์„ ์„ค์น˜ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.1. WSL(Windows Subsystem for Linux) ์†Œ๊ฐœWSL(Windows Subsystem for Linux)์€ ์œˆ๋„์šฐ 10์—์„œ Linux ๋ฐฐํฌํŒ์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํ˜ธํ™˜ ๊ณ„์ธต์ž…๋‹ˆ๋‹ค. WSL์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž๋Š” Linux ๋ช…๋ น์–ด์™€ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์œˆ๋„.. 2024. 7. 30.