Deployment
2023.08.31
๐ฅ ๋ฐ์ํ ์๋ฌ Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key). ๋ก์ปฌ์์๋ ์ ๋์ํ์ง๋ง Netlify์ ๋ฐฐํฌ ํ ํ์ธํด๋ณด๋ ๋ค์๊ณผ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. ๋ฐฐํฌํ ๋ ์ฐธ๊ณ ํ ์ฌ์ดํธ(https://create-react-app.dev/docs/deployment#netlify) ์์ธ ๋ถ์ ํด๋น ์๋ฌ์ ๋ํด ๊ธ์ ์ด ์ฌ๋ฌ ๋ธ๋ก๊ทธ๋ฅผ ์ฐพ์์ ์ฝ์ด๋ณด๋ ๋ค์์ ๊ฒฝ์ฐ์ ์ด๋ฌํ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค๊ณ ํ๋ค. .env ํ์ผ์ด ๋ฃจํธ์ ์๋ ๊ฒฝ์ฐ API ํค๊ฐ ์๋ชป๋ ๊ฒฝ์ฐ firebaseConfig๋ฅผ exportํ๊ณ , ๋ค๋ฅธ JS ํ์ผ์์ import ํ ๊ฒฝ์ฐ ๋ก์ปฌ์์๋ ์ ๋์ํ๊ธฐ ๋๋ฌธ์ Netlify์์ ๋ด๊ฐ ์ค์ ํ ํ๊ฒฝ ๋ณ์๋ฅผ ์ ๋๋ก ์ธ์ํ์ง ๋ชปํ๊ณ ์์ ๊ฒ ๊ฐ..
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) =>..
Backend/Sequelize
2023.06.29
๐ฅ ๋ฐ์ํ ๋ฌธ์ getBoards ํจ์๋ ์นดํ
๊ณ ๋ฆฌ์ ํด๋นํ๋ ๊ฒ์๊ธ ์ ์ฒด๋ฅผ ํ์ด์ง ์ฒ๋ฆฌํ๊ธฐ ์ํ ํจ์๋ค. (๊ฐ๋
์ฑ์ ์ํด ๊ด๋ จ ์๋ ์ฝ๋ ์ผ๋ถ ์๋ต) /* ํ์ด์ง ์ฒ๋ฆฌ๋ฅผ ์ํ ํจ์๋ค(์ฐธ๊ณ ์ฉ) const getPagination = (page, size) => { const limit = size ? +size : 10; // ๊ฐ์ ธ์ฌ ๋ฐ์ดํฐ ์ const offset = page ? page * limit : 0; // ๊ฐ์ ธ์ฌ ๋ฐ์ดํฐ์ ์ด๊ธฐ ์์น๊ฐ return { limit, offset }; }; const getPagingData = (data, page, limit) => { // count: where ์ , ์ฐ๊ฒฐ ๊ด๊ณ ๋ฑ์ ์กฐ๊ฑด์ ๋ถํฉํ๋ ๋ ์ฝ๋์ ์ ์ฒด ๊ฐ์ // rows: where ์ , ์ฐ๊ฒฐ ๊ด..
Frontend/React
2023.06.21
๐ฅ ๋ฐ์ํ ๋ฌธ์ ํ
์คํธ๋ฅผ ์
๋ ฅํ๊ณ ์ํฐ(Enter) ํค๋ฅผ ๋๋ฅด๋ฉด ๋ชฉ๋ก์ ์๋กญ๊ฒ ์ถ๊ฐ๋๊ณ input ์ฐฝ์ ๋น์์ง๋๋ก ๊ตฌํํ๋๋ฐ ์ ์ง ๋ชจ๋ฅด๊ฒ ํจ์๊ฐ ๋ ๋ฒ ์คํ๋๋ฉด์ ๊ธฐ์กด ํ
์คํธ์ ๋ง์ง๋ง ๊ธ์๊ฐ ๋ชฉ๋ก์ ์ถ๊ฐ๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋คโ๏ธ ์์ธ ๋ถ์ ๊ฒ์ํด๋ณธ ๊ฒฐ๊ณผ ์ด๋ฌํ ๋ฌธ์ ๋ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ์์ ํ๊ธ์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์๋ง ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. (์์ด๋ก ์
๋ ฅํ๋ฉด ํค ์ด๋ฒคํธ๊ฐ ์ค๋ณต์ผ๋ก ๋ฐ์ํ์ง โ) ๊ตฌ์ฒด์ ์ผ๋ก ์ GIF๋ฅผ ๋ณด๋ฉด ํ๊ธ ์
๋ ฅ ์ ์
๋ ฅ ์ค์ธ ๊ธ์ ์๋ ๊ฒ์ ๋ฐ์ค์ด ์๊ธฐ๋๋ฐ ํด๋น ๋ฐ์ค์ด ์๋ ์ํฉ์์ ํค ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ํจ์๊ฐ ๋ ๋ฒ ์คํ๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ํ๊ธ์ ๊ฒฝ์ฐ ์์๊ณผ ๋ชจ์์ ์กฐํฉ์ผ๋ก ๋ง๋ค์ด์ง๋ ์กฐํฉ ๋ฌธ์์ด๊ธฐ ๋๋ฌธ์ ๊ธ์๊ฐ ์กฐํฉ ์ค์ธ์ง ์กฐํฉ์ด ๋๋ ์ํ์ธ์ง๋ฅผ ์ ์ ์์ด ์๊ธฐ๋ ๋ฌธ์ ์ด๋ค. ๐งฏ ํด๊ฒฐ ๋ฐฉ๋ฒ ..
Frontend/JavaScript
2023.05.19
๋ฌดํ ์คํฌ๋กค(Infinite Scroll)์ด๋? ์ฌ์ฉ์๊ฐ ํ์ด์ง ํ๋จ์ ๋๋ฌํ์ ๋, ์ฝํ
์ธ ๊ฐ ๊ณ์ ๋ก๋๋๋ ์ฌ์ฉ์ ๊ฒฝํ(UX) ๋ฐฉ์์ด๋ค. ํ ํ์ด์ง ์๋๋ก ์คํฌ๋กค ํ๋ฉด ๋์์ด ์๋ก์ด ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ฒ ๋๊ณ ์ด๋ก ์ธํด ๋ง์ ์์ ์ฝํ
์ธ ๋ฅผ ์คํฌ๋กค ํด์ ๋ณผ ์ ์๋ค. ํ์ด์ง๋ค์ด์
์ด ์๋ ๋ฌดํ ์คํฌ๋กค๋ก ๊ตฌํํ๋ ค๋ ์ด์ โ ์ํ ๋ชฉ๋ก์์ ์ํ์ ๋ณด์ฌ์ฃผ๊ณ ์ ํ ๋ ํ์ด์ง๋ค์ด์
, ๋ฌดํ ์คํฌ๋กค ์ค ๋ฌด์์ด ์ฌ์ฉ์ ๊ฒฝํ์ ๋์ฑ ์ข๊ฒ ํ ์ ์์์ง ๊ณ ๋ฏผํ ๋์ ๋ชจ๋ฐ์ผ ํ๊ฒฝ์ ๊ณ ๋ คํด์ ๋ฌดํ ์คํฌ๋กค์ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค.(์ฐจํ์ ํ๋ก์ ํธ๋ฅผ ๋ฐ์ํ์ผ๋ก ๋ฆฌํฉํฐ๋ง ํ ๊ณํ๐๐ป) ๋ํ, ๋ค์ ์ํ์ ๋ณด๊ธฐ ์ํ ์ฌ์ฉ์์ ํด๋ฆญ์ ์ต์ํํ๊ณ ๋ ์ฝ๊ฒ ๋ค์ํ ์ํ์ ๋ณผ ์ ์์ ๊ฒ์ด๋ผ๊ณ ํ๋จํ๋ค. ๊ตฌํํ๋ ๊ณผ์ ๋ฌดํ ์คํฌ๋กค์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์คํฌ..
ํ๊ณ
2023.05.14
1์ฐจ ํ๋ก์ ํธ ๋ฐํ๋ฅผ ๋ง์น ํ ๋ฆฌํฉํฐ๋ง ์๊ฐ์ ๊ฐ์ง๋ฉด์ ํ๊ณ ๋ฅผ ์์ฑํด๋ณด๊ณ ์ ํ๋ค. ํ๋ก์ ํธ ์๊ฐ ํ๋ก์ ํธ ์ฃผ์ ์จ๋ผ์ธ ํฐ์ผ ๊ตฌ๋งค ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ์ผํ๋ชฐ ํ๋ก์ ํธ๋ช
ํฐ์ผ์์!(Ticket Want it!) ์ ์ ๊ธฐ๊ฐ 2023.04.17 ~ 2023.04.28(1์ฐจ ์ ์๊ธฐ๊ฐ, ์ต์ ๊ธฐ๋ฅ ๊ตฌํ) 2023.04.29 ~ 2023.05.20(2์ฐจ ์ ์๊ธฐ๊ฐ, ๊ธฐ๋ฅ ์ถ๊ฐ ๋ฐ ๋ฆฌํฉํฐ๋ง) ํ ๊ตฌ์ฑ ๋ด๋น ํฌ์ง์
: ํ์, ํ๋ก ํธ์๋ Frontend(3๋ช
) : ์ด์ฑํธ, ์ค์ฐ์ , ๊น์ค์ค Backend(3๋ช
) : ์ ํ์, ์ด๋ฏผ์, ์ ํ๋ฆฐ ๊ธฐ์ ์คํ ๊ตฌํ ๊ธฐ๋ฅ ํ์๊ฐ์
, ๋ก๊ทธ์ธ, ํ์์ ๋ณด ์์ ๋ฐ ํํด ๋ฑ ์ฌ์ฉ์ ๊ด๋ จ CRUD ์ํ(์ ํ) ๊ด๋ จ CRUD, ์นดํ
๊ณ ๋ฆฌ ๊ด๋ จ CRUD, ์ฃผ๋ฌธ ๊ด๋ จ CRUD ์ฅ๋ฐ๊ตฌ๋ ๊ด๋ จ ๊ธฐ๋ฅ(์ฅ๋ฐ๊ตฌ๋..
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/JavaScript
2023.05.10
์ธํฐ์
ํฐ(Interceptors)๋? then ๋๋ catch๋ก ์ฒ๋ฆฌ๋๊ธฐ ์ ์ ์์ฒญ๊ณผ ์๋ต์ ๊ฐ๋ก์ฑ ์ ์๋ค. Axios ์ธํฐ์
ํฐ๋ฅผ ์ ์ฉํ๋ ค๋ ์ด์ โ ํ ์ด ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ์๋ฒ์ ํ ํฐ ์ธ์ฆ์ ํ์๋ก ํ๋ API ์์ฒญ์ ํ ๋๋ง๋ค HTTP Authorization ์์ฒญ ํค๋์ ํ ํฐ์ ๋ฃ์ด์ค์ผํ๊ณ 401(Unauthorized) ์๋ฌ๊ฐ ์๋ฒ๋ก๋ถํฐ ๋ค์ด์ค๋ฉด ํ ํฐ์ ๊ฐฑ์ ํด์ค ํ ์ฌ์์ฒญ์ ๋ณด๋ด๋ ๊ณผ์ ์ ํ ๊ณณ์์ ๋ชจ๋ ์ฒ๋ฆฌํ์ฌ ์ค๋ณต ์ฝ๋๋ฅผ ์ ๊ฑฐํ๊ณ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํค๊ธฐ ์ํด Axios ์ธํฐ์
ํฐ๋ฅผ ์ ์ฉํ๊ธฐ๋ก ํ๋ค. ์ฌ์ฉ์ ์ง์ config๋ก ์๋ก์ด Axios ์ธ์คํด์ค๋ฅผ ์์ฑํ์ฌ ์ฌ์ฉํ๋ ๋์ฑ ํธ๋ฆฌํ๋ค. (baseURL, timeout ์ค์ ) ์ ์ฉํ๋ ๊ณผ์ 1) Axios ์ธ์คํด์ค ์์ฑ const instanc..