์ ์ฒด ๊ธ
-
- [Service] Auth0
Auth0๋ค์ด๊ฐ๋ฉฐ์ธ์ฆ(Authentication) ๋ฐ ์ฌ์ฉ์ ๊ด๋ฆฌ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ๋์์ฃผ๋ Auth0 ์๋น์ค์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค.์ด ์๋น์ค๋ฅผ ์ด์ฉํ๋ฉด, ์์ ๋ก๊ทธ์ธ ๋ฑ ์ธ์ฆ์ ์ํ ๊ธฐ๋ฅ๋ค์ ์ง์ ์ฝ๋๋ก ๊ตฌํํ์ฌ ๋ง๋ค์ด์ฃผ์ง ์์๋ ๋๋ค. Auth0๊ฐ๋ ์ฌ์ฉ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ธ์ฆ ๋ฐ ๊ถํ ๊ด๋ฆฌ๋ฅผ ๊ฐ๋จํ๊ณ ์์ ํ๊ฒ ๊ตฌํํ ์ ์๋๋ก ์ง์ํ๋ ์ธ์ฆ ๋ฐ ๊ถํ ๊ด๋ฆฌ ํ๋ซํผ๊ฐ๋ฐ์๋ Auth0๋ฅผ ์ด์ฉํ์ฌ ๋ณต์กํ ์ธ์ฆ ์์คํ ์ ์ง์ ๊ฐ๋ฐํ์ง ์์๋ ๋๊ณ , ๋ค์ํ ์ธ์ฆ ๋ฐฉ์์ ์ฝ๊ฒ ํตํฉํ ์ ์๋ค. ์ฃผ์ ํน์ง๋ค์ํ ์ธ์ฆ ๋ฐฉ์ ์ง์์ด๋ฉ์ผ/๋น๋ฐ๋ฒํธ์์ ๋ก๊ทธ์ธ (Google, Facebook, GitHub, Twitter ๋ฑ)๋ค์ค ์ธ์ฆ(Multi Factor Authentication)SSO(Single Sign-On)Passwor..
1 2024.11.20 -
- [JavaScript] FusionCharts ๋ผ์ด๋ธ๋ฌ๋ฆฌ
FusionCharts ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript)์ FusionCharts ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. FusionCharts๊ฐ๋ ์น ๊ธฐ๋ฐ ๋์๋ณด๋์ ๋ฐ์ดํฐ ์๊ฐํ๋ฅผ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript) ์ฐจํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ๋ฐ์์ ๊ธฐ์ ์ด ๋ค์ํ ํํ์ ๋ฐ์ดํฐ๋ฅผ ์ฐจํธ, ๊ทธ๋ํ, ๊ฒ์ด์ง(Gauge), ์ง๋ ๋ฑ์ผ๋ก ์๊ฐํ ํ ์ ์๋ค.๋ฌด๋ฃ ๋ฐ ์ ๋ฃ ํ๋์ด ์์ด ํ๋ก์ ํธ์ ํ์์ ๋ฐ๋ผ ์ ํ ๊ฐ๋ฅํ๋ค.๊ณต์ ํํ์ด์ง : JavaScript charts for web & mobile | FusionCharts ํน์ง์ ์ฐจํธ, ํ์ด ์ฐจํธ, ๊ฒ์ด์ง, ํํธ๋งต ๋ฑ 100๊ฐ ์ด์์ ์ฐจํธ ์ ํ ์ง์๋ณต์กํ ๋น์ฆ๋์ค ๋์๋ณด๋๋ ๋ณด๊ณ ์๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์๋ค.๋ชจ๋ ์ฐจํธ๋ ๋ฐ์ํ ๋์์ธ์ด ์ ์ฉ๋์ด ๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ, ..
2024.11.18 -
- [๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ] ์ํ์ฅ ๋ค์ด๊ฐ๊ธฐ ์ ์ ๋ณด๊ธฐ ๋น ๋ฅด๊ฒ ๋ณด๊ธฐ ์ข์ ๊ฐ์ ๋ชจ์
์ํ์ฅ ๋ค์ด๊ฐ๊ธฐ ์ ์ ๋ณด๊ธฐ ๋น ๋ฅด๊ฒ ๋ณด๊ธฐ ์ข์ ๊ฐ์ ๋ชจ์๋ค์ด๊ฐ๋ฉฐ์ํ์ฅ์ ๋ค์ด๊ฐ๊ธฐ ์ ์ ๋น ๋ฅด๊ฒ ๋ณด๋ฉด ์ข์ ๊ฒ ๊ฐ์ (๋ฌด๋ฃ) ๊ฐ์๋ค์ ์ํ ์ถ์ ์ ํ๋ณ๋ก ์ ๋ฆฌํด๋ณธ๋ค.์ ํ๋ธ(YouTube)์ ์ฌ๋ผ์ ์๋ ์ฌ๋ฌ ๋ฌด๋ฃ ๊ฐ์๋ค ์ค, ๊ด์ฐฎ๊ฒ ๋ค์ ๊ฒ๋ค์ ์ ๋ฆฌํด๋ณด์๋ค. ๊ฐ์ ๋ชจ์์ 1์ ํ (๋ฐ์ดํฐ ์ ์ฒ๋ฆฌ)๊ฐ์๋ช URL๋น๊ณ ํ์ด์ฌ ๊ธฐ์ดhttps://youtu.be/3GSnGaH5yoc?si=JeIYxJJF8faZkHf6ํ์ด์ฌ(Python)ํ ์๊ฐ ๋ง์ ๋ฐฐ์ฐ๋ ํ๋ค์คhttps://youtu.be/hmKVYEei4Oo?si=cCy-klaPyMS0Y4Ltํ๋ค์ค(Pandas)ํ๋ค์ค 100์ https://youtu.be/J9XkwoCamuI?si=S1SKTX0eeUJIMmCbํ๋ค์ค(Pandas)์๋ตํฐ ๋น ๋ถ๊ธฐ ์ค๊ธฐ ๋๋น ํ์ ์์ (1์ ..
1 2024.11.17 -
- [๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ] ์ 6ํ ๊ธฐ์ถ ๋ณํ ๋ฌธ์ (์ 3์ ํ)
์ 6ํ ๊ธฐ์ถ ๋ณํ ๋ฌธ์ (์ 3์ ํ)๋ค์ด๊ฐ๋ฉฐ๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ ์ 6ํ ์ 3์ ํ ๊ธฐ์ถ ๋ณํ ๋ฌธ์ ๋ฅผ ์ฌ๋ ค๋ณธ๋ค.์ 6ํ ์ 3์ ํ์์๋ ๊ฐ์ค ๊ฒ์ ๊ณผ ๊ด๋ จ๋ ๋ฌธ์ ๊ฐ ์ถ์ ๋์๋ค. ๋ฌธ์ 1๊ฐ๊ธฐ์ฝ์ ๋ณต์ฉํ ๋ ๋ถ์์ฉ์ ๋ํ ๋ถ๋ฅ์ ๋น์จ ๋ฐ์ดํฐ์์ฝ ํจ๊ณผ๊ฐ ์๋์ง 253๊ฑด์ ๋ฐ์ดํฐ๋ฅผ ์ถ์ถํ์ฌ ๊ฒ์ฆํ๋ ค๊ณ ํ๋ค.๊ฐ๊ธฐ ๋ถ์์ฉ์ ๋ํ ๋น์จ์ด ์์ฝ ํจ๊ณผ ๋ถ์์ฉ ๋น์จ๊ณผ ๊ฐ์์ง ์นด์ด์ ๊ณฑ ๊ฒ์ ํ๊ธฐ๋ถ์์ฉ ์ ํ์ฝ๋๋น์จ๋ํต10.05์กธ๋ฆผ20.1์์ฐ๋ฆผ30.05๋ถ์์ฉ ์์40.8ํฉ๊ณ1 (1) ์์ฝ ์ํ ๋ฐ์ดํฐ๊ฐ @๋ถ์์ฉ ์์@์ธ ๋ฐ์ดํฐ๋ฅผ 0~1 ์ฌ์ด์ ํ๋ฅ ๋ก ์ถ๋ ฅํ๊ธฐ (๋ฐ์ฌ๋ฆผํ์ฌ ์์์ ์ ์งธ ์๋ฆฌ๋ก ์ถ๋ ฅ)(2) ์นด์ด์ ๊ณฑ ๊ฒ์ ์ผ๋ก ๊ฒ์ ํต๊ณ๋ ์ถ๋ ฅํ๊ธฐ (๋ฐ์ฌ๋ฆผํ์ฌ ์์์ ์ ์งธ ์๋ฆฌ๋ก ์ถ๋ ฅ)(3) ์ ์ํ๋ฅ (p-value) ์ถ๋ ฅํ๊ธฐ (๋ฐ์ฌ๋ฆผํ์ฌ ์์์ ..
2024.11.16 -
- [๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ] ์ 7ํ ๊ธฐ์ถ ๋ณํ ๋ฌธ์ (์ 3์ ํ)
์ 7ํ ๊ธฐ์ถ ๋ณํ ๋ฌธ์ (์ 3์ ํ)๋ค์ด๊ฐ๋ฉฐ๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ ์ 7ํ ์ 3์ ํ ๊ธฐ์ถ ๋ณํ ๋ฌธ์ ๋ฅผ ์ฌ๋ ค๋ณธ๋ค.์ 7ํ ์ 3์ ํ์์๋ ๊ณ ๊ธ ํต๊ณ(ํ๊ท ๋ถ์)๊ณผ ๊ด๋ จ๋ ๋ฌธ์ ๊ฐ ์ถ์ ๋์๋ค. ์ฐธ๊ณ ํ๊ท ๋ถ์์์๋ ๊ท๋ฌด ๊ฐ์ค๊ณผ ๋๋ฆฝ ๊ฐ์ค์ด ๋ค์๊ณผ ๊ฐ์ด ์ค์ ๋๋ค.๋ฐ๋ผ์ ์ ์ํ์ง ์์ ๋ณ์๋ฅผ ๊ตฌํ๋ ค๋ฉด ๊ท๋ฌด ๊ฐ์ค์ ์ฑํ(p-value > 0.05(์ ์์์ค))ํ๋ ๋ณ์๋ฅผ ์ ํํ๋ฉด ๋๋ค.๊ท๋ฌด ๊ฐ์ค : ํด๋น ๋ณ์๋ ์ข ์ ๋ณ์์ ๋ฏธ์น๋ ์ํฅ๋ ฅ์ด ์๋ค. (์ ์ํ์ง ์๋ค.)๋๋ฆฝ ๊ฐ์ค : ํด๋น ๋ณ์๋ ์ข ์ ๋ณ์์ ๋ฏธ์น๋ ์ํฅ๋ ฅ์ด ์๋ค. (์ ์ํ๋ค.) ๋ก์ง์คํฑ ํ๊ท ๋ถ์์ @statsmodels.api.Logit(y, X)@ ํจ์๋ฅผ ์ฌ์ฉํ๊ณ , ๋ค์ค ์ ํ ํ๊ท ๋ถ์์ @statsmodels.api.OLS(y, X)@ ํจ์๋ฅผ ์ฌ์ฉํ๋ค.p-va..
2024.11.16 -
- [๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ] ์ 8ํ ๊ธฐ์ถ ๋ณํ ๋ฌธ์ (์ 3์ ํ)
์ 8ํ ๊ธฐ์ถ ๋ณํ ๋ฌธ์ (์ 3์ ํ)๋ค์ด๊ฐ๋ฉฐ๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ ์ 8ํ ์ 3์ ํ ๊ธฐ์ถ ๋ณํ ๋ฌธ์ ๋ฅผ ์ฌ๋ ค๋ณธ๋ค.์ 8ํ ์ 3์ ํ์์๋ ๊ณ ๊ธ ํต๊ณ(ํ๊ท ๋ถ์)๊ณผ ๊ด๋ จ๋ ๋ฌธ์ ๊ฐ ์ถ์ ๋์๋ค. ์ฐธ๊ณ ํ๊ท ๋ถ์์์๋ ๊ท๋ฌด ๊ฐ์ค๊ณผ ๋๋ฆฝ ๊ฐ์ค์ด ๋ค์๊ณผ ๊ฐ์ด ์ค์ ๋๋ค.๋ฐ๋ผ์ ์ ์ํ์ง ์์ ๋ณ์๋ฅผ ๊ตฌํ๋ ค๋ฉด ๊ท๋ฌด ๊ฐ์ค์ ์ฑํ(p-value > 0.05(์ ์์์ค))ํ๋ ๋ณ์๋ฅผ ์ ํํ๋ฉด ๋๋ค.๊ท๋ฌด ๊ฐ์ค : ํด๋น ๋ณ์๋ ์ข ์ ๋ณ์์ ๋ฏธ์น๋ ์ํฅ๋ ฅ์ด ์๋ค. (์ ์ํ์ง ์๋ค.)๋๋ฆฝ ๊ฐ์ค : ํด๋น ๋ณ์๋ ์ข ์ ๋ณ์์ ๋ฏธ์น๋ ์ํฅ๋ ฅ์ด ์๋ค. (์ ์ํ๋ค.) ๋ก์ง์คํฑ ํ๊ท ๋ถ์์ @statsmodels.api.Logit(y, X)@ ํจ์๋ฅผ ์ฌ์ฉํ๊ณ , ๋ค์ค ์ ํ ํ๊ท ๋ถ์์ @statsmodels.api.OLS(y, X)@ ํจ์๋ฅผ ์ฌ์ฉํ๋ค.p-va..
2 2024.11.15 -
- [๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ] ์ 3์ ํ ์ํ ์ค๋น (๊ฐ์ค ๊ฒ์ , ๊ณ ๊ธ ํต๊ณ)
์ 3์ ํ ์ํ ์ค๋น (๊ฐ์ค ๊ฒ์ , ๊ณ ๊ธ ํต๊ณ)๋ค์ด๊ฐ๋ฉฐ๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ ์ 3์ ํ ์ํ ์ค๋น๋ฅผ ์ํ ๋ด์ฉ์ ์ ๋ฆฌํด๋ณธ๋ค.์ 3์ ํ์ โ ๊ฐ์ค ๊ฒ์ ๊ณผ โก๊ณ ๊ธ ํต๊ณ์ ๋ด์ฉ์ด ํฌํจ๋๋ค. 1๏ธโฃ ๊ฐ์ค ๊ฒ์ โ๏ธ (ํต๊ณ์ ) ๊ฐ์ค ๊ฒ์ ๊ด์ฐฐ๋ ํ์/ํจ๊ณผ๊ฐ ์ฐ์ฐ์ ์ํ ๊ฒ์ธ์ง ์์๋ณด๊ธฐ ์ํด ๊ฐ์ค์ ์ธ์ฐ๊ณ , ๊ฐ์ค์ ํฉ๋น์ฑ์ ํ์ธํ๋ ๊ณผ์ A ๊ทธ๋ฃน๊ณผ B ๊ทธ๋ฃน์์ ๋ณด์ด๋ ์ด๋ค ์ฐจ์ด๊ฐ ์ฐ์ฐ์ ์ํ ๊ฒ์ธ์ง, ์ค์ ๋ก ๋ค๋ฅธ ๊ฒ์ธ์ง ํต๊ณ์ ์ผ๋ก ๊ฒ์ฆํ๋ ๊ฒ ๋ณ์ ์ ํ์ง๋จ ์๊ฒ์ ๋ฐฉ์์ค๋ช ์์นํ(์ฐ์ํ)1๊ฐ๋จ์ผ ํ๋ณธ t-๊ฒ์ ๋ชจํ๊ท ๊ณผ ํ๋ณธ ํ๊ท ์ด ์ ์ํ๊ฒ ๋ค๋ฅธ์ง ๊ฒ์ 2๊ฐ๋ ๋ฆฝ ํ๋ณธ t-๊ฒ์ 2๊ฐ์ ๋ ๋ฆฝ๋ ์ง๋จ์ ํ๊ท ์ฐจ์ด ๊ฒ์ ๋์ ํ๋ณธ t-๊ฒ์ ๊ฐ์ ์ง๋จ์์ 2๋ฒ ์ธก์ ํ ๊ฒฐ๊ณผ์ ํ๊ท ์ฐจ์ด ๊ฒ์ 2๊ฐ ์ด์์ผ์ ๋ถ์ฐ ๋ถ์(One Way ANOVA)3๊ฐ ์ด์์..
6 2024.11.15 -
- [Axios] ํค๋์ ์ธ์ฆ ์ ๋ณด ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ
ํค๋์ ์ธ์ฆ ์ ๋ณด ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐAxios๋ฅผ ์ฌ์ฉํ์ฌ ํค๋์ ์ธ์ฆ(Authorization) ์ ๋ณด๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค.์ด ๊ธ์ ๋ฆฌ์กํธ(React) ์ฝ๋๋ก ์์ฑ๋์๋ค. ๋ฐฉ๋ฒโ ํ์ผ์ ์ธ์ฆ ํค๋ ๋ถ๋ถ ์ถ๊ฐํ๊ธฐAPI ํธ์ถ์ ํ๊ณ ์ ํ๋ ํ์ผ ์์ ์ธ์ฆ ์ ๋ณด๋ฅผ ๋ด์ ๋ณ์๋ฅผ ์์ฑํ์ฌ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ด๋ค.// ์ธ์ฆ ์ ๋ณด๋ฅผ ๋ด์ ๋ณ์const authHeader = (thunkAPI) => { return { headers: { authorization: `Bearer ${thunkAPI.getState().user.user.token}`, }, };};export const createJobThunk = async (job, thunkAPI) => { try { const..
1 2024.11.14 -
- [JavaScript] Moment.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Moment.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript)์์ ๋ ์ง์ ์๊ฐ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ๋ง์ด ์ฌ์ฉ๋๋ Moment.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. moment.js๊ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ ์ง์ ์๊ฐ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ์ธ๊ธฐ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ง ๋ฐ ์๊ฐ ๊ณ์ฐ, ํ์ํ, ํ์ฑ, ์๊ฐ๋ ๋ณํ, ์๋์ ์ธ ์๊ฐ ํํ ๋ฑ์ ์ฝ๊ฒ ์ฒ๋ฆฌํ ์ ์๋๋ก ๋์์ค๋ค.์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ณธ @Date@ ๊ฐ์ฒด์ ๋น๊ตํ์ฌ ํจ์ฌ ๋ ์ง๊ด์ ์ด๊ณ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.2020๋ ๋ถํฐ Moment.js๋ ์ ์ง๋ณด์ ์ ์ฉ ๋ชจ๋๋ก ์ ํ๋์๊ณ , ์๋ก์ด ํ๋ก์ ํธ์์๋ Day.js๋ Luxon, Date-fns๊ณผ ๊ฐ์ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋์ ์ฌ์ฉํ๋๋ก ๊ถ์ฅ๋๊ณ ์๋ค. (ํ์ง๋ง ์ฌ์ ํ ๋ง์ ํ๋ก์ ํธ์์ ์ฌ์ฉ๋๊ณ ์๋ค.)Day.jsMom..
2024.11.14 -
- [Next.js] ๋ ๋๋ง ๋ฐฉ์ ์ ๋ฆฌ (CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration)๏ปฟ)
๋ ๋๋ง ๋ฐฉ์ ์ ๋ฆฌ (CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration))๋ค์ด๊ฐ๋ฉฐNext.js์ ๋ ๋๋ง ๋ฐฉ์์ธ CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค.Next.js์์ ํ์ด์ง๋ฅผ ์์ฑํ๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก CSR ๋ฐฉ์์ผ๋ก ๋ ๋๋ง๋๋ค. CSR(Client Side Rendering)๊ฐ๋ ๋ธ๋ผ์ฐ์ ์์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ค์ด๋ก๋ํ ํ, ํด๋ผ์ด์ธํธ ์ธก์์ ๋ ๋๋ง์ ..
14 2024.11.14 -
- [React.js] ๊ฐ์ฒด ํ๊ธฐ๋ฒ(Object Notation) ๋ฐฉ์๊ณผ ๋น๋ ์ฝ๋ฐฑ ํ๊ธฐ๋ฒ(Builder Callback Notation) ๋ฐฉ์
๊ฐ์ฒด ํ๊ธฐ๋ฒ(Object Notation) ๋ฐฉ์๊ณผ ๋น๋ ์ฝ๋ฐฑ ํ๊ธฐ๋ฒ(Builder Callback Notation) ๋ฐฉ์๋ค์ด๊ฐ๋ฉฐ๋ฆฌ๋์ค ํดํท(Redux Toolkit, RTK)์ ๊ฐ์ฒด ํ๊ธฐ๋ฒ(Object Notation) ๋ฐฉ์๊ณผ ๋น๋ ์ฝ๋ฐฑ ํ๊ธฐ๋ฒ(Builder Callback Notation) ๋ฐฉ์์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ๊ฐ์ฒด ํ๊ธฐ๋ฒ(Object Notation) ๋ฐฉ์ vs. ๋น๋ ์ฝ๋ฐฑ ํ๊ธฐ๋ฒ(Builder Callback Notation) ๋ฐฉ์RTK ๋ฒ์ 1.6.0 ์ด์๋ถํฐ ๊ธฐ์กด์ ๊ฐ์ฒด ํ๊ธฐ๋ฒ(Object Notation) ๋ฐฉ์์์ ๋น๋ ์ฝ๋ฐฑ ํ๊ธฐ๋ฒ(Bulder Callback Notation) ๋ฐฉ์์ผ๋ก ์์ฑํด์ผ ํ๋ค.๊ธฐ์กด์ ๊ฐ์ฒด ํ๊ธฐ๋ฒ์ ๋ ์ด์ ์ฌ์ฉ๋์ง ์๋๋ค. ๊ฐ์ฒด ํ๊ธฐ๋ฒ(Object Notation)..
2024.11.13 -
- [Network] 400 ์ค๋ฅ์ 401 ์ค๋ฅ์ ์ฐจ์ด์
400 ์ค๋ฅ์ 401 ์ค๋ฅ์ ์ฐจ์ด์ ๋ค์ด๊ฐ๋ฉฐHTTP ์ํ ์ฝ๋(Status Code)์ธ 400 ์ค๋ฅ์ 401 ์ค๋ฅ์ ์ฐจ์ด์ ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. 400 ์ค๋ฅ (Bad Request, ์๋ชป๋ ์์ฒญ)๊ฐ๋ ํด๋ผ์ด์ธํธ๊ฐ ๋ณด๋ธ ์์ฒญ์ด ์๋ชป๋์๊ฑฐ๋ ์๋ฒ์์ ์ดํดํ ์ ์์ ๋ ๋ฐํ๋๋ ์ํ ์ฝ๋ ๋ฐ์ ์์ธ์์ฒญ ํ์์ด ์๋ชป๋ ๊ฒฝ์ฐ (JSON์ด๋ XML ๋ฑ์ ๋ฐ์ดํฐ ํฌ๋งท ์ค๋ฅ)์์ฒญ ํ๋ผ๋ฏธํฐ๊ฐ ๋๋ฝ๋์๊ฑฐ๋ ์ ํจํ์ง ์์ ๊ฒฝ์ฐ์๋ชป๋ URL์ด๋ ๋ฉ์๋ ์ฌ์ฉ์๋ฅผ ๋ค์ด, @GET@ ๋์ @POST@๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐํด๋ผ์ด์ธํธ ์ชฝ ์ค๋ฅ๋ก ์ธํด ์์ฒญ์ด ๋น์ ์์ ์ผ๋ก ๊ตฌ์ฑ๋ ๊ฒฝ์ฐ ํด๊ฒฐ ๋ฐฉ๋ฒ์์ฒญ ๋ฐ์ดํฐ๋ฅผ ๊ฒํ ํ๊ณ ํ์์ด ์ฌ๋ฐ๋ฅธ์ง ํ์ธํ๋ค.API ๋ฌธ์๋ฅผ ์ฐธ๊ณ ํด ํ์ํ ํ๋ผ๋ฏธํฐ์ ๊ฐ์ด ์ ๋๋ก ์ ๋ฌ๋์๋์ง ํ์ธํ๋ค.URL์ด๋ HTTP ๋ฉ์๋๋ฅผ ํ์ธํ..
2024.11.13 -
- [React.js] .js ํ์ผ์์ Uncaught SyntaxError: Unexpected token '<' ์ค๋ฅ ๋ฐ์ํ ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ (Vite)
.js ํ์ผ์์ Uncaught SyntaxError: Unexpected token '๋ค์ด๊ฐ๋ฉฐ@.js@ ํ์ผ์์ @Uncaught SyntaxError: Unexpected token '์ด ๋ฌธ์ ๋ Vite๋ก ๋ง๋ ํ๋ก์ ํธ์ ๋ฐ์ํ๋ ๋ฌธ์ ์ด๋ค. ๋ฌธ์ ๋ฐ์ ์ํฉ@/src/utils/links.js@ ํ์ผ์์ ์ปดํฌ๋ํธ(Component)๊ฐ @value@๋ก ๋ค์ด ์๋ @key@๊ฐ ๋ค์ด ์๋ ๊ฐ์ฒด๋ฅผ ์ธ๋ถ ์ปดํฌ๋ํธ์์ import ํ์ฌ ์ฌ์ฉํ๋ ค๊ณ ํ ๋, ๋ค์๊ณผ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์๋ค. /src/utils/links.js@icon@ ํค์ ๊ฐ์ ์ธ๋ถ ์ปดํฌ๋ํธ์์ ๋ถ๋ฌ์ฌ ๋ ์์ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์๋ค.const links = [ { id: 1, text: 'stats', path: '/', ..
2024.11.13 -
- [React.js] <Link> ์ปดํฌ๋ํธ์ <NavLink> ์ปดํฌ๋ํธ ๋น๊ต (React Router)
์ปดํฌ๋ํธ์ ์ปดํฌ๋ํธ ๋น๊ต (React Router)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์์ @@ ์ปดํฌ๋ํธ์ @@ ์ปดํฌ๋ํธ์ ์ฐจ์ด์ ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ์ปดํฌ๋ํธ๊ฐ๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ์์ ์ ๊ณตํ๋ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๋งํฌ(Link) ์ปดํฌ๋ํธํน์ ๊ฒฝ๋ก๋ก ์ด๋ํ ์ ์๋ ๋ด๋น๊ฒ์ด์ ๋งํฌ๋ฅผ ์์ฑํ๋ค.HTML์ @@ ํ๊ทธ์ ์ ์ฌํ์ง๋ง, ํ์ด์ง ์๋ก๊ณ ์นจ ์์ด SPA(Single Page Application) ๋ด์์ ๋ผ์ฐํ ์ ์ฒ๋ฆฌํ๋ค. ํน์งํ์ด์ง๋ฅผ ์๋ก ๊ณ ์นจํ์ง ์๊ณ , ํด๋ผ์ด์ธํธ ์ธก ๋ผ์ฐํ ์ ์ํํ๋ค.๋จ์ํ ๋ผ์ฐํ ์ ์ ํฉํ๋ค.์ ํ๋ ์ํ์ ๋ฐ๋ฅธ ์คํ์ผ๋ง ๊ธฐ๋ฅ์ ์๋ค. ์ฌ์ฉ ์์ ์ฝ๋import { Link } from "react-router-dom";function App() { return ( ..
2024.11.13 -
- [React.js] ๋ฆฌ๋์ค(Redux), ๋ฆฌ๋์ค ํดํท(Redux Toolkit)
๋ฆฌ๋์ค(Redux), ๋ฆฌ๋์ค ํดํท(Redux Toolkit)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์ ์ ์ญ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์ ํ๋์ธ ๋ฆฌ๋์ค(Redux)์ ๋ฆฌ๋์ค ํดํท(Redux Toolkit)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ๋ฆฌ๋์ค(Redux)๊ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ํ ๊ด๋ฆฌ๋ฅผ ์ํด ์ฌ์ฉ๋๋ ์ํ ์ปจํ ์ด๋์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ๋ฅผ ์ค์์์ ๊ด๋ฆฌํจ์ผ๋ก์จ ์ํ ๋ณํ๋ฅผ ์ฝ๊ฒ ์ถ์ ํ๊ณ , ๋๋ฒ๊น ์ ๋จ์ํํ๋ฉฐ, ๋ค์ํ ์ปดํฌ๋ํธ ๊ฐ์ ์ํ๋ฅผ ๊ณต์ ํ๋ ๊ฒ์ ์ฝ๊ฒ ํด์ค๋ค.๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ์๋์ ๋ช ๋ น์ ์คํํ์ฌ ๊ด๋ จ ํจํค์ง๋ฅผ ์ค์นํด์ค๋ค.$ yarn add redux # npm install redux$ yarn add react-redux # npm install react-redux ๋ฆฌ๋์ค..
2024.11.11 -
- [React.js] ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ์์ ๊ณตํต๋ HTML ์์ ์คํ์ผ์ด ๋ณด์ฌ์ง๋๋ก ์ค์ ํ๋ ๋ฐฉ๋ฒ (normalize.css)
๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ์์ ๊ณตํต๋ HTML ์์ ์คํ์ผ์ด ๋ณด์ฌ์ง๋๋ก ์ค์ ํ๋ ๋ฐฉ๋ฒ (normalize.css)๋ค์ด๊ฐ๋ฉฐ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ์์ ๊ณตํต๋ HTML ์์ ์คํ์ผ์ด ๋ณด์ฌ์ง๋๋ก ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒnormalize.css ์ฌ์ฉํ๊ธฐnormalize.css@normalize.css@๋ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์ HTML ์์์ ์คํ์ผ์ ์ผ๊ด๋๊ฒ ๋ณด์ด๋๋ก ๋ง๋ค์ด์ฃผ๋ CSS ํ์ผ์ด๋ค.์น ๋ธ๋ผ์ฐ์ ๋ง๋ค ๊ธฐ๋ณธ ์คํ์ผ์ด ๋ค๋ฅด๊ฒ ์ ์ฉ๋๊ธฐ ๋๋ฌธ์, ์น ํ์ด์ง๊ฐ ๊ฐ๊ฐ ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ์์ ๋ค๋ฅด๊ฒ ๋ณด์ผ ์ ์๋ค.์ด๋ฌํ ๋ถ์ผ์น๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด @normalize.css@๋ ๊ฐ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ ์คํ์ผ์ ์ด๊ธฐํํ๊ฑฐ๋ ํ์คํํ์ฌ, ์น ํ์ด์ง๊ฐ ์ด๋์๋ ์ผ๊ด๋๊ฒ ๋ณด์ด๋๋ก ํด์ค๋ค.@normalize.css@๋ ๋ชจ๋ ๊ธฐ๋ณธ ์คํ์ผ์ ์ ..
2024.11.07 -
- [React.js] Recharts ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Recharts ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React) ๊ธฐ๋ฐ์ ๋ฐ์ดํฐ ์๊ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Recharts์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Recharts๊ฐ๋ ๋ฆฌ์กํธ(React) ๊ธฐ๋ฐ์ ๋ฐ์ดํฐ ์๊ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ํ ์ฐจํธ๋ฅผ ์ฝ๊ฒ ์์ฑํ๊ณ ๋ฐ์ดํฐ๋ฅผ ์๊ฐ์ ์ผ๋ก ํํํ ์ ์๋๋ก ๋์์ค๋ค.์ ์ธํ ๋ฐฉ์์ผ๋ก ๋ฆฌ์กํธ์ ์ ๋ง์ผ๋ฉฐ, ๊ทธ๋ํ๋ฅผ ๊ตฌ์ฑํ๋ ๋ฐ ํ์ํ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํด ์ง๊ด์ ์ผ๋ก ์ฐจํธ๋ฅผ ๊ตฌ์ฑํ ์ ์๋๋ก ๋์์ค๋ค. ํน์ง๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฐจํธ๋ฅผ ๊ตฌ์ฑํ๋ฏ๋ก, ๋ฆฌ์กํธ์ ์ํ(State)์ ์์ฑ์ ํ์ฉํด ๋์ ์ผ๋ก ์ฐจํธ๋ฅผ ์ ๋ฐ์ดํธํ ์ ์๋ค.Recharts๋ ๋ด๋ถ์ ์ผ๋ก D3.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ์ฉํ์ฌ ์ฐจํธ๋ฅผ ๋ ๋๋งํ๋ค.D3.js์ ๊ฐ๋ ฅํ๊ณ ๋ค์ํ ๊ธฐ๋ฅ์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ํํ๋ก ๊ฐํธํ๊ฒ ์ฌ์ฉํ ์ ์๋ค.์ฐจํธ๋ฅผ ๊ตฌ์ฑํ๋ ์์..
1 2024.11.06 -
- [Service] Render
Render๋ค์ด๊ฐ๋ฉฐ์ ํ๋ฆฌ์ผ์ด์ ๋ฐฐํฌ ๋ฐ ํธ์คํ ํ๋ซํผ ์ค ํ๋์ธ Render์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Render๊ฐ๋ ํด๋ผ์ฐ๋ ๊ธฐ๋ฐ์ ์ ํ๋ฆฌ์ผ์ด์ ๋ฐฐํฌ ๋ฐ ํธ์คํ ํ๋ซํผ๊ฐ๋ฐ์๋ค์ด ์น ์ ํ๋ฆฌ์ผ์ด์ , API, ์ ์ ์ฌ์ดํธ ๋ฑ์ ์์ฝ๊ฒ ๋ฐฐํฌํ๊ณ ๊ด๋ฆฌํ ์ ์๋๋ก ์ง์ํ๋ค.๋ณต์กํ ์ธํ๋ผ ์ค์ ์์ด๋ ์๋์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น๋ํ๊ณ ๋ฐฐํฌํ๋ฉฐ, ํ์ฅ์ฑ๊ณผ ์์ ์ฑ์ ์ ๊ณตํ๋ค.์คํํธ์ ์ด๋ ์๊ท๋ชจ ํ์ด ๋น ๋ฅด๊ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐฐํฌํ๊ณ ๊ด๋ฆฌํ๋ ๋ฐ ์ ์ฉํ๋ฉฐ, ๋ณต์กํ ์ธํ๋ผ ๊ด๋ฆฌ์ ๋ํ ๋ถ๋ด์ ์ค์ฌ์ค๋ค.Render๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค, ๋ฐฑ๊ทธ๋ผ์ด๋ ์์ ๋ฑ ๋ค์ํ ๋ฐฑ์๋ ์๋น์ค๋ฅผ ์ง์ํ์ฌ ํ์คํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋๋ ๋ฐ์ ์ ํฉํ๋ค. Cloud Application Platform | RenderOn Render, you can build, ..
2024.11.06 -
- [Service] Mockaroo
Mockaroo๋ค์ด๊ฐ๋ฉฐ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์์ฑํด์ฃผ๋ ๋๊ตฌ์ธ Mockaroo์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Mockaroo๊ฐ๋ ๊ฐ๋ฐ์์ ๋ฐ์ดํฐ ๋ถ์๊ฐ๋ฅผ ์ํด ํ์ค์ ์ธ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์์ฑํด์ฃผ๋ ์จ๋ผ์ธ ๋๊ตฌCSV, JSON, SQL, Excel ๋ฑ ๋ค์ํ ํ์์ผ๋ก ์ต๋ 1,000๊ฐ์ ํ์ ๋ฌด๋ฃ๋ก ์์ฑํ ์ ์๋ค. ์ฃผ์ ๊ธฐ๋ฅ์ด๋ฆ, ์ฃผ์, ์ด๋ฉ์ผ ๋ฑ ๋ค์ํ ํ๋ ํ์ ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์ ์ ์ ๋ฐ์ดํฐ ์์ฑ์ด ๊ฐ๋ฅํ๋ค.ํ๋ ์ด๋ฆ, ๋ฐ์ดํฐ ํ์ , ์ต์ ๋ฑ์ ์ค์ ํ์ฌ ์ํ๋ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค ์ ์๋ค. CSV, JSON, SQL, Excel ๋ฑ ์ฌ๋ฌ ํ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ค์ด๋ก๋ํ ์ ์๋ค.๊ฐ์ API๋ฅผ ์ค๊ณํ์ฌ ์ค์ API์์ ์ํธ ์์ฉ์ ํ๊ฒ ํ ์ ์๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒ์๋์ ๊ณต์ ํํ์ด์ง์ ์ ์ํ์ฌ ํ๋ ์ด๋ฆ(Field Name)๊ณผ ํ์ (..
2 2024.11.06 -
- [Next.js] ํ ๋ง ํ ๊ธ ๊ธฐ๋ฅ ์ค์ ํ๊ธฐ (with shadcn/ui)
ํ ๋ง ํ ๊ธ ๊ธฐ๋ฅ ์ค์ ํ๊ธฐ (with shadcn/ui)๋ค์ด๊ฐ๋ฉฐNext.js๋ฅผ ์ด์ฉํ์ฌ ํ ๋ง ํ ๊ธ ๊ธฐ๋ฅ์ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค.์ด ๊ฒ์๊ธ์ ๋ด์ฉ์ ํ์ ์คํฌ๋ฆฝํธ(TypeScript)์ shadcn UI ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ฐํ์ผ๋ก ์์ฑ๋์๋ค. ๋ฐฉ๋ฒโ ์์ ํ ํ๋ฆฟ ์ฝ๋๋ฅผ ์ ์ญ ์คํ์ผ์ํธ ํ์ผ(@globals.css@)์ ๋ฃ๊ธฐ์๋์ ์ฌ์ดํธ์์ ์์ ์๊ฒ ๋ง๋ ๋ผ์ดํธ/๋คํฌ ๋ชจ๋ ์์ ํ ํ๋ฆฟ์ ์ ํํ ํ, ์์ ์ฝ๋๋ฅผ ๋ณต์ฌํ๋ค. shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com ๊ทธ๋ฆฌ๊ณ ์ ์ญ ์คํ์ผ์ํธ ํ์ผ(@/app/..
2024.11.05 -
- [Tailwind CSS] sr-only ํด๋์ค
sr-only ํด๋์ค๋ค์ด๊ฐ๋ฉฐํ ์ผ์๋(Tailwind) CSS์์ ์ฌ์ฉํ ์ ์๋ @sr-only@ ํด๋์ค์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. sr-only ํด๋์ค๊ฐ๋ ์๊ฐ์ฅ์ ์ธ์ ์ํ ์คํฌ๋ฆฐ ๋ฆฌ๋(Screen Reader) ์ ์ฉ ํด๋์ค์ด ํด๋์ค๋ฅผ ์ฌ์ฉํ๋ฉด ํด๋น ์์๊ฐ ํ๋ฉด์๋ ๋ณด์ด์ง ์์ง๋ง, ์คํฌ๋ฆฐ ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ๋ ์ฝํ ์ ์๋๋ก ์ค์ ๋๋ค.์๊ฐ์ฅ์ ์ธ์ด ํ์ด์ง๋ฅผ ํ์ํ ๋ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ์ ๊ณตํ ์ ์๋ค. ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์๋ฏธ๋ฅผ ๋ช ํํ ํ๊ธฐ ์ํด ๋ณด์กฐ ํ ์คํธ๋ฅผ ์ถ๊ฐํ ๋์๋ฅผ ๋ค์ด, ์์ด์ฝ ๋ฒํผ์ ์ถ๊ฐ ์ค๋ช ์ ๋ง๋ถ์ผ ๋์ ๊ทผ์ฑ์ ๊ฐ์ ํ๊ธฐ ์ํด ์ถ๊ฐ์ ์ธ ํ ์คํธ๊ฐ ํ์ํ์ง๋ง, ์ผ๋ฐ ์ฌ์ฉ์์๊ฒ๋ ๋ถํ์ํ ์ ๋ณด๋ฅผ ์จ๊ธฐ๊ณ ์ถ์ ๋ ์ฌ์ฉ ์์ Settings CSS ์คํ์ผ.sr-only { position: absolut..
2024.11.05 -
- [CSS] ๋ฏธ๋์ด ์ฟผ๋ฆฌ(Media Query) ์ฅ์น ํ๋ฉด ๋๋น ๋ธ๋ ์ดํฌํฌ์ธํธ ์ ๋ฆฌ
๋ฏธ๋์ด ์ฟผ๋ฆฌ(Media Query) ์ฅ์น ํ๋ฉด ๋๋น ๋ธ๋ ์ดํฌํฌ์ธํธ ์ ๋ฆฌ๋ค์ด๊ฐ๋ฉฐCSS์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ(Media Query)๋ฅผ ์ด์ฉํ์ฌ ๋ฐ์ํ ๋์์ธ(Responsive Design)์ ๋ง๋ค ์ ์๋ค.์ด๋ ์ฌ์ฉํ ์ ์๋ ์ฅ์น(Device)์ ํ๋ฉด ๋๋น ๋ธ๋ ์ดํฌํฌ์ธํธ(Breakpoint)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ์ฅ์น ํ๋ฉด ๋๋น ๋ธ๋ ์ดํฌํฌ์ธํธPortrait ๋ชจ๋๋ ์ธ๋ก ํ๋ฉด, Landscape ๋ชจ๋๋ ๊ฐ๋ก ํ๋ฉด์ ์๋ฏธํ๋ค.์ฅ์น๋ธ๋ ์ดํฌํฌ์ธํธ๋น๊ณ ๋ชจ๋ฐ์ผ320pxPortrait ๋ชจ๋์) iPhone 5, iPhone SE480pxLandscape ๋ชจ๋ํ๋ธ๋ฆฟ768pxPortrait ๋ชจ๋์) iPadํ๋ธ๋ฆฟ / ์ปดํจํฐ1024pxLandscape ๋ชจ๋์ปดํจํฐ1200px ์ด์Desktop, Laptop์์ ์ฝ๋/* ๋ชจ๋ฐ์ผ Port..
3 2024.11.05 -
- [React.ts] PropsWithChildren
PropsWithChildren๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.ts)์์ ์ฌ์ฉํ ์ ์๋ @PropsWithChildren@ ํ์ ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค.์ด ํ์ ์ ๋ฆฌ์กํธ์ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ํจ๊ป ์ฌ์ฉํ ๋ ์ฌ์ฉํ ์ ์๋ค. PropsWithChildren๊ฐ๋ ํ์ ์คํฌ๋ฆฝํธ(TypeScript)์์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ์์ ์์(@children@)๋ฅผ ํ์ฉํ๊ณ ์ ํ ๋ ์ฌ์ฉํ๋ ์ ํธ๋ฆฌํฐ ํ์ ๋ณดํต ์ปดํฌ๋ํธ์ ์ ๋ฌ๋๋ ๊ธฐ๋ณธ @props@ ์ธ์๋ ์์ ์์๋ฅผ ํฌํจํ ์ ์์ ๋ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋๋ค.@PropsWithChildren@ ํ์ ์ ์ปดํฌ๋ํธ๊ฐ ์์ ์์๋ฅผ ๊ฐ์ง ์ ์๋๋ก ๋ช ์ํ๋ฉฐ, @children@์ ๋ช ์์ ์ผ๋ก ์ ์ํ์ง ์๊ณ ๋ ์ฌ์ฉํ ์ ์๋๋ก ํด์ค๋ค. ์ฌ์ฉ ์์ import { PropsWithChildren } from ..
2024.11.05 -
- [React.js] const Component vs. function Component
const Component vs. function Component๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ @const Component@ ํํ์ ํ์ดํ ํจ์ ๋ฐฉ์๊ณผ @function Component@ ํํ์ ํจ์ ์ ์ธ ๋ฐฉ์์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ์ ์ธํ ์ ์๋ค.์์ ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ ๋ํ ์ฐจ์ด์ ์ ์ ๋ฆฌํด๋ณธ๋ค. โ ํ์ดํ ํจ์ ๋ฐฉ์const MyComponent = () => { return( .. )} ํ์ดํ ํจ์(Arrow Function)๋ก ์์ฑํ ์ ์์ผ๋ฉฐ, ์งง์ ์ฝ๋๋ก ์์ฑํ ์ ์๋ค๋ ์ฅ์ ์ด ์๋ค.์๋ฅผ ๋ค์ด, ํ ์ค๋ก ๋ฐํํ๋ ๊ฒฝ์ฐ, @return@ ํค์๋๋ฅผ ์๋ตํ ์ ์๋ค.const MyComponent = () => ( ... ) ์ปดํฌ๋ํธ ์ ์ธ๊ณผ ๋์์ @export default..
2 2024.11.04 -
- [Git] .gitignore ํ์ผ์ ํ๊ฒฝ ์ค์ ํ์ผ(.env) ๋ฑ๋กํ๋ ๋ฐฉ๋ฒ
.gitignore ํ์ผ์ ํ๊ฒฝ ์ค์ ํ์ผ(.env) ๋ฑ๋กํ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐ@.gitignore@ ํ์ผ์ ํ๊ฒฝ ์ค์ ํ์ผ(@.env@)์ ๋ฑ๋กํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ@.gitignore@ ํ์ผ์ @.env@ ์ถ๊ฐํ๊ธฐ.gitignore@.gitignore@ ํ์ผ์ด ์์ ๊ฒฝ์ฐ ์๋ก ์์ฑํด์ฃผ๊ณ , ๊ทธ ์์ @.env@์ ์ถ๊ฐํด์ค๋ค.# ํ๊ฒฝ ์ค์ ํ์ผ.env (์ฐธ๊ณ ) @.gitignore@ ํ์ผ์ ์ถ๊ฐํด๋ ๋ฌด์๋์ง ์์ ๊ฒฝ์ฐ๋ง์ฝ ์ด๋ฏธ @.env@ ํ์ผ์ด Git์ ์ํด ์ถ์ ์ค์ผ ๊ฒฝ์ฐ, @.gitignore@ ํ์ผ์ @.env@๋ฅผ ์ถ๊ฐํด๋ ๋ฌด์๋์ง ์๋๋ค.๋ฐ๋ผ์ ์๋์ ๋ช ๋ น์ ์คํํ์ฌ Git ์บ์์์ @.env@ ํ์ผ ์ถ์ ์บ์๋ฅผ ์ ๊ฑฐํด์ค๋ค.$ git rm --cached .env
2024.11.02 -
- [React.js] React Share ๋ผ์ด๋ธ๋ฌ๋ฆฌ
React Share ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐReact Share ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. React Share๊ฐ๋ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ค์ํ ์์ ๋ฏธ๋์ด ๊ณต์ ๋ฒํผ์ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์๋๋ก ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ฌ๋ฌ ์์ ๋ฏธ๋์ด ํ๋ซํผ์ ๋งํฌ๋ฅผ ๊ณต์ ํ ์ ์๋ ๋ฒํผ์ ์ ๊ณตํ๋ฉฐ, ๊ฐ๋จํ ์ค์ ์ ํตํด ๋ฒํผ์ ์ปค์คํฐ๋ง์ด์งํ ์ ์๋ค. ์ฃผ์ ํน์ง๊ฐ๋จํ๊ฒ ์ค์นํ ์ ์๋ค.ํ์ํ ์์ ๋ฏธ๋์ด ๊ณต์ ๋ฒํผ์ ์ปดํฌ๋ํธ๋ก ๋ถ๋ฌ์ ์ฌ์ฉํ ์ ์๋ค.๋ฒํผ์ ํฌ๊ธฐ, ๋ชจ์, ์คํ์ผ์ ์ฝ๊ฒ ์ปค์คํฐ๋ง์ด์งํ ์ ์์ผ๋ฉฐ, SVG ์์ด์ฝ์ ์ฌ์ฉํ์ฌ ์คํ์ผ์ ์์ ๋กญ๊ฒ ๋ณ๊ฒฝํ ์ ์๋ค.๋ค์ํ ์์ ๋ฏธ๋์ด ํ๋ซํผ์ ์ง์ํ๋ค.Facebook, X(Twitter), LinkedIn, Pinterest, Telegram, WhatsApp, Line, R..
2024.11.01 -
- [Next.js] ๊ฐ์๊ธฐ "'next'์(๋) ๋ด๋ถ ๋๋ ์ธ๋ถ ๋ช ๋ น, ์คํํ ์ ์๋ ํ๋ก๊ทธ๋จ, ๋๋๋ฐฐ์น ํ์ผ์ด ์๋๋๋ค." ์ค๋ฅ๊ฐ ๋ฐ์ํ ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ
๊ฐ์๊ธฐ "'next'์(๋) ๋ด๋ถ ๋๋ ์ธ๋ถ ๋ช ๋ น, ์คํํ ์ ์๋ ํ๋ก๊ทธ๋จ, ๋๋๋ฐฐ์น ํ์ผ์ด ์๋๋๋ค." ์ค๋ฅ๊ฐ ๋ฐ์ํ ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐNext.js ํ๋ก์ ํธ ์๋ฒ๋ฅผ ์คํํ ๋, ๊ฐ์๊ธฐ ์๋์ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค.$ yarn devyarn run v1.22.22$ next dev'next'์(๋) ๋ด๋ถ ๋๋ ์ธ๋ถ ๋ช ๋ น, ์คํํ ์ ์๋ ํ๋ก๊ทธ๋จ, ๋๋๋ฐฐ์น ํ์ผ์ด ์๋๋๋ค.error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ์ด๋, ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒํด๊ฒฐ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๋ค. ์บ์๋ฅผ ์ง์์ค ํ, ํ๋ก์ ..
2024.10.30 -
- [JavaScript] Faker.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Faker.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐFaker.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Faker.js๊ฐ๋ ๋ค์ํ ์ ํ์ ๊ฐ์ง ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ฒ ์์ฑํ ์ ์๋๋ก ๋์์ฃผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ, ํ ์คํธ, ๋ฐ๋ชจ์ฉ ๋ฐ์ดํฐ๋ฅผ ๋น ๋ฅด๊ฒ ์์ฑํ ๋ ์ ์ฉํ๋ค.์ด๋ฆ, ์ฃผ์, ์ ํ๋ฒํธ, ์ด๋ฉ์ผ, ๋ ์ง, ์ด๋ฏธ์ง URL ๋ฑ์ ๋ฌด์์๋ก ์์ฑํ ์ ์๋ค.๊ด๋ฆฌ ๋ฌธ์ ๋ก 2021๋ ์ ๊ฐ๋ฐ์ด ์ค๋จ๋์๊ณ , ์ดํ ์ปค๋ฎค๋ํฐ์์ @๏ผ faker-js/faker@๋ผ๋ ์ด๋ฆ์ผ๋ก ํฌํฌ(Fork)ํ์ฌ ์ ์ง๋ณด์ํ๊ณ ์๋ค.๊ธฐ์กด์ @faker.js@๋ ๋ ์ด์ ์ ์ง๋ณด์๋์ง ์๋๋ค.์์ธํ ๋ด์ฉ์ ์ด ๊ธ์ ์ฐธ๊ณ ํ๋ค. ๋ฐ๋ผ์ ์ปค๋ฎค๋ํฐ์ ์ํด ๊ด๋ฆฌ๋๊ณ ์๋ @๏ผ faker-js/faker@๋ฅผ ์ฌ์ฉํ๋ค.Faker๋ก ์์ฑํ ๋ฐ์ดํฐ๋ ๋ฌด์์์ด๋ฉฐ ์ค์ ๋ฐ์ดํฐ๊ฐ ์๋๋ฏ..
2024.10.30 -
- [Python] Pyinstaller๋ก ํจํค์งํ ๋ ํ๊ฒฝ ๋ณ์ ํ์ผ(.env) ์ธ์ ์๋๋ ๋ฌธ์ ํด๊ฒฐ ๋ฐฉ๋ฒ
Pyinstaller๋ก ํจํค์งํ ๋ ํ๊ฒฝ ๋ณ์ ํ์ผ(.env) ์ธ์ ์๋๋ ๋ฌธ์ ํด๊ฒฐ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐPyinstaller๋ฅผ ์ฌ์ฉํ์ฌ ์คํ ํ์ผ(@.exe@)๋ก ํจํค์ง ํ ๋, ํ๊ฒฝ ๋ณ์ ํ์ผ(@.env@) ์ธ์์ด ์๋๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ๊ธฐ๋ณธ์ ์ผ๋ก ํ์ด์ฌ(Python)์์ ํ๊ฒฝ ๋ณ์ ํ์ผ(@.env@)์ ๋ด์ฉ์ ๋ถ๋ฌ์ค๋ ค๋ฉด @dotenv@ ํจํค์ง๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.@dotenv@ ํจํค์ง์ ๋ํ ์์ธํ ๋ด์ฉ์ ์๋์ ๊ธ์ ์ฐธ๊ณ ํ๋ค. [Python] .env ํ์ผ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ.env ํ์ผ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐํ์ด์ฌ(Python)์์ @.env@ ํ์ผ์ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. .env ํ์ผ๊ฐ๋ ํค(Key)-๊ฐ(Value) ์์ผ๋ก ํ๊ฒฝ ๋ณ์๋ฅผ ์ ์ํ๋ ๊ฐ๋จํ ํ ์คํธ ํ์ผ์ด ํ์ผ์ ์ฌ์ฉํ๋ฉดdev-a..
2024.10.30 -
- [Next.js] ํ๊ฒฝ ๋ณ์ ์ฌ์ฉ ๋ฐฉ๋ฒ
ํ๊ฒฝ ๋ณ์ ์ฌ์ฉ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐNext.js์์ ํ๊ฒฝ ๋ณ์(Environment Variable)๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒโ ํ๊ฒฝ ๋ณ์ ํ์ผ ์ค์ ํ๊ธฐNext.js๋ @.env@ ํ์ผ์ ํตํด ํ๊ฒฝ ๋ณ์๋ฅผ ๋ถ๋ฌ์ฌ ์ ์๋ค.ํ๋ก์ ํธ ์ต์์ ๊ฒฝ๋ก(@/@)์ ๋ค์๊ณผ ๊ฐ์ @.env@ ํ์ผ์ ์์ฑํ๋ค. /.env.localNEXT_PUBLIC_API_URL=https://api.example.comAPI_SECRET_KEY=your-secret-key ⇒ ๋ค์๊ณผ ๊ฐ์ด @.env@๋ค์ ์ฉ๋์ ๋ฐ๋ผ ๋ค์ํ ์ ๋ฏธ์ด๋ฅผ ๋ถ์ผ ์ ์๋ค. ํ๊ฒฝ๋ณ์ ํ์ผ๋ช ์ค๋ช @.env.local@๋ก์ปฌ ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ฌ์ฉํ๋ ํ๊ฒฝ ๋ณ์ (Git์ ์ถ๊ฐํ์ง ์๋ ๊ฒ์ด ์ข๋ค.)@.env.development@๊ฐ๋ฐ ํ๊ฒฝ์์ ์ฌ์ฉํ๋ ํ๊ฒฝ ๋ณ์@..
1 2024.10.29