๐บ 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. [React Router & styled-components] ์ค์ ์์ withRouter๋ฅผ ์ฌ์ฉํ๊ธฐ(3) :: withRouter์ location props ๋ก ์ํ ๋ณ๊ฒฝํ๊ธฐ ํด๋น ์๋ฆฌ์ฆ๋ ์ด 3๋ถ์์ผ๋ก ๋๋์ด์ ธ ์์ต๋๋ค. ์ค์ ์์ withRouter๋ฅผ ์ฌ์ฉํ๊ธฐ(1) :: Router ๊ตฌ์ฑํ๊ธฐ ์ค์ ์์ withRouter๋ฅผ ์ฌ์ฉํ๊ธฐ(2) :: styled-components๋ฅผ ํ์ฉํ์ฌ ์คํ์ผ๋ง ์ ์ฉํ๊ธฐ ์ค์ ์์ withRouter๋ฅผ ์ฌ์ฉํ๊ธฐ(3) :: withRouter ์ฌ์ฉํ๊ธฐ ํด๋น ์๋ฆฌ์ฆ์๋ react์ styled-components์ ๋ํ ์ฝ๋๊ฐ ๋์ฌ ๊ฒ์ด๋ค. ์ง๊ธ ์ฐ๋ฆฌ๋ withRouter์ ๋ํด์ ์์๋ณด๋ ๊ณผ์ ์ด๋ฏ๋ก styled-components์ ๋ํด์ ์ ๋ชจ๋ฅด๋ ์ฌ๋์ ๊ทธ๋ฅ css ์ ์ฉ์ js ์์์ ์ํํ๊ตฌ๋~ ์ ๋๋ง ์ดํดํ๊ณ ๋์ด๊ฐ๋๋ก ํ์. ํ์ง๋ง ๊ฐ์ธ์ ์ธ ์ถ์ฒ์ผ๋ก styled-components์ ๋ํด์ ๋ชจ๋ฅด๋ ์ฌ๋์ ์ ๋ง ๋ฉ์ง๊ณ ์ฟจํ ๊ธฐ๋ฅ์ด๋ฏ๋ก ํด๋น .. 2020. 10. 7. [React Router & styled-components] ์ค์ ์์ withRouter๋ฅผ ์ฌ์ฉํ๊ธฐ(2) :: styled-components๋ฅผ ํ์ฉํ์ฌ ์คํ์ผ๋ง ์ ์ฉํ๊ธฐ ํด๋น ์๋ฆฌ์ฆ๋ ์ด 3๋ถ์์ผ๋ก ๋๋์ด์ ธ ์์ต๋๋ค. ์ค์ ์์ withRouter๋ฅผ ์ฌ์ฉํ๊ธฐ(1) :: Router ๊ตฌ์ฑํ๊ธฐ ์ค์ ์์ withRouter๋ฅผ ์ฌ์ฉํ๊ธฐ(2) :: styled-components๋ฅผ ํ์ฉํ์ฌ ์คํ์ผ๋ง ์ ์ฉํ๊ธฐ ์ค์ ์์ withRouter๋ฅผ ์ฌ์ฉํ๊ธฐ(3) :: withRouter ์ฌ์ฉํ๊ธฐ ํด๋น ์๋ฆฌ์ฆ์๋ react์ styled-components์ ๋ํ ์ฝ๋๊ฐ ๋์ฌ ๊ฒ์ด๋ค. ์ง๊ธ ์ฐ๋ฆฌ๋ withRouter์ ๋ํด์ ์์๋ณด๋ ๊ณผ์ ์ด๋ฏ๋ก styled-components์ ๋ํด์ ์ ๋ชจ๋ฅด๋ ์ฌ๋์ ๊ทธ๋ฅ css ์ ์ฉ์ js ์์์ ์ํํ๊ตฌ๋~ ์ ๋๋ง ์ดํดํ๊ณ ๋์ด๊ฐ๋๋ก ํ์. ํ์ง๋ง ๊ฐ์ธ์ ์ธ ์ถ์ฒ์ผ๋ก styled-components์ ๋ํด์ ๋ชจ๋ฅด๋ ์ฌ๋์ ์ ๋ง ๋ฉ์ง๊ณ ์ฟจํ ๊ธฐ๋ฅ์ด๋ฏ๋ก ํด๋น .. 2020. 10. 7. ์ด์ 1 2 3 4 5 6 ๋ค์