์ ์ฒด ๊ธ
-
- [React.js] Recharts ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Recharts ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React) ๊ธฐ๋ฐ์ ๋ฐ์ดํฐ ์๊ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Recharts์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Recharts๊ฐ๋ ๋ฆฌ์กํธ(React) ๊ธฐ๋ฐ์ ๋ฐ์ดํฐ ์๊ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ํ ์ฐจํธ๋ฅผ ์ฝ๊ฒ ์์ฑํ๊ณ ๋ฐ์ดํฐ๋ฅผ ์๊ฐ์ ์ผ๋ก ํํํ ์ ์๋๋ก ๋์์ค๋ค.์ ์ธํ ๋ฐฉ์์ผ๋ก ๋ฆฌ์กํธ์ ์ ๋ง์ผ๋ฉฐ, ๊ทธ๋ํ๋ฅผ ๊ตฌ์ฑํ๋ ๋ฐ ํ์ํ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํด ์ง๊ด์ ์ผ๋ก ์ฐจํธ๋ฅผ ๊ตฌ์ฑํ ์ ์๋๋ก ๋์์ค๋ค. ํน์ง๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฐจํธ๋ฅผ ๊ตฌ์ฑํ๋ฏ๋ก, ๋ฆฌ์กํธ์ ์ํ(State)์ ์์ฑ์ ํ์ฉํด ๋์ ์ผ๋ก ์ฐจํธ๋ฅผ ์ ๋ฐ์ดํธํ ์ ์๋ค.Recharts๋ ๋ด๋ถ์ ์ผ๋ก D3.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ์ฉํ์ฌ ์ฐจํธ๋ฅผ ๋ ๋๋งํ๋ค.D3.js์ ๊ฐ๋ ฅํ๊ณ ๋ค์ํ ๊ธฐ๋ฅ์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ํํ๋ก ๊ฐํธํ๊ฒ ์ฌ์ฉํ ์ ์๋ค.์ฐจํธ๋ฅผ ๊ตฌ์ฑํ๋ ์์..
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)๊ณผ ํ์ (..
1 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 -
- [React.js] Clerk
Clerk๋ค์ด๊ฐ๋ฉฐNext.js ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ธ์ฆ(Authentication) ๋ฐ ์ฌ์ฉ์ ๊ด๋ฆฌ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ๋์์ฃผ๋ Clerk ์๋น์ค์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค.์ด ์๋น์ค๋ฅผ ์ด์ฉํ๋ฉด, ์์ ๋ก๊ทธ์ธ ๋ฑ ์ธ์ฆ์ ์ํ ๊ธฐ๋ฅ๋ค์ ์ง์ ์ฝ๋๋ก ๊ตฌํํ์ฌ ๋ง๋ค์ด์ฃผ์ง ์์๋ ๋๋ค. Clerk๊ฐ๋ Next.js ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ธ์ฆ(Authentication) ๋ฐ ์ฌ์ฉ์ ๊ด๋ฆฌ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋๋ก ๋๋ ์๋น์ค์์ ๋ก๊ทธ์ธ, ๋ฉํฐํฉํฐ ์ธ์ฆ(MFA), ์ธ์ ๊ด๋ฆฌ ๋ฑ์ ๊ธฐ๋ณธ ์ ๊ณตํ๋ค.Next.js์ ์๋ฒ๋ฆฌ์ค ํ๊ฒฝ๊ณผ๋ ์ ๋ง๊ธฐ ๋๋ฌธ์ API ๋ผ์ฐํธ์ ๋ฏธ๋ค์จ์ด์์ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋๋ค.Clerk์ ์ด์ฉํ๋ฉด ์ฝ๊ฒ ์์ ๋ก๊ทธ์ธ(Google, Facebook, GitHub ๋ฑ) ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์๋ค. ํ์๊ฐ์ ๋ฐ ํ๋ก์ ํธ ์์ฑ Cler..
2024.10.28 -
- [React.js] use-debounce ํจํค์ง
use-debounce ํจํค์ง๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์ Next.js ๊ฐ์ ํ๊ฒฝ์์ ์ปดํฌ๋ํธ๊ฐ ์์ฃผ ์ ๋ฐ์ดํธ ๋์ง ์๋๋ก ํด์ฃผ๋ @use-debounce@ ํจํค์ง์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. use-debounce๊ฐ๋ ๋ฆฌ์กํธ(React.js)์ Next.js ๊ฐ์ ํ๊ฒฝ์์ ์ปดํฌ๋ํธ๊ฐ ์์ฃผ ์ ๋ฐ์ดํธ๋์ง ์๋๋ก ํน์ ๋์์ ๋๋ฐ์ด์ค(Debounce) ํ๊ธฐ ์ํด ์ฌ์ฉํ ์ ์๋ ์ ํธ๋ฆฌํฐ ํ ์ฌ์ฉ์๊ฐ ์ ๋ ฅ์ ๋น ๋ฅด๊ฒ ๋ฐ๋ณตํ ๋ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ด๋ API ํธ์ถ์ ๋ฐฉ์งํ๋ ๋ฐ ์ ์ฉํ๋ค. ๋๋ฐ์ด์ค(Debounce)์ฌ์ฉ์๊ฐ ๋ง์ง๋ง์ผ๋ก ๋ฐ์ํ ์ด๋ฒคํธ ์ดํ, ์ผ์ ์๊ฐ ๋์ ์ถ๊ฐ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ง ์์์ ๋๋ง ํจ์๋ฅผ ์คํํ๋ ํจํด์ฃผ๋ก API ์์ฒญ์ด๋ ๋ฆฌ์์ค๊ฐ ๋ง์ด ํ์ํ ์ด๋ฒคํธ ์ฒ๋ฆฌ์ ์ฌ์ฉ๋๋ค.๊ฒ์์ฐฝ์์ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ๋๋ง๋ค..
1 2024.10.27 -
- [๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ] ํ๋ค์ค(pandas) ์ถ๋ ฅ ๊ธธ์ด ์ ํ ํด์ ํ๊ธฐ
ํ๋ค์ค(pandas) ์ถ๋ ฅ ๊ธธ์ด ์ ํ ํด์ ํ๊ธฐ๋ค์ด๊ฐ๋ฉฐํ๋ค์ค(@pandas@)์ ์ถ๋ ฅ ๊ธธ์ด ์ ํ์ ํด์ ํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค.๊ธด ๋ด์ฉ์ ๋ฐ์ดํฐ๋ฅผ ํ์ธํ ๊ฒฝ์ฐ ์ค๊ฐ์ @...@์ผ๋ก ์๋ต๋์ด ์์ด์ ๋ถํธํ๋ฐ, ์ด ์ค์ ์ ํด์ฃผ๋ฉด ์ ์ฒด ๋ด์ฉ์ด ๋ณด์ด๊ฒ ๋๋ค. ๋ฐฉ๋ฒ๋ค์๊ณผ ๊ฐ์ด @pd.set_option()@์ ์ด์ฉํ์ฌ ์ต๋ ์ถ๋ ฅ ํ๊ณผ ์ด์ ๊ฐ์๋ฅผ ์์จ ์ ์๋ค.import pandas as pd# ํ๊ณผ ์ด์ ์ต๋ ์ถ๋ ฅ ์ ํ ํด์ ํ๊ธฐpd.set_option('display.max_rows', None) pd.set_option('display.max_columns', None) ์ฐธ๊ณ ์ฌ์ดํธ pandas.set_option — pandas 2.2.3 documentationdisplay.[large_repr, max_c..
2024.10.27 -
- [VS Code] ์ฝ๋ ์๋ ์์ฑ, ์ค๋ํซ ๊ธฐ๋ฅ ๋๋ ๋ฐฉ๋ฒ (settings.json)
์ฝ๋ ์๋ ์์ฑ, ์ค๋ํซ ๊ธฐ๋ฅ ๋๋ ๋ฐฉ๋ฒ (settings.json)๋ค์ด๊ฐ๋ฉฐ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(VS Code)์์ ์ฝ๋ ์๋ ์์ฑ, ์ค๋ํซ(Snippet) ๊ธฐ๋ฅ์ ๋๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค.๋ก์ปฌ์์ ์ฝ๋ฉ ํ ์คํธ๋ ๋น ๋ฐ์ดํฐ๋ถ์๊ธฐ์ฌ ์ค๊ธฐ ์ํ์ ์ค๋นํ ๋ ์ด ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด ์ ์ฉํ๋ค. ๋ฐฉ๋ฒ์ค๋ช @settings.json@ ํ์ผ์ ์๋์ ๋ด์ฉ์ ์ถ๊ฐํด์ค๋ค.@[Ctrl/Cmd]@ + @[Shift]@ + @[P]@๋ฅผ ๋๋ฌ์ ๋ช ๋ น ํ๋ ํธ(Command Pallette) ์ด๊ธฐ@settings@ ๊ฒ์ํ๊ธฐ@[Preferences: Open User Settings (JSON)]@ ํญ๋ชฉ ํด๋ฆญํ๊ธฐ ๋ง์ฝ ๋ก์ปฌ ํ๋ก์ ํธ์๋ง ์ ์ฉ์ํค๊ณ ์ถ๋ค๋ฉด, ํ๋ก์ ํธ ์ต์๋จ ๊ฒฝ๋ก์ @.vscode@ ํด๋ ์์ฑ ํ, @settings.json..
2024.10.27 -
- [React.js] antd ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
antd ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js) ๊ธฐ๋ฐ์ UI ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋์ธ antd(Ant Design)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Ant Design(antd)๊ฐ๋ ์๋ฆฌ๋ฐ๋ฐ ๊ทธ๋ฃน์ด ๋ง๋ ๋ฆฌ์กํธ(React.js) ๊ธฐ๋ฐ์ UI ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋์์ธ ์ผ๊ด์ฑ์ ์ ์งํ๋ฉด์ ์์ฐ์ฑ์ ๋์ด๋ ๊ฒ์ ๋ชฉํ๋ก ๋ง๋ค์ด์ก์ผ๋ฉฐ, ๊ธฐ์ ์ฉ ์์คํ ๊ฐ๋ฐ์ ๋ง์ด ์ฌ์ฉ๋๋ค.์ฃผ๋ก ๊ด๋ฆฌ ์์คํ , ๋์๋ณด๋, ๊ธฐ์ ์ฉ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ ํฉํ๋ค. ์ฃผ์ ํน์ง๋ฒํผ, ์ ๋ ฅ ํ๋, ํ ์ด๋ธ, ๋ชจ๋ฌ, ํผ, ์ฐจํธ ๋ฑ ๋ค์ํ UI ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํ๋ค.@@, @@, @@, @@, @@, @@๋๋ถ๋ถ์ ์ปดํฌ๋ํธ๊ฐ ๋ฏธ๋ฆฌ ์คํ์ผ๋ง๋์ด ์์ด, ์ต์ํ์ ์ค์ ์ผ๋ก ๋น ๋ฅด๊ฒ ๊ฐ๋ฐ ๊ฐ๋ฅํ๋ค.๋์์ธ ๊ฐ์ด๋๋ผ์ธ์ ๋ฐ๋ฅด๋ฉฐ, ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ฅผ ์กฐํฉํด๋ ํต์ผ๋..
1 2024.10.23 -
- [Styled-Components] ์ธ๋ถ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ UI ์ปดํฌ๋ํธ ์คํ์ผ์ ์ง์ ์์ ํ๋ ๋ฐฉ๋ฒ
์ธ๋ถ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ UI ์ปดํฌ๋ํธ ์คํ์ผ์ ์ง์ ์์ ํ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐ@antd@ ๋ฑ ์ธ๋ถ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ UI ์ปดํฌ๋ํธ๋ฅผ Styled-Components๋ฅผ ์ด์ฉํ์ฌ ์ง์ ์์ ํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ์คํ์ผ ํ์ผ(@์ปดํฌ๋ํธ๋ช .style.js@)์ด๋ ์ปดํฌ๋ํธ ํ์ผ(@์ปดํฌ๋ํธ๋ช .js/jsx/tsx@)์์ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ๊ณ ๋ณ๊ฒฝ/์ถ๊ฐํ๊ณ ์ ํ๋ ์คํ์ผ์ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค.import styled from "styled-components";import { ์ธ๋ถ์ปดํฌ๋ํธ๋ช } from "์ธ๋ถ_์ปดํฌ๋ํธ_๋ผ์ด๋ธ๋ฌ๋ฆฌ_ํจํค์ง";export const ์ปค์คํ ์ธ๋ถ์ปดํฌ๋ํธ๋ช = styled(์ธ๋ถ์ปดํฌ๋ํธ๋ช )` ์์ฑ: ๊ฐ;`; ๊ทธ๋ฆฌ๊ณ ๋ค๋ฅธ ์ผ๋ฐ์ ์ธ Styled-Components ์์์ฒ๋ผ ์ฌ์ฉํ๋ฉด ๋๋ค.i..
1 2024.10.23 -
- [Service] ํ๋ฆฌ์ฆ๋ง(Prisma)
ํ๋ฆฌ์ฆ๋ง(Prisma)๋ค์ด๊ฐ๋ฉฐORM(Object-Relational Mapping) ๋๊ตฌ ์ค ํ๋์ธ ํ๋ฆฌ์ฆ๋ง(Prisma)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ํ๋ฆฌ์ฆ๋ง(Prisma)๊ฐ๋ ORM(Object-Relational Mapping) ๋๊ตฌ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ์ ์ธํฐํ์ด์ค๋ฅผ ๊ฐํธํ๊ฒ ๋ง๋ค์ด์ฃผ๋ ๊ฐ๋ฐ ๋๊ตฌ์ฃผ๋ก Node.js์ TypeScript ํ๊ฒฝ์์ ์ฌ์ฉ๋๋ค.SQL ์ฟผ๋ฆฌ๋ฅผ ์ง์ ์์ฑํ ํ์ ์์ด ์์ ํ ํ์ ์ ์ฝ๋๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ํธ์์ฉํ ์ ์๋๋ก ๋์์ค๋ค. ORM(Object-Relational Mapping)๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ์ฌ์ฉํ๋ ๊ฐ์ฒด(Object)์ ๊ด๊ณํ ๋ฐ์ดํฐ๋ฒ ์ด์ค(Relational Database)์ ํ ์ด๋ธ ๊ฐ์ ๋งคํ์ ์๋ํํ๋ ๊ธฐ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ฐ์ดํฐ๋ฅผ SQL์ด ์..
3 2024.10.22 -
- [Service] Supabase
Supabase๋ค์ด๊ฐ๋ฉฐFirebase์ ๋์์ผ๋ก ๋ง์ด ์ฌ์ฉ๋๋ Supabase์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Supabase๊ฐ๋ ๊ฐ๋ฐ์๋ค์ด ์๋ฒ๋ฆฌ์ค ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น ๋ฅด๊ฒ ๊ตฌ์ถํ ์ ์๋๋ก ๋๋ ์คํ ์์ค ๋ฐฑ์๋ ์๋น์คFirebase์ ๋์์ผ๋ก ๋ง์ด ์ฌ์ฉ๋๋ฉฐ, PostgreSQL์ ๊ธฐ๋ฐ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ณ ๋ค์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค. ์ฃผ์ ๊ธฐ๋ฅ๋ฐ์ดํฐ๋ฒ ์ด์ค ๊ด๋ฆฌPostgreSQL์ ๊ธฐ๋ณธ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ก ์ฌ์ฉํ๋ค.์คํค๋ง ๊ด๋ฆฌ, ๊ด๊ณํ ๋ฐ์ดํฐ๋ฒ ์ด์ค, ์ค์๊ฐ ๊ธฐ๋ฅ ๋ฑ์ ์ง์ํ๋ค.SQL ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ณต์กํ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ ์ ์๋ค. ์ค์๊ฐ ๊ธฐ๋ฅ์ค์๊ฐ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ด๋ฒคํธ๋ฅผ ๊ตฌ๋ ํ ์ ์๋ค.์) ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์๋ก์ด ๋ ์ฝ๋๊ฐ ์ถ๊ฐ๋๊ฑฐ๋ ์ ๋ฐ์ดํธ๋๋ฉด ์๋์ผ๋ก ํด๋ผ์ด์ธํธ์ ์๋ฆผ ๋ณด๋ด๊ธฐ ์ธ์ฆ ๋ฐ ๊ถํ ๊ด๋ฆฌ์ด๋ฉ์ผ, ๋น๋ฐ๋ฒํธ ๋ก๊ทธ์ธ, ์์ ..
1 2024.10.21 -
- [Tailwind CSS] asChild ์์ฑ
asChild ์์ฑ๋ค์ด๊ฐ๋ฉฐ@asChild@ ์์ฑ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. asChild ์์ฑ๊ฐ๋ Radix UI์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ฌ์ฉ๋๋ ์์ฑ์ปดํฌ๋ํธ๊ฐ ๋ํ(Wrapping)๋ ์์ ์ปดํฌ๋ํธ์ ์คํ์ผ์ด๋ ๊ธฐ๋ฅ์ ๊ทธ๋๋ก ์ ์งํ๋ฉด์ ํน์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค. ์๋ฏธ์์ ์์๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ๋ค.๋ํ๋ ์ปดํฌ๋ํธ๊ฐ ์๋ก์ด DOM ๋ ธ๋๋ฅผ ์์ฑํ์ง ์๊ณ , ํด๋น ์์ ์์์ DOM์ ๊ทธ๋๋ก ์ฌ์ฉํ์ฌ ๊ธฐ๋ฅ๋ง ์ถ๊ฐํ๋ค.๋ถํ์ํ DOM ๋ ธ๋๊ฐ ์ถ๊ฐ๋์ง ์์ HTML ๊ตฌ์กฐ๋ฅผ ๊น๋ํ๊ฒ ์ ์งํ๊ณ , ์คํ์ผ์ด ๊นจ์ง์ง ์๋๋ก ๋ณด์ฅํ๋ค. ์ฌ์ฉ ์ Menu ⇒ @@์ @@์ ์์์ด์ง๋ง, @@๊ฐ ์๋ก์ด DOM ๋ ธ๋๋ฅผ ๋ง๋ค์ง ์๋๋ค.⇒ ๋์ @@ ์์ฒด๊ฐ @DropdownMenuTrigger@๋ก ์๋ํ๊ฒ ๋๋ค. ์ฌ์ฉํ๋ฉด ์ข์ ๊ฒฝ์ฐ์ถ๊ฐ..
2024.10.21 -
- [Tailwind CSS] shadcn/ui
shadcn/ui๋ค์ด๊ฐ๋ฉฐ๊ฐ๋จํ๊ฒ ๋ณต์ฌ & ๋ถ์ฌ๋ฃ๊ธฐ๋ก ์ฌ์ฉํ ์ ์๋ shadcn/ui์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. shadcn/ui๊ฐ๋ ๋ค์ํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ฌ์ฉํ ์ ์๋ ์ ๊ทผ ๊ฐ๋ฅํ๊ณ ์ปค์คํฐ๋ง์ด์ฆ ๊ฐ๋ฅํ UI ์ปดํฌ๋ํธ ๋ชจ์์ผ๋ฐ์ ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ ๋ค๋ฅด๊ฒ npm ํจํค์ง๋ก ์ค์นํ๋ ๋์ , ์ฌ์ฉ์๊ฐ ํ์ํ ์ปดํฌ๋ํธ๋ฅผ ๋ณต์ฌํด์ ์ง์ ํ๋ก์ ํธ์ ๋ถ์ฌ๋ฃ๋ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํ๋ค.๋ถํ์ํ ์์กด์ฑ์ ํผํ ์ ์๊ณ , ์์ ๋ง์ ์ปค์คํ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ตฌ์ถํ ์ ์๋ค.๋ฆฌ์กํธ(React.js)๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์์ฑ๋์๊ณ , Tailwind CSS ๋ฐ Radix UI์ ๊ฐ์ ์คํ ์์ค ๊ธฐ์ ๋ค์ ์ ๊ทน์ ์ผ๋ก ํ์ฉํ์ฌ ๋ง๋ค์ด์ก๋ค.Next.js์ ๊ฐ์ ํ๋ ์์ํฌ์ ์ ํตํฉ๋๋๋ก ์ค๊ณ๋์๋ค.MIT ๋ผ์ด์ผ์ค๋ก ๊ณต๊ฐ๋์ด ์์ด ๋๊ตฌ๋ ์์ ๋กญ๊ฒ ์์ ..
2024.10.20 -
- [Next.js] ํด๋ ๊ตฌ์กฐ ๋ฐ ๋์ ๊ฒฝ๋ก ์ค์ ํ๊ธฐ
ํด๋ ๊ตฌ์กฐ ๋ฐ ๋์ ๊ฒฝ๋ก ์ค์ ํ๊ธฐ๋ค์ด๊ฐ๋ฉฐNext.js๋ฅผ ์ด์ฉํ์ฌ ํด๋ ๊ตฌ์กฐ ๋ฐ ๋์ ๊ฒฝ๋ก๋ฅผ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒโ ๋น๊ณต๊ฐ ํด๋(Private Folder) ์์ฑํ๊ธฐ์ฑ(@app@) ํด๋๋ ๊ธฐ๋ณธ์ ์ผ๋ก URL ์ธ๊ทธ๋จผํธ๊ฐ ๋๋ค.๋น๊ณต๊ฐ ํด๋(Private Folder)๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๊ฒฝ์ฐ, ํด๋ ์ด๋ฆ ์์ ๋ฐ์ค(@_@)์ ์ถ๊ฐํ๋ค._css ⇒ @_css@ ํด๋ ์์ฑ ์, ํด๋น ํด๋๋ URL ์ธ๊ทธ๋จผํธ๋ก ๋ ธ์ถ๋์ง ์์ผ๋ฉฐ, ๋ง์ฝ ํด๋น ๊ฒฝ๋ก์ ์ ์ํ ๊ฒฝ์ฐ 404 ํ์ด์ง๋ฅผ ๋ฐํํ๋ค. ๋น๊ณต๊ฐ ํด๋๋ ๋ผ์ฐํ ์ ์ง์ ํฌํจ๋์ง ์๋ ํด๋์ด๋ค.์ผ๋ฐ์ ์ผ๋ก ๋ด๋ถ ๊ด๋ฆฌ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉ๋๋ค. โก ๋ผ์ฐํธ ๊ทธ๋ฃน(Route Group) ์์ฑํ๊ธฐ๋ผ์ฐํธ ๊ทธ๋ฃน(Route Group)์ ํน์ ํ์ด์ง๋ ๊ฒฝ๋ก๋ฅผ ๊ทธ๋ฃนํํ๋ค.์ด๋ฌํ ๊ทธ๋ฃน์ ์ด๋ฆ..
2024.10.16 -
- [React.js] ์ผ๋ฐ CSS์ CSS Module ๋น๊ต
์ผ๋ฐ CSS์ CSS Module ๋น๊ต๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ CSS Module๊ณผ ์ผ๋ฐ CSS์ ์ฐจ์ด์ ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค.๋ ๋ฐฉ์์ ํฐ ์ฐจ์ด์ ์ CSS ํด๋์ค์ ๋ฒ์(Scope)์ ์ด๋ฆ ์ถฉ๋ ๋ฐฉ์ง์ด๋ค ์ผ๋ฐ CSS ๋ฐฉ์์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ CSS๋ ์ ์ญ์ ์ผ๋ก ๋์ํ๋ค.์คํ์ผ ์ํธ์์ ์ ์๋ ํด๋์ค ์ด๋ฆ์ด ํ๋ก์ ํธ์ ๋ชจ๋ ์ปดํฌ๋ํธ์ ์ํฅ์ ๋ฏธ์น ์ ์๋ค.๋ชจ๋ ์ปดํฌ๋ํธ๋ ๊ฐ์ CSS ํ์ผ์ ์ฐธ์กฐํ ์ ์๊ณ , ํด๋์ค ์ด๋ฆ์ด ๊ฒน์น๋ฉด ์คํ์ผ์ด ๋ฎ์ด์์์ง ๊ฐ๋ฅ์ฑ์ด ์๋ค. HomePage.css.button { background-color: blue; color: white;} HomePage.jsximport './HomePage.css';const HomePage = () => { return (..
2024.10.16 -
- [Redis] CCI Cake
CCI Cake๋ค์ด๊ฐ๋ฉฐRedis๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ง๋ค์ด์ง CCI Cake์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. CCI Cake๊ฐ๋ ์ค์๊ฐ ๋ฐ์ดํฐ ํ์คํ ๋ฆฌ์ธ(Historian)๊ณผ ์๊ฐํ ๋๊ตฌ๋ก, Redis๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ง๋ค์ด์ง ํ๋ก๊ทธ๋จ์ฃผ๋ก ์ฐ์ , ์ ์กฐ, ์๋์ง ๋ถ์ผ์์ ์ค์๊ฐ ๋ฐ ๊ณผ๊ฑฐ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋๋ฐ ์ฌ์ฉ๋๋ค.๋ฐฉ๋ํ ์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ , ๋น ๋ฅด๊ฒ ๊ฒ์ํ์ฌ ๋ถ์ํ ์ ์๋ค.10๋ฐฑ๋ง ํ๊ทธ ์ด์์ ์ ์ฅ ๊ฐ๋ฅํ๋ฉฐ, ์ด๋น 50๋ฐฑ๋ง ํ๊ทธ ์ด์์ ์ฒ๋ฆฌํ ์ ์๋ค.1,000๋ช ์ด์ ๋์ ์ ์ ์์๋ ์๋ ์ ํ๊ฐ ์๋ค.http://sfsi.co.kr/OTIT-solution/?bmode=view&idx=2525997ํ์ด์ฌ(Python) ๊ธฐ๋ฐ์ ์คํฌ๋ฆฝํ ํ๊ฒฝ์ ์ ๊ณตํ์ฌ, NumPy ๊ฐ์ ๋ฐ์ดํฐ ๋ถ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ ์ ์๋ค.E..
2024.10.15 -
- [Redis] Redis(Remote Dictionary Server)
Redis(Remote Dictionary Server)๋ค์ด๊ฐ๋ฉฐ์ค์๊ฐ ๋ฐ์ดํฐ(Real Time Data)๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ฌ์ฉํ ์ ์๋ ํ๋ซํผ์ธ Redis(Remote Dictionary Server)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Redis(Remote Dictionary Server)๊ฐ๋ 'ํค-๊ฐ' ๊ตฌ์กฐ์ ๋น์ ํ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ๊ด๋ฆฌํ๊ธฐ ์ํ ์คํ ์์ค ๊ธฐ๋ฐ์ ๋น๊ด๊ณํ ๋ฐ์ดํฐ๋ฒ ์ด์ค ๊ด๋ฆฌ ์์คํ (DBMS)๊ณ ์ฑ๋ฅ์ ์ธ๋ฉ๋ชจ๋ฆฌ(In-memory) ๋ฐ์ดํฐ ๊ตฌ์กฐ ์คํ ์ด์ฃผ๋ก ๋ฐ์ดํฐ๋ฒ ์ด์ค, ์บ์, ๋ฉ์์ง ๋ธ๋ก์ปค๋ก ์ฌ์ฉ๋๋ฉฐ, ๋ค์ํ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์ง์ํ๋ค.2009๋ ์ด๋ฐํ ๋ฅด ์ฐํ๋ฆฌํฌ(Salvatore Sanfilippo)๊ฐ ์ฒ์ ๊ฐ๋ฐํ๋ค. ํน์ง๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฉ๋ชจ๋ฆฌ(RAM)์ ์ ์ฅํ๋ค. ๋ฐ๋ผ์ ๋งค์ฐ ๋น ๋ฅด๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ณ ์ธ ..
2024.10.15 -
- [Git] git push ์ทจ์ํ๋ ๋ฐฉ๋ฒ
git push ์ทจ์ํ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐ๊น(Git)์์ @push@๋ฅผ ํ ํ, ์ทจ์ํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ์ต๊ทผ์ ํธ์ํ ์ปค๋ฐ ์ทจ์ํ๊ธฐ๋ง์ง๋ง ์ปค๋ฐ์ ์ญ์ ํ๋ ๋ช ๋ น์ด๋ค.ํ์ง๋ง ์์ ๋๋ ํฐ๋ฆฌ์ ๋ณ๊ฒฝ ์ฌํญ์ ๊ทธ๋๋ก ์ ์ง๋๋ค.$ git reset --soft HEAD^ ๋ง์ฝ, ์์ ๋๋ ํฐ๋ฆฌ์ ๋ณ๊ฒฝ ์ฌํญ์ ์ด๊ธฐํํ๋ ค๋ฉด ์๋์ ๋ช ๋ น์ ์คํํ๋ค.$ git reset --hard HEAD^ @--hard@ ์ต์ ์ ์ด์ฉํ์ฌ ๋ฆฌ์ ํ ๊ฒฝ์ฐ, ์์ ๋๋ ํฐ๋ฆฌ์ ๋ณ๊ฒฝ ์ฌํญ์ด ์ด๊ธฐํ๋๋ค. (๋ณ๊ฒฝ๋ ๋ด์ฉ์ด ๋ชจ๋ ์ฌ๋ผ์ง๋ค.) ์๊ฒฉ ์ ์ฅ์์ ์ด ๋ณ๊ฒฝ ์ฌํญ์ ๊ฐ์ ๋ก ๋ฐ์ํ๊ณ ์ ํ ๊ฒฝ์ฐ, ์๋ ๋ช ๋ น์ ์คํํ๋ค.$ git push --force ์ฐธ๊ณ ๋๋ ๋ค์๊ณผ ๊ฐ์ด @HEAD@ ํค์๋๋ฅผ ์ด์ฉํ์ฌ ์ทจ์ํ ์ ์๋ค.# ๋ก์ปฌ ๋ธ๋์น๋ฅผ ์ด์ ์ปค๋ฐ์ผ..
2024.10.15 -
- [PyQt] self.function(param)๊ณผ function(self, param)์ ์ฐจ์ด์
self.function(param)๊ณผ function(self, param)์ ์ฐจ์ด์ ๋ค์ด๊ฐ๋ฉฐPyQt๋ฅผ ์ด์ฉํ์ฌ ๊ฐ๋ฐ์ ํ ๋, ์ธ์ @self.function(param)@ ๋๋ @function(self, param)@๋ฅผ ์จ์ผํ ์ง ํท๊ฐ๋ฆด ๋๊ฐ ์๋ค.์ด ๋์ ์ฐจ์ด์ ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. self๊ฐ๋ ํ์ด์ฌ ํด๋์ค์ ์ธ์คํด์ค ๋ฉ์๋์์ ํ์ฌ ๊ฐ์ฒด ์์ ์ ์ฐธ์กฐํ๊ธฐ ์ํ ์ฒซ ๋ฒ์งธ ๋งค๊ฐ๋ณ์ํด๋์ค์ ์ธ์คํด์ค(๊ฐ์ฒด) ์์ ์ ์ฐธ์กฐํ๋ ๋ณ์ํด๋์ค ๋ด์์ ์ ์๋ ๋ฉ์๋๊ฐ ํธ์ถ๋ ๋ ์๋์ผ๋ก ํด๋น ๋ฉ์๋๊ฐ ์ํ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค๋๋ก ํ๋ค.ํด๋์ค์ ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ(OOP)์์ ๋งค์ฐ ์ค์ํ ๊ฐ๋ ๋ฉ์๋ ๋ด์์ ๊ฐ์ฒด์ ์์ฑ์ด๋ ๋ค๋ฅธ ๋ฉ์๋์ ์ ๊ทผํ ๋ ์ฌ์ฉ @self@๋ ๋ฉ์๋ ๋ด์์ ๊ฐ์ฒด์ ์์ฑ๊ณผ ๋ค๋ฅธ ๋ฉ์๋์ ์ ๊ทผํ ์ ์..
2024.10.12