Frontend/React
2023.08.16
ํ ํ์ฌ์ ๊ธฐ์ ์ธํฐ๋ทฐ์์ ๋ฆฌ์กํธ์ key์ ๋ํ ์ง๋ฌธ์ ๋ฐ์๋ค. ํด๋น ์ง๋ฌธ์ ๋ํ ๋๋ต์ ํ๋ ๊ณผ์ ์์ ๊ทธ๋์์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ๋ฆฌ์คํธ์ ๊ฐ ํญ๋ชฉ์ key๋ฅผ ํ ๋นํ๋ ๊ฒ์ ๋๋ฌด ๋น์ฐ์ํ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์ด ์ด์ ๋ํด ์์๋ณด๋ ค๊ณ ํ๋ค. ๋ฐฐ์ด์์ ๋ฐ์ดํฐ ๋ ๋๋ง const people = [ { id: 0, name: 'Creola Katherine Johnson', profession: 'mathematician', }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', profession: 'chemist', }, ]; export default function List() { const listItems = people.map((person) =>..
Frontend/React
2023.06.21
๐ฅ ๋ฐ์ํ ๋ฌธ์ ํ
์คํธ๋ฅผ ์
๋ ฅํ๊ณ ์ํฐ(Enter) ํค๋ฅผ ๋๋ฅด๋ฉด ๋ชฉ๋ก์ ์๋กญ๊ฒ ์ถ๊ฐ๋๊ณ input ์ฐฝ์ ๋น์์ง๋๋ก ๊ตฌํํ๋๋ฐ ์ ์ง ๋ชจ๋ฅด๊ฒ ํจ์๊ฐ ๋ ๋ฒ ์คํ๋๋ฉด์ ๊ธฐ์กด ํ
์คํธ์ ๋ง์ง๋ง ๊ธ์๊ฐ ๋ชฉ๋ก์ ์ถ๊ฐ๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋คโ๏ธ ์์ธ ๋ถ์ ๊ฒ์ํด๋ณธ ๊ฒฐ๊ณผ ์ด๋ฌํ ๋ฌธ์ ๋ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ์์ ํ๊ธ์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์๋ง ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. (์์ด๋ก ์
๋ ฅํ๋ฉด ํค ์ด๋ฒคํธ๊ฐ ์ค๋ณต์ผ๋ก ๋ฐ์ํ์ง โ) ๊ตฌ์ฒด์ ์ผ๋ก ์ GIF๋ฅผ ๋ณด๋ฉด ํ๊ธ ์
๋ ฅ ์ ์
๋ ฅ ์ค์ธ ๊ธ์ ์๋ ๊ฒ์ ๋ฐ์ค์ด ์๊ธฐ๋๋ฐ ํด๋น ๋ฐ์ค์ด ์๋ ์ํฉ์์ ํค ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ํจ์๊ฐ ๋ ๋ฒ ์คํ๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ํ๊ธ์ ๊ฒฝ์ฐ ์์๊ณผ ๋ชจ์์ ์กฐํฉ์ผ๋ก ๋ง๋ค์ด์ง๋ ์กฐํฉ ๋ฌธ์์ด๊ธฐ ๋๋ฌธ์ ๊ธ์๊ฐ ์กฐํฉ ์ค์ธ์ง ์กฐํฉ์ด ๋๋ ์ํ์ธ์ง๋ฅผ ์ ์ ์์ด ์๊ธฐ๋ ๋ฌธ์ ์ด๋ค. ๐งฏ ํด๊ฒฐ ๋ฐฉ๋ฒ ..
Frontend/React
2023.05.10
๐ฅ ๋ฐ์ํ ์๋ฌ Uncaught Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft. ์๋ฌ๋ฅผ ๋ฒ์ญํ์๋ฉด immer ์ ์์๋ ์๋ก์ด ๊ฐ์ ๋ฆฌํดํ๊ฑฐ๋ ๊ธฐ์กด ์ํ๋ฅผ ์์ ํ๊ฑฐ๋ ๋ ์ค ํ๋๋ง ํด์ผ๋๋ค๋ ๊ฒ์ด๋ค. ์์ธ์ด ๋๋ ์ฝ๋ ๋ถ์ immer ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ถ๋ณ์ฑ ์ํ์ ํธ๋ฆฌ๋ฅผ ์์ฝ๊ฒ ๋ณ๊ฒฝํ๋ ์ค ์์ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. updatePerson((person) => person.mentors.push({ name, title })); ํ์ดํ ํจ์๋ ์ค๊ดํธ๋ฅผ ์จ์ฃผ์ง ์์ผ๋ฉด ์๋์ผ๋ก return ํค์๋๊ฐ ๋ถ๋๋ค. ์ฆ, ์์ ์ฝ๋๋ ๊ธฐ์กด..
Frontend/React
2022.10.30
๐จ ์ค๋ฅ ๋ฐ์ AxiosError message: 'Network Error' const userInfoPatch = async (userInfo) => { try { // url: ์๋ฒ ์ฃผ์, id: ์ฌ์ฉ์ ์์ด๋, userInfo: ์ฌ์ฉ์ ์ ๋ณด ๊ฐ์ฒด await axios.patch(`${url}/member/${id}`, userInfo).then(() => { alert('์์ ์ด ์๋ฃ๋์์ต๋๋ค.'); }); } catch (error) { console.log(error); } }; ํด๋ผ์ด์ธํธ ์ฝ๋์์๋ ๋ณ๋ค๋ฅธ ๋ฌธ์ ๊ฐ ์์ด ๋ณด์๊ณ , ์๋ฒ ์ธก์์ ๋ถ๋ช
์ ๊ทผ์ ํ์ฉํ๋ ๋ฉ์๋๋ก PATCH์ ๋ํด ๋ฐ๋ก ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ์๋ค. ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ GET, POST, DELETE ๋ฑ ์ฌ๋ฌ ๋ฐฉ์์ผ๋ก ์๋ฒ์ ์์ฒญํ ..
Frontend/React
2022.10.20
๐จ ์ค๋ฅ ๋ฐ์ AxiosError message: 'Request failed with status code 400' axios.delete(`${url}/unlike`, { projectId: id, }) axios์ delete๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฒ์ ์์ฒญ์ ํ ๋, ๋ค์๊ณผ ๊ฐ์ด data๋ฅผ ์ ๋ฌํ๋ฉด ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค. ๐ก ํด๊ฒฐ ๋ฐฉ๋ฒ axios.delete๋ request body๋ฅผ ์ง์ํ๋ฉฐ ๋ค์๊ณผ ๊ฐ์ด ๋๊ฐ์ ๋งค๊ฐ๋ณ์๋ฅผ ํ์ฉํ๋ค. axios.delete(url[, config]) ๐ config.data๋ request body๋ฅผ ์ค์ ํ๋๋ฐ ์ฌ์ฉํ ์ ์๋ค. axios.delete(`${url}/unlike`, { data: { projectId: id, }, }) 2๋ฒ์งธ ์ธ์์์ data๋ฅผ data: {}..
Frontend/React
2022.07.27
SPA ๊ธฐ๋ฒ์ ๊ทธ๋๋ก ์ ์งํ ์ํ๋ก REACT์์ ํ์ด์ง ์ด๋ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ผ๋ก React Router๊ฐ ์ฌ์ฉ๋๋ค. ๋ผ์ฐํ
์ด๋? - ์ฌ์ฉ์๊ฐ ์์ฒญํ URL์ ๋ฐ๋ผ ํด๋น URL์ ๋ง๋ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ์ฝ๋ค. - ๋ฆฌ์กํธ์๋ ๋ผ์ฐํ
๊ด๋ จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์กด์ฌํ๋๋ฐ, ๊ทธ ์ค ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)๋ฅผ ์ฌ์ฉํด๋ณด๋ ค๊ณ ํ๋ค. React Router(๋ฆฌ์กํธ ๋ผ์ฐํฐ)๋ ๋ฌด์์ธ๊ฐ? - ์ฌ์ฉ์๊ฐ ์
๋ ฅํ ์ฃผ์๋ฅผ ๊ฐ์งํ๋ ์ญํ ์ ํ๋ฉฐ, ์ฌ๋ฌ ํ๊ฒฝ์์ ๋์ํ ์ ์๋๋ก ์ฌ๋ฌ ์ข
๋ฅ์ ๋ผ์ฐํฐ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํ๋ค. ์ข
๋ฅ - BrowserRouter: HTML5๋ฅผ ์ง์ํ๋ ๋ธ๋ผ์ฐ์ ์ ์ฃผ์๋ฅผ ๊ฐ์งํ๋ค. - HashRouter: ํด์ ์ฃผ์๋ฅผ ๊ฐ์งํ๋ค. React Router(๋ฆฌ์กํธ ๋ผ์ฐํฐ) ์ฌ์ฉํด๋ณด๊ธฐ! (โ ..
Frontend/React
2022.07.27
SPA๋ฅผ ์ค๋ช
ํ๊ธฐ ์ SPA๋ฅผ ์ ์ฌ์ฉํ๋์ง? ์ ํต์ ์ธ ์น ์ฌ์ดํธ๋ ์๋ก์ด ํ์ด์ง๋ฅผ ์์ฒญํ ๋๋ง๋ค ์ ์ ๋ฆฌ์์ค๊ฐ ๋ค์ด๋ก๋๋๊ณ ์ ์ฒด ํ์ด์ง๋ฅผ ๋ค์ ๋ ๋๋ง ํ๋ ๋ฐฉ์์ ์ฌ์ฉํ๋ฏ๋ก ์๋ก๊ณ ์นจ์ด ๋ฐ์๋์ด ์ฌ์ฉ์ฑ์ด ์ข์ง ์์ผ๋ฉฐ, ๋ณ๊ฒฝ์ด ํ์์๋ ๋ถ๋ถ์ ํฌํจํ์ฌ ์ ์ฒด ํ์ด์ง๋ฅผ ๊ฐฑ์ ํ๋ฏ๋ก ๊ต์ฅํ ๋นํจ์จ์ ์ด๋ค. ์น ์ฌ์ดํธ์ ๊ท๋ชจ๊ฐ ์ปค์ง์๋ก ์๋ฒ์ชฝ์์ ๊ณผ๋ถํ๊ฐ ๊ฑธ๋ฆด ์ ๋ฐ์ ์๋ค. ๊ทธ ๋งํผ ์๋์ ์ธ ์ธก๋ฉด์์ ์ฌ์ฉ์๋ ๋ถํธํจ์ ๊ทธ๋๋ก ๋๋ผ๊ฒ ๋๋ค. ํ๋ฆดํ๋ฅ ์ด ๋์ ๊ฐ์ธ์ ์ธ ์ง์(์์ ๊ฐ๋ฅ์ฑ ๋์โ) Traditional Page Lifecycle HTML → CSS → DOM → Web browser SPA Lifecycle HTML → CSS → Virtual Dom → DOM(ํ์ ์์๋ง ๋ณ๊ฒฝ) → Web browser..
Frontend/React
2022.07.03
PureComponent & memo Component์ state๋ props์ ๋ณํ๊ฐ ์๋ค๋ฉด render ํจ์๊ฐ ํธ์ถ๋์ง โ React.PureComponent React.PureComponent๋ React.Component์ ๋น์ทํ๋ค. React.Component๋ shouldComponentUpdate()๋ฅผ ๊ตฌํํ์ง ์์ง๋ง, React.PureComponent๋ props์ state๋ฅผ ์ด์ฉํ ์์ ๋น๊ต(๋ ํผ๋ฐ์ค๋ง ๋น๊ตํด์ ์์ ๋ฐ์ดํฐ๊ฐ ๋ฌ๋ผ์ ธ๋ ๋์ผํ ์ค๋ธ์ ํธ)๋ฅผ ๊ตฌํํ๋ค๋ ์ฐจ์ด์ ๋ง์ด ์กด์ฌํ๋ค. ์ฐธ์กฐ๊ฐ์ด ๋์ผํ๋ฉด ์
๋ฐ์ดํธ โ => ShouldComponentUpdate ํจ์๋ false๋ฅผ ๋ฆฌํด React ์ปดํฌ๋ํธ์ render() ํจ์๊ฐ ๋์ผํ props์ state์ ๋ํ์ฌ ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ๋ ..