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

๐Ÿ“บ Front End/-- react & redux & nextjs33

[React-Spring ๊ณต์‹ ๋ฌธ์„œ๋กœ ๋ฐฐ์šฐ๊ธฐ] React-Spring ์†Œ๊ฐœ React-Spring์€ ์Šคํ”„๋ง์˜ ๋ฌผ๋ฆฌ์— ๊ธฐ๋ฐ˜ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ UI animation์— ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๊ณ , React-Spring์€ ๋‹น์‹ ์˜ ์•„์ด๋””์–ด๋ฅผ ์›€์ง์ด๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ์ถฉ๋ถ„ํžˆ ์œ ์—ฐํ•œ Tools๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ํ˜„๋Œ€์˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์— ์ ‘๊ทผํ•˜๋Š” ๋Œ€ํ‘œ์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์•„๋‹ค. ์ด๊ฒƒ์€ Christopher Chedau์˜ animated์™€ Cheng Lou์˜ react-motion์— ๋งค์šฐ ์˜๊ฐ์„ ๋ฐ›์•˜๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ๊ฐ•๋ ฅํ•œ ์„ฑ๋Šฅ๊ณผ React-motion์˜ ์‚ฌ์šฉ ํŽธ์˜์„ฑ์„ ๊ณ„์Šนํ•œ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ๋Œ€๋ถ€๋ถ„ ํ•„์ˆ˜์ ์ด๋ฉฐ ๋ฐ˜์‘ ๋™์ž‘์€ ๋Œ€๋ถ€๋ถ„ ์„ ์–ธ์ ์ด๊ณ  ๋ฐ˜์‘ ์Šคํ”„๋ง ๋ธŒ๋ฆฌ์ง€ ๋‘˜ ๋‹ค ํ•„์ˆ˜์ ์ด๋‹ค. ๋‹น์‹ ์€ ๋‹น์‹ ์˜ ๊ฒฌํ•ด๋ฅผ ํ˜•์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋ฐ˜๋“œ์‹œ ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š” ์ž‘๊ณ  ๋ช…์‹œ์ ์ธ ํšจ.. 2020. 11. 4.
[๋ฆฌ์•กํŠธ Hook] useState ๋กœ ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๊ฐ’์„ ์ด์šฉํ•˜์—ฌ ๋ฐฐ์—ด ๋ Œ๋”๋ง ํ•˜๊ธฐ. ์ง€๋‚œ ์‹œ๊ฐ„ ์šฐ๋ฆฌ๋Š” useState๋ฅผ ์ด์šฉํ•˜์—ฌ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์— ์ƒํƒœ๋ฅผ ๋ถ€์—ฌํ•˜๊ธฐ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค. ํ•˜์ง€๋งŒ ์ง€๋‚œ ์‹œ๊ฐ„ useState์— ๋Œ€ํ•ด์„œ ๋ง›๋งŒ ๋ดค๊ธฐ ๋•Œ๋ฌธ์— ์•„์ง ์‹ค์ „์—์„œ useState๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ์—๋Š” ํ„ฑ์—†์ด ๋ถ€์กฑํ•  ๊ฒƒ ๊ฐ™๋‹ค๋Š” ๋Š๋‚Œ์„ ๋ฐ›์•˜๋‹ค. ์˜ค๋Š˜์€ useState์— ๋Œ€ํ•ด์„œ ํ™•์‹คํžˆ ์ดํ•ดํ•ด๋ณด๊ณ  ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„์ง€ ์•Œ์•„๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด์ž. ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ ์šฐ๋ฆฌ๊ฐ€ ์ด๋ฒˆ ์‹œ๊ฐ„ ์ตœ์ข…์ ์œผ๋กœ ๋งŒ๋“ค ๊ฒƒ์€ ์‚ฌ์šฉ์ž ์ž…๋ ฅ์— ๋”ฐ๋ผ์„œ ๋ฐฐ์—ด์„ ๋งŒ๋“ค๊ณ  ์ด๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•ด ๋ณผ ๊ฒƒ์ด๋‹ค. ๊ฒฐ๊ณผ๋ฌผ์€ ์•„๋งˆ ์ด๋ ‡๊ฒŒ ๋‚˜์˜ฌ๊ฒƒ์ด๋‹ค. ์ˆœ์„œ ์ž…๋ ฅ(input form) ํผ ์ƒ์„ฑ input ํผ์˜ onChange ๋ฉ”์„œ๋“œ ๊ตฌํ˜„ useState๋ฅผ ์ด์šฉํ•˜์—ฌ state๋ฅผ ๋ณ€๊ฒฝ ์‚ฌ์šฉ์ž ์ถ”๊ฐ€ ๋ฒ„ํŠผ์˜ onClick ๋ฉ”์„œ๋“œ ๊ตฌํ˜„ ๋ฐฐ์—ด ๋ Œ๋”๋ง ์ž…๋ ฅ ํผ ์ƒ.. 2020. 10. 16.
[React axios] React์˜ axios ๊ธฐ๋ณธ :: axios๋กœ GET, POST, PUT, DELETE ์š”์ฒญ ๋ณด๋‚ด๊ธฐ ์ง€๋‚œ ์‹œ๊ฐ„์—๋Š” ์™œ ์šฐ๋ฆฌ๊ฐ€ axios๋ฅผ ์•Œ์•„์•ผ ํ• ๊นŒ?์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค. [React axios] ๋ฆฌ์•กํŠธ axios๋ž€? :: HTTP-API ์—ฐ๋™์„ ์œ„ํ•œ ๋ชจ๋“ˆ (axios vs Fetch API) ์šฐ๋ฆฌ๊ฐ€ ์ผ๋ฐ˜์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ API๋ฅผ ์—ฐ๋™ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ณดํ†ต fetch-Api๋ฅผ ์‚ฌ์šฉํ•˜๊ณค ํ–ˆ๋‹ค. ๋ฆฌ์•กํŠธ ๋˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ built-in ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ค‘ ํ•˜๋‚˜์ธ fetch-api๋˜ํ•œ ํ›Œ๋ฅญํ•œ api ์—ฐ๋™ ๋ชจ๋“ˆ์ด๋‹ค. ํ•˜์ง€๋งŒ wonit.tistory.com ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์‹ค์ œ๋กœ axios๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— axios์˜ ๊ธฐ๋ณธ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค ํ•œ๋‹ค. REST API REST API๋Š” ์šฐ๋ฆฌ๊ฐ€ ํ•˜๊ณ ์‹ถ์€ ์ž‘์—…์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๋ฉ”์„œ๋“œ๋กœ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€ ๋‹ค๋“ค ์•Œ๊ณ  ์žˆ์„ ๊ฒƒ์ด๋‹ค. REST API์—๋Š” ๋Œ€ํ‘œ์ ์œผ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ HTT.. 2020. 10. 8.
[React axios] ๋ฆฌ์•กํŠธ axios๋ž€? :: HTTP-API ์—ฐ๋™์„ ์œ„ํ•œ ๋ชจ๋“ˆ (axios vs Fetch API) ์šฐ๋ฆฌ๊ฐ€ ์ผ๋ฐ˜์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ API๋ฅผ ์—ฐ๋™ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ณดํ†ต fetch-Api๋ฅผ ์‚ฌ์šฉํ•˜๊ณค ํ–ˆ๋‹ค. ๋ฆฌ์•กํŠธ ๋˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ built-in ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ค‘ ํ•˜๋‚˜์ธ fetch-api๋˜ํ•œ ํ›Œ๋ฅญํ•œ api ์—ฐ๋™ ๋ชจ๋“ˆ์ด๋‹ค. ํ•˜์ง€๋งŒ fetch-api๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ built-in ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ผ๋Š” ํŠน์„ฑ ๋•๋ถ„์ธ์ง€ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์€ React์—์„œ axios๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•œ๋‹ค. ๋ฆฌ์•กํŠธ์—์„œ fetch api๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ์™œ ์‚ฌ๋žŒ๋“ค์€ axios๋ฅผ ์„ ํ˜ธํ• ๊นŒ? ์„œ๋กœ ๋น„๊ต๋ฅผ ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๋ด๋ณด์ž. axios vs Fetch-api // fetch const url = 'http://localhost/test.htm'; const options = { method: 'POST', headers: { 'Accept.. 2020. 10. 8.