์ ์ฒด ๊ธ
-
- [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 ํธ์ํ ์ปค๋ฐ ์ค, ํน์ ์ปค๋ฐ๋ง ์ทจ์ํ๊ธฐ$ git revert abc123์๊ฒฉ ์ ์ฅ์์ ์ฌ๋ฌ ์ปค๋ฐ์..
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 -
- [TypeScript] ํด๋์ค(Class)
ํด๋์ค(Class)๋ค์ด๊ฐ๋ฉฐํ์ ์คํฌ๋ฆฝํธ(TypeScript)์์ ์ฌ์ฉํ ์ ์๋ ํด๋์ค(Class)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ํด๋์ค(Class)๊ฐ๋ ๊ฐ์ฒด(Object)๋ฅผ ์์ฑํ๊ธฐ ์ํ ์ค๊ณ๋(Blueprint)๋ฐ์ดํฐ๋ฅผ ์บก์ํํ๊ณ , ๊ทธ ๋ฐ์ดํฐ๋ฅผ ์กฐ์ํ๋ ๋ฉ์๋๋ฅผ ํฌํจํ์ฌ ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ(OOP, Object Oriented Programming) ํจํด์ ๋ฐ๋ฅธ๋ค.์์(Inheritance)๋ฅผ ์ง์ํ๋ฉฐ, ๋ณต์กํ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์ฝ๊ฒ ์์ฑํ ์ ์๋ค. ํด๋์ค์ ์์ฑ์(Contructor)ํด๋์ค์์ ์์ฑ์(Constructor)๋ ์ ์ธ์คํด์ค๋ฅผ ์์ฑํ ๋ ํธ์ถ๋๋ ํน๋ณํ ๋ฉ์๋์ด๋ค.์์ฑ์๋ ๋ณดํต ๊ฐ์ฒด์ ์ด๊ธฐ ์ํ๋ฅผ ์ค์ ํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.class Book { // ํด๋์ค ์์ฑ ์ ์ธ title: string; au..
2024.10.12 -
- [TypeScript] ์ ๋ค๋ฆญ(Generic)
์ ๋ค๋ฆญ(Generic)๋ค์ด๊ฐ๋ฉฐํ์ ์คํฌ๋ฆฝํธ(TypeScript)์ ์ ๋ค๋ฆญ(Generic)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ์ ๋ค๋ฆญ(Generic)๊ฐ๋ ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ์ ๋์ด๊ณ ๋ค์ํ ํ์ ์ ๋ํด ๋์ํ ์ ์๊ฒ ํด์ฃผ๋ ๊ธฐ๋ฅ์ ๋ค๋ฆญ์ ์ฌ์ฉํ๋ฉด ํ์ ์ ์ฐ์ ํน์ ํ์ง ์๊ณ , ๋์ค์ ์ฌ์ฉํ ๋ ๊ทธ ํ์ ์ ์ง์ ํ ์ ์๋ค.๋ํ, ํ์ ์ถ๋ก ์ด ๋ ๊ฐํ๋๊ณ , ๋ฐ๋ณต์ ์ธ ํ์ ์ฝ๋๋ฅผ ์ค์ผ ์ ์๋ค.ํจ์, ํด๋์ค, ์ธํฐํ์ด์ค, ํ์ ๋ฑ์ ์ ๋ค๋ฆญ์ ์ ์ฉํ ์ ์๋ค. ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ๋ค๋ฆญ์ ์ฌ์ฉํ ๋๋ ํ์ ๋งค๊ฐ๋ณ์(Type Parameter)๋ฅผ ์ ์ํ๋ค.๋ณดํต @@์ ๊ฐ์ ํ์์ผ๋ก ์ฌ์ฉํ๋ฉฐ, ์ํ๋ ์ด๋ฆ์ ์ง์ ํ๋ฉด ๋๋ค.@T@, @K@, @U@ ๋ฑ์ด ๊ด์ต์ ์ธ ์ด๋ฆ์ผ๋ก ์ฐ์ธ๋ค. ์์ ์ฝ๋ 1 : ํจ์์์ ์ ๋ค๋ฆญ ์ฌ์ฉํ๊ธฐ@identity@ ํจ์๋ ์ ๋ ฅ๋ฐ..
2024.10.12 -
- [TypeScript] ์ธํฐํ์ด์ค(Interface)
์ธํฐํ์ด์ค(Interface)๋ค์ด๊ฐ๋ฉฐํ์ ์คํฌ๋ฆฝํธ(TypeScript)์ ์ธํฐํ์ด์ค(Interface) ํ์ ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ์ธํฐํ์ด์ค(Interface)๊ฐ๋ ๊ฐ์ฒด์ ๊ตฌ์กฐ๋ฅผ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ ํ์ ๊ฐ์ฒด๊ฐ ๊ฐ์ ธ์ผ ํ ์์ฑ, ๊ทธ ์์ฑ์ ํ์ , ๊ทธ๋ฆฌ๊ณ ๋ฉ์๋๋ฅผ ์ง์ ํ ์ ์๋ค.์๋ฐ์คํฌ๋ฆฝํธ์๋ ์กด์ฌํ์ง ์์ผ๋ฉฐ, ํ์ ์คํฌ๋ฆฝํธ์์ ์ฌ์ฉ ๊ฐ๋ฅํ๋ค.์ฝ๋์ ๊ฐ๋ ์ฑ ๋ฐ ์ ์ง๋ณด์๋ฅผ ์ฝ๊ฒ ํ๊ณ , ํ์ ์์ ์ฑ์ ๋์ฌ์ค๋ค. ์ฃผ์ ๊ธฐ๋ฅ๊ฐ์ฒด๊ฐ ํน์ ์์ฑ๋ค์ ๋ฐ๋์ ๊ฐ์ง๊ณ ์์ด์ผ ํ๋ ๊ตฌ์กฐ๋ฅผ ์ ์ํ ์ ์๋ค.ํน์ ์์ฑ์ ์ ํ์ ์ผ๋ก ํฌํจ๋ ์ ์๋๋ก ์ ์ํ ์ ์๋ค.์) @age?: number;@ํจ์์ ๋งค๊ฐ๋ณ์์ ๋ฐํ๊ฐ์ ํ์ ๋ ์ธํฐํ์ด์ค๋ก ์ ์ํ ์ ์๋ค.ํด๋์ค๋ ์ธํฐํ์ด์ค๋ฅผ @implements@ ํค์๋๋ฅผ ํตํด ๊ตฌํํ ์ ์๋ค...
2024.10.12 -
- [TypeScript] Zod ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Zod ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐํ์ ์คํฌ๋ฆฝํธ(TypeScript)์์ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ฝ๊ฒ ํด์ฃผ๋ Zod ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Zod ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ๋ ํ์ ์คํฌ๋ฆฝํธ(TypeScript)์์ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ฝ๊ฒ ํด์ฃผ๋ ์คํค๋ง ์ ์ธ ๋ฐ ๋ฐ์ดํฐ ๊ฒ์ฆ ๋ผ์ด๋ธ๋ฌ๋ฆฌํ์ ์์ ์ฑ์ ์ ์งํ๋ฉด์ ๋ฐ์ดํฐ์ ์ ํจ์ฑ์ ๊ฒ์ฌํ ์ ์๋๋ก ์ค๊ณ๋์ด ์๋ค.๋ฐ์ดํฐ ๊ฒ์ฆ์ ๋์ฑ ๋ช ํํ๊ณ ์ง๊ด์ ์ผ๋ก ์ํํ ์ ์๋๋ก ๋์์ค๋ค. ์ค์น$ npm install zod # yarn add zod ์ฃผ์ ๊ธฐ๋ฅ๋ค์ํ ๋ฐ์ดํฐ ํ์ ์ ๋ํด ์คํค๋ง๋ฅผ ์ ์ธํ ์ ์๋ค.import { z } from "zod";const userSchema = z.object({ name: z.string(), age: z.number(), email: z.string()..
2024.10.11 -
- [TypeScript] ํ์ ๊ฐ๋(Type Guard)
ํ์ ๊ฐ๋(Type Guard)๋ค์ด๊ฐ๋ฉฐํ์ ์คํฌ๋ฆฝํธ(TypeScript)์ ํ์ ๊ฐ๋(Type Guard)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ํ์ ๊ฐ๋(Type Guard)๊ฐ๋ ํ์ ์คํฌ๋ฆฝํธ์์ ๋ณ์์ ํ์ ์ ์ขํ๋ ๋ฐฉ๋ฒ์ฃผ๋ก ์กฐ๊ฑด๋ฌธ(Conditional Statement)์ ์ฌ์ฉํ์ฌ ํน์ ํ์ ์์ ํ์ธํ ํ, ํด๋น ํ์ ์ ๋ง๋ ์์ ํ ์์ ์ ์ํํ ์ ์๋๋ก ๋์์ค๋ค.ํ์ ๊ฐ๋๋ฅผ ์ฌ์ฉํ๋ฉด ์ปดํ์ผ ์์ ์ ํ์ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํ๊ณ , ์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์์ ์ฑ์ ๋์ผ ์ ์๋ค.ํ์ ๊ฐ๋๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ฉด ๋ฐํ์ ์ค๋ฅ๋ฅผ ์ค์ด๊ณ , ๊ฐ๋ฐ ๊ณผ์ ์์ ํ์ ๊ด๋ จ ๋ฒ๊ทธ๋ฅผ ๋ฏธ๋ฆฌ ๋ฐฉ์งํ ์ ์์ผ๋ฉฐ, ์ฝ๋์ ์๋๋ฅผ ๋ช ํํ๊ฒ ํํํ์ฌ ํ์ ์ ๊ฐ๋ ์ฑ์ ๋์ด๋ ๋ฐ ํฐ ๋์์ด ๋๋ค. ํ์ ๊ฐ๋๋ ๋ฐํ์์์ ๋ณ์์ ํ์ ์ ํ์ธํ์ฌ ํ์ ์คํฌ๋ฆฝํธ์๊ฒ ํด๋น ๋ณ์..
2024.10.10 -
- [TypeScript] ๋ชจ๋ ๋ฐฉ์ ์ฌ์ฉํ๊ธฐ
๋ชจ๋ ๋ฐฉ์ ์ฌ์ฉํ๊ธฐ๋ค์ด๊ฐ๋ฉฐํ์ ์คํฌ๋ฆฝํธ(TypeScript)์์ ๋ชจ๋ ๋ฐฉ์์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒํ์ ์คํฌ๋ฆฝํธ ํ์ผ(@.ts@/@.tsx@)์ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋(Module)๋ก ๊ฐ์ฃผ๋์ง ์๊ณ , ์ ์ญ ๋ฒ์์ ์คํฌ๋ฆฝํธ๋ก ์ฒ๋ฆฌ๋๋ค.์ฌ๋ฌ ํ์ผ์์ ๋์ผํ ๋ณ์๋ช ์ ์์ฑํ ๊ฒฝ์ฐ, ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.fileA.tslet name = 'stickman';const susan = 'susan'; fileB.tsconst susan = 'susan'; // ์ค๋ฅ ๋ฐ์ ์ด๋, ๋ค์๊ณผ ๊ฐ์ด 2๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ํ์ ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ชจ๋๋ก ๋ณํํ ์ ์๋ค. ๋ฐฉ๋ฒ โ : @import@, @export@ ๋ฌธ ์ฌ์ฉํ๊ธฐํ์ ์คํฌ๋ฆฝํธ ํ์ผ์ @import@ ๋๋ @export@ ๋ฌธ์ ์ถ๊ฐํ์ฌ ES6 ๋ชจ๋๋ก ์ทจ๊ธ๋๊ฒ ํ๋ ๋ฐฉ๋ฒ์ด๋ค. ..
2024.10.10 -
- [TypeScript] ์ธํฐํ์ด์ค(Interface)์ ํ์ ๋ณ์นญ(Type Alias) ๋น๊ต
์ธํฐํ์ด์ค(Interface)์ ํ์ ๋ณ์นญ(Type Alias) ๋น๊ต๋ค์ด๊ฐ๋ฉฐ์ธํฐํ์ด์ค(Interface)์ ํ์ ๋ณ์นญ(Type Alias)์ ํ์ ์คํฌ๋ฆฝํธ์์ ํ์ ์ ์ ์ํ๋ ๋ฐฉ๋ฒ์ด๋ค.ํ์ ์คํฌ๋ฆฝํธ(TypeScript)์์ ์ธํฐํ์ด์ค(Interface)์ ํ์ ๋ณ์นญ(Type Alias)์ ์ฐจ์ด์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ์ธํฐํ์ด์ค(Interface)๊ฐ๋ ์ธํฐํ์ด์ค๋ ์ฃผ๋ก ๊ฐ์ฒด(Object)์ ๊ตฌ์กฐ๋ฅผ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.์ฃผ๋ก ๊ฐ์ฒด์ ์์ฑ๊ณผ ๋ฉ์๋๋ฅผ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.์ธํฐํ์ด์ค๋ฅผ ๊ตฌํํ๋ ๊ฐ์ฒด๋ ํด๋น ์ธํฐํ์ด์ค์์ ์๊ตฌํ๋ ์์ฑ์ด๋ ๋ฉ์๋๋ฅผ ๋ฐ๋์ ํฌํจํด์ผ ํ๋ค.์ฝ๋์์ ๊ฐ์ฒด์ ๊ตฌ์กฐ๋ฅผ ๋ช ํํ๊ฒ ์ ์ํ๊ณ , ๋ค๋ฅธ ์ฝ๋์์ ํด๋น ๊ตฌ์กฐ๋ฅผ ๋ฐ๋ฅด๋๋ก ๊ฐ์ ํ ๋ ์ ์ฉํ๋ค.@interface@ ํค์๋๋ฅผ ์ด์ฉํ์ฌ ์์ฑํ ์ ์๋ค...
2024.10.09 -
- [React.js] caseReducers ์์ฑ (Redux Toolkit)
caseReducers (Redux Toolkit) ์์ฑ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ๋์ค ํดํท(Redux Toolkit)์ @caseReducers@ ์์ฑ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค.์ด ์์ฑ์ ์ด์ฉํ๋ฉด ์ฌ๋ผ์ด์ค ๋ด์ ๊ฐ๋ณ ๋ฆฌ๋์ ํจ์์ ์ง์ ์ ๊ทผํ๊ณ ํธ์ถํ ์ ์๋ค. createSlice() ํจ์์ caseReducers ์์ฑcreateSlice() ํจ์์ฌ๋ผ์ด์ค(Slice)๋ฅผ ์ ์ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.์ฌ๋ผ์ด์ค๋ ํน์ ์ํ(State)์ ๊ทธ ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ ๋ฆฌ๋์(Reducer)๋ค์ ํ ๊ณณ์ ๋ชจ์๋์ ๊ฒ์ด๋ค.์ฌ๋ผ์ด์ค๋ ์๋์ผ๋ก ์ก์ ์์ฑ์(Action Creators)์ ์ก์ ํ์ (Action Types)์ ์์ฑํด์ค๋ค.reducers ์ต์ @createSlice@ ํจ์์ @reducers@ ์ต์ ์ ์ฌ๋ผ์ด์ค์ ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ ์ฌ๋ฌ ๊ฐ์ ๋ฆฌ..
2024.10.03 -
- [React.js] URL์ ํ๋ฆฌ๋ฏธํฐ(Parameter) ๊ฐ ๊ฐ์ ธ์ค๊ธฐ
URL์ ํ๋ฆฌ๋ฏธํฐ(Parameter) ๊ฐ ๊ฐ์ ธ์ค๊ธฐ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ URL์ ํ๋ผ๋ฏธํฐ(Parameter) ๊ฐ์ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ํ๋ผ๋ฏธํฐ(Parameter)๊ฐ๋ URL ๊ฒฝ๋ก์ ์ผ๋ถ๋ถ์ผ๋ก, ์ฃผ๋ก ํน์ ๋ฆฌ์์ค๋ฅผ ์๋ณํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.RESTful API ์ค๊ณ์์ ํํ ์ฌ์ฉ๋๋ฉฐ, ๋ฆฌ์์ค์ ๊ณ ์ ์๋ณ์๋ฅผ ๋ํ๋ธ๋ค.URL ํ๋ผ๋ฏธํฐ๋ฅผ ์ฌ์ฉํ๋ฉด ๋์ ์ธ ๊ฒฝ๋ก๋ฅผ ์์ฑํ ์ ์์ด, ๋ค์ํ ๋ฆฌ์์ค์ ๋ํด ๋์ผํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉํ ์ ์๋ค. ์ข ๋ฅ์ข ๋ฅ์ค๋ช ๊ฒฝ๋ก ํ๋ผ๋ฏธํฐ(Path Parameter)- ํน์ ๋ฆฌ์์ค๋ฅผ ์๋ณํ๋ ๋ฐ ์ฌ์ฉ- ์: @/users/:userId@์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ(Query Parameter)- URL์ @?@ ๋ค์ ์์นํ๋ฉฐ, @ํค-๊ฐ@ ์์ผ๋ก ๋ค์ํ ์ต์ ์ ์ ๋ฌํ๋ค.- ์) @?sea..
1 2024.10.02 -
- [Tailwind CSS] daisyUI ํ ๋ง ์ค์ ํ๊ธฐ
daisyUI ํ ๋ง ์ค์ ํ๊ธฐ ๋ค์ด๊ฐ๋ฉฐํ ์ผ์๋ CSS์ ํ์ฅ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ daisyUI๋ฅผ ์ด์ฉํ์ฌ ํ์ด์ง์ ํ ๋ง(Theme)๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒํ ๋ง ๊ณ ๋ฅด๊ธฐdasiyUI์ ๊ณต์ ๋ฌธ์์์ ์ํ๋ ํ ๋ง๋ฅผ ์ ํํ๋ค. daisyUI themes — Tailwind CSS Components ( version 4 update is here )How to use daisyUI themes?daisyui.com ์ด ํ์ด์ง์์๋ ๋๋ผํ๋ผ ํ ๋ง(@dracula@)๋ฅผ ์ ํํ๋ค๊ณ ๊ฐ์ ํ๋ค. ํ ์ผ์๋ CSS ์ค์ ํ์ผ์ ์ถ๊ฐํ๊ธฐํ ์ผ์๋ CSS ์ค์ ํ์ผ์ธ @tailwind.config.js@ ํ์ผ์ ์๋์ ํ ๋ง ์์ฑ์ ์ถ๊ฐํด์ค๋ค../tailwind.config.js/** @type {import('tailwind..
2024.10.01 -
- [React.js] index.js๋ก ์ปดํฌ๋ํธ(Component), ํ์ด์ง(Page) ๊ด๋ฆฌํ๊ธฐ
index.js๋ก ์ปดํฌ๋ํธ(Component), ํ์ด์ง(Page) ๊ด๋ฆฌํ๊ธฐ๋ค์ด๊ฐ๋ฉฐ๋ค์๊ณผ ๊ฐ์ด @src@ ํด๋ ๋ด๋ถ์ ์๋ @components@, @pages@ ํด๋ ์์ @index.js@ ํ์ผ์ ์์ฑํ์ฌ ์ฌ๋ฌ ์ปดํฌ๋ํธ์ ํ์ด์ง๋ค์ ํ๋์ ํ์ผ์์ ๊ด๋ฆฌํ ์ ์๋ค.์ด์ ๊ด๋ จ๋ ๋ด์ฉ์ ์ ๋ฆฌํด๋ณธ๋ค. index.js๊ฐ๋ ๋ฆฌ์กํธ(React.js) ํ๋ก์ ํธ์์ @pages@๋ @components@ ํด๋ ์์ ์์นํ @index.js@ ํ์ผ์ ํด๋น ํด๋ ๋ด์ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ค์ ํ ๊ณณ์์ ์ฝ๊ฒ ๋ถ๋ฌ์ฌ ์ ์๋๋ก ๋ค์ @export@ ํด์ฃผ๋ ์ญํ ์ ํ๋ค.@index.js@ ํ์ผ ์์ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ์ด ๊ตฌ์ฑํ ์ ์๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒ@pages@ ๋๋ @components@ ํด๋์ @index.js@ ํ์ผ์ ์์ฑํ ํ,..
2024.10.01 -
- [Tailwind CSS] ํ ์ผ์๋ ์ค์ ํ์ผ(tailwind.config.js)์์ ํ๋ฌ๊ทธ์ธ(Plugin) ์ถ๊ฐํ ๋ "'require' is not defined" ์ค๋ฅ๊ฐ ๋ฐ ๋ ํด๊ฒฐ๋ฒ
ํ ์ผ์๋ ์ค์ ํ์ผ(tailwind.config.js)์์ ํ๋ฌ๊ทธ์ธ(Plugin) ์ถ๊ฐํ ๋ "'require' is not defined" ์ค๋ฅ๊ฐ ๋ฐ ๋ ํด๊ฒฐ๋ฒ๋ค์ด๊ฐ๋ฉฐํ ์ผ์๋ ์ค์ ํ์ผ(@tailwind.config.js@)์์ @require@๋ฅผ ์ด์ฉํ์ฌ ํ๋ฌ๊ทธ์ธ(Plugin)์ ์ถ๊ฐํ ๋, @'require' is not defined@ ์ค๋ฅ๊ฐ ๋ฐ์ํ ๋ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ๊ฐ๋จํ๋ค. ํ๋ก์ ํธ ์ต์๋จ ๊ฒฝ๋ก์ ์๋ ESLint ์ค์ ํ์ผ(@eslint.config.js@)์ ๋ค์๊ณผ ๊ฐ์ด ํ๊ฒฝ ๋ณ์(@env@) ์กฐ๊ฑด์ ์ถ๊ฐํด์ฃผ๋ฉด ๋๋ค. ./eslint.config.js{ // ... env: { browser: true, node: true, // ์ถ..
2024.09.29 -
- [Tailwind CSS] daisyUI
daisyUI๋ค์ด๊ฐ๋ฉฐํ ์ผ์๋ CSS์ ํ์ฅ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ dasiyUI์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. daisyUI๊ฐ๋ ํ ์ผ์๋ CSS๋ฅผ ํ์ฅํ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ํ ๊ธฐ๋ณธ ์คํ์ผ์ ์ ๊ณตํ์ฌ ๋น ๋ฅด๊ฒ UI๋ฅผ ๊ตฌ์ฑํ ์ ์๋๋ก ๋์์ค๋ค.ํ ์ผ์๋ CSS์ ์ ํธ๋ฆฌํฐ ํด๋์ค์ ํจ๊ป ์ฌ์ฉ๋๋ค.๋ฒํผ, ์นด๋, ๋ชจ๋ฌ, ์๋ฆผ, ํผ ์์ ๋ฑ ์ฌ๋ฌ ๊ฐ์ง ์ปดํฌ๋ํธ ์คํ์ผ์ ๋ฏธ๋ฆฌ ์ ์ํด ๋ ์ํ๋ก ์ ๊ณตํ๋ค.daisyUI๋ฅผ ์ด์ฉํ๋ฉด UI๋ฅผ ์ฝ๊ฒ ์ปค์คํฐ๋ง์ด์งํ๊ณ , ์ผ๊ด์ฑ ์๋ ๋์์ธ์ ์ ์งํ๋ฉด์ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐํ ์ ์๋ค. ํน์งํ ์ผ์๋ CSS์ ์๋ฒฝํ๊ฒ ํธํ๋๋ฉฐ, ์ถ๊ฐ์ ์ธ ์คํ์ผ๋ง ์์ด ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฌ์ฉํ ์ ์๋ค.์ผ๊ด๋ ๋์์ธ ์์คํ ์ ๊ธฐ๋ฐ์ผ๋ก ํ๊ธฐ ๋๋ฌธ์, ํ๋ก์ ํธ ์ ๋ฐ์ ๊ฑธ์ณ ์ผ๊ด๋ UI๋ฅผ ์ ์งํ ์ ์๋ค.๋ฒํผ, ์๋ฆผ, ๋ชจ๋ฌ, ์นด๋ ๋ฑ..
1 2024.09.29 -
- [React.js] Thunk API (Redux Toolkit)
Thunk API (Redux Toolkit)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ๋์ค ํดํท(Redux Toolkit)์ Thunk API์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Thunk API๊ฐ๋ ๋น๋๊ธฐ ์์ ์ ๊ฐํธํ๊ฒ ์ฒ๋ฆฌํ ์ ์๋ ๋๊ตฌ๋ก, ์ฌ๋ฌ๊ฐ์ง ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.์ฃผ๋ก API ํธ์ถ๊ณผ ๊ฐ์ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํ ๋ ์ฌ์ฉ๋๋ฉฐ, ์ก์ (Action)์ ๋์คํจ์น(Dispatch)ํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ๋ฅผ ๊ด๋ฆฌํ ์ ์๋ค. ๊ตฌ์ฑ๊ธฐ๋ณธ์ ์ผ๋ก 2๊ฐ์ ๋งค๊ฐ๋ณ์๋ฅผ ์ ๊ณตํ๋ค.@dispatch@์ก์ ์ ๋์คํจ์นํ ์ ์๋ ํจ์๋น๋๊ธฐ ์์ ์ ๊ฒฐ๊ณผ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ก์ ์ ๋ณด๋ผ ์ ์๋ค. @getState@ํ์ฌ ์คํ ์ด์ ์ํ(State)๋ฅผ ๊ฐ์ ธ์ค๋ ํจ์์ํ์ ๋ฐ๋ผ ๋ก์ง์ ๋ค๋ฅด๊ฒ ์ฒ๋ฆฌํ ์ ์๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒ@createAsyncThunk@๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ ์ก์ ํฌ๋ฆฌ์์ดํฐ๋ฅผ ์์ฑ..
1 2024.09.28 -
- [Tailwind CSS] ์์ฃผ ์ฌ์ฉ๋๋ ํ ์ผ์๋ CSS ํด๋์ค ์ ๋ฆฌ
์์ฃผ ์ฌ์ฉ๋๋ ํ ์ผ์๋ CSS ํด๋์ค ์ ๋ฆฌ๋ค์ด๊ฐ๋ฉฐํ ์ผ์๋(Tailwind) CSS์์ ์์ฃผ ์ฌ์ฉ๋๋ ํด๋์ค๋ค์ ์ ๋ฆฌํด๋ณธ๋ค. ์์ฃผ ์ฌ์ฉ๋๋ ํด๋์ค๋ค๋ ์ด์์(Layout)container: ๋ฐ์ํ ์ปจํ ์ด๋๋ฅผ ์ค์ mx-auto: ์ํ ์ค์ ์ ๋ ฌflex: Flexbox ์ปจํ ์ด๋ ์์ฑgrid: ๊ทธ๋ฆฌ๋ ๋ ์ด์์ ์ค์ space-x-*: ์์ ์์ ๊ฐ์ ๊ฐ๋ก ๊ฐ๊ฒฉ ์ค์ (์ํ)space-y-*: ์์ ์์ ๊ฐ์ ์ธ๋ก ๊ฐ๊ฒฉ ์ค์ (์์ง) ์ ๋ ฌ(Alignment)text-center: ํ ์คํธ๋ฅผ ์ค์ ์ ๋ ฌitems-center: Flexbox ๋๋ Grid์์ ์์๋ฅผ ์์ง ์ค์ ์ ๋ ฌjustify-center: Flexbox ๋๋ Grid์์ ์์๋ฅผ ์ํ ์ค์ ์ ๋ ฌ ๊ฐ๊ฒฉ(Spacing)p-*: ์ ์ฒด ํจ๋ฉ ์ ์ฉpx-*: ์ข์ฐ..
2024.09.27 -
- [Tailwind CSS] Tailwind CSS
Tailwind CSS๋ค์ด๊ฐ๋ฉฐํ ์ผ์๋(Tailwind) CSS์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Tailwind CSS๊ฐ๋ ์ ํธ๋ฆฌํฐ ์ฐ์ CSS ํ๋ ์์ํฌ๋ฏธ๋ฆฌ ์ ์๋ CSS ํด๋์ค๋ฅผ ์ฌ์ฉํ์ฌ ๋น ๋ฅด๊ฒ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ ์ ์๋๋ก ๋์์ค๋ค.์ ํต์ ์ธ CSS ํ๋ ์์ํฌ์ ๋ฌ๋ฆฌ, ๊ตฌ์ฑ ์์๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์์ฑ๋ ์คํ์ผ์ด ์๋๋ผ, ๊ฐ ์คํ์ผ ์์ฑ์ ๋ํ ํด๋์ค(์ ํธ๋ฆฌํฐ ํด๋์ค)๋ฅผ ์ ๊ณตํ๋ค.๊ฐ๋ฐ์๋ ์์ ์ ๋์์ธ์ ๋ง๊ฒ ํด๋์ค๋ฅผ ์กฐํฉํ์ฌ ์ํ๋ ์คํ์ผ์ ์ฝ๊ฒ ์ ์ฉํ ์ ์๋ค. ํน์ง ๋ค์ํ ์คํ์ผ ์์ฑ์ ์ ์ดํ ์ ์๋ ํด๋์ค๋ฅผ ์ ๊ณตํ๋ค.์) @bg-blue-500@ : ๋ฐฐ๊ฒฝ์์ ํ๋์์ผ๋ก ์ค์ CSS์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ๋ชจ๋ํ๋ฅผ ๊ฐ์กฐํ๋ค.ํด๋์ค ์ด๋ฆ์ด ์๋ฏธ๋ฅผ ๊ฐ์ง๋ฏ๋ก, ๋ค๋ฅธ ํ๋ก์ ํธ์์๋ ์ฝ๊ฒ ์ดํดํ๊ณ ์ฌ์ฉํ ์ ์๋ค.๋ฐ์ํ ๋์์ธ..
2024.09.27 -
- [Python] .env ํ์ผ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ
.env ํ์ผ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐํ์ด์ฌ(Python)์์ @.env@ ํ์ผ์ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. .env ํ์ผ๊ฐ๋ ํค(Key)-๊ฐ(Value) ์์ผ๋ก ํ๊ฒฝ ๋ณ์๋ฅผ ์ ์ํ๋ ๊ฐ๋จํ ํ ์คํธ ํ์ผ์ด ํ์ผ์ ์ฌ์ฉํ๋ฉด ์ฝ๋ ๋ด์ ๋ฏผ๊ฐํ ์ ๋ณด๋ฅผ ์ง์ ์์ฑํ์ง ์๊ณ ๋ ํ๊ฒฝ ๋ณ์(Environment Variable)๋ฅผ ์ฝ๊ฒ ๊ด๋ฆฌํ ์ ์๋ค.@.env@ ํ์ผ์ ์ฌ์ฉํ๋ฉด ํ๊ฒฝ ๋ณ์๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ผ๋ฉฐ, ์ฝ๋์ ๋ณด์์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํฌ ์ ์๋ค.API_KEY=your_api_key_hereDATABASE_URL=postgres://user:password@localhost:5432/mydatabaseDEBUG=True ๋ฐฉ๋ฒํจํค์ง ์ค์นํ๊ธฐ@python-dotenv@ ํจํค์ง๊ฐ ์ค์น๋์ด ์์ง ์์ ๊ฒฝ์ฐ ์ค..
2024.09.27 -
- [React.js] ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)
๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ ๋ผ์ฐํ ์ ํ ๋ ๋ง์ด ์ฌ์ฉํ๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router) ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค.v6์ ๊ธฐ์ค์ผ๋ก ์ ๋ฆฌํ์๋ค. ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)๊ฐ๋ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ผ์ฐํ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฆฌ์กํธ ๋ผ์ฐํฐ๋ฅผ ์ฌ์ฉํ๋ฉด, ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์ ํํ ๋ ์ ์ฒด ํ์ด์ง๋ฅผ ์๋ก๊ณ ์นจํ์ง ์๊ณ ๋ URL์ ๋ฐ๋ผ ์๋ก ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ ์ ์๋ค. ๊ตฌ์ฑ ์์BrowserRouterHTML5์ History API๋ฅผ ์ฌ์ฉํ์ฌ URL์ ๊ด๋ฆฌํ๋ค.์ฃผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ต์์ ์ปดํฌ๋ํธ๋ก ์ฌ์ฉ๋๋ค. Routes๊ฐ ๊ฒฝ๋ก์ ๋ํ ๋ผ์ฐํธ๋ฅผ ์ ์ํ๋ ์ปจํ ์ด๋ํ๋ ์ด์์ @Route@๋ฅผ ์์์ผ๋ก ๊ฐ์ง ์ ์๋ค. Ro..
2024.09.26 -
- [React.js] ๋ผ์ฐํ ๊ด๋ จ ๊ธฐ๋ฅ๋ค ์ ๋ฆฌ (React Router) : useNavigate, useNavigation, redirect, useLocation, useParams, useHistory, Navigate
๋ผ์ฐํ ๊ด๋ จ ๊ธฐ๋ฅ๋ค ์ ๋ฆฌ (React Router) : useNavigate, useNavigation, redirect, useLocation, useParams, useHistory, Navigate๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ ๋ผ์ฐํ ์ ์ํด ์ฌ์ฉ๋๋ ๊ด๋ จ ๊ธฐ๋ฅ๋ค์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค.ํ์ด์ง ์ด๋ ๋ฐ ๋ผ์ฐํ ์ ์ํด ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์ ์ฌ๋ฌ ํ ๊ณผ ์ปดํฌ๋ํธ, ํจ์๋ค์ ์ฌ์ฉํ ์ ์๋ค. โ useNavigate()๊ฐ๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router) v6 ์์ ์ ๊ณตํ๋ ํ ํ๋ก๊ทธ๋๋ฐ์ ์ผ๋ก ๋ค๋ฅธ ๊ฒฝ๋ก๋ก ์ด๋ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.์ปดํฌ๋ํธ ๋ด์์ ๋ฒํผ ํด๋ฆญ, ์ด๋ฒคํธ ๋ฐ์ ์ ํน์ ํ์ด์ง๋ก ์ด๋ํ ๋ ์ฌ์ฉํ๋ค. ํน์ง@push@์ @replace@๋ฅผ ์ค์ ํ ์ ์์ด ํ์คํ ๋ฆฌ์ ์ถ๊ฐ..
1 2024.09.26 -
- [React.js] ํผ ๋ฐ์ดํฐ ์ฒ๋ฆฌํ๊ธฐ (React, React Router)
ํผ ๋ฐ์ดํฐ ์ฒ๋ฆฌํ๊ธฐ (React, React Router)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React)์์ ํผ(@@) ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ํผ(Form, @@)๊ฐ๋ HTML์์ ์ฌ์ฉ์ ์ ๋ ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํ๊ณ ์๋ฒ๋ก ์ ์กํ๊ธฐ ์ํ ์์๋ก๊ทธ์ธ, ํ์๊ฐ์ , ๊ฒ์ ๋ฑ ์ฌ์ฉ์ ์ ๋ ฅ์ด ํ์ํ ๊ธฐ๋ฅ์ ๊ตฌํํ ๋ ์ฌ์ฉ๋๋ค. Name: Email: Submit ํน์ง@@ ์์์์ @method@ ์์ฑ์ ์ง์ ํ์ง ์์ ๊ฒฝ์ฐ, ๊ธฐ๋ณธ์ ์ผ๋ก @GET@ ์์ฒญ์ด ์ํ๋๋ค.์ด๋, @@ ์์ ์์ @@์์์ ๊ฐ์ URL์ ์ฟผ๋ฆฌ ๋ฌธ์์ด์ ํฌํจํ์ฌ ์๋ฒ๋ก ์ ์กํ๋ค.์์ฑ์ ๊ฐ์ @POST@๋ก ์ง์ ํ ๊ฒฝ์ฐ, ๋ฐ์ดํฐ๋ฅผ ๋ณธ๋ฌธ์ ํฌํจํ์ฌ ์๋ฒ๋ก ์ ์กํ๋ค.@@ ์์์ @action@ ์์ฑ์ ๊ฐ์ ํผ์ ์ ์ถํ ๋ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ผ ์๋ฒ์ URL์ ..
1 2024.09.26 -
- [VS Code] vscode-icons : ๋ฆฌ์กํธ ์์ด์ฝ ์ ์ฉํ๋ ๋ฐฉ๋ฒ
vscode-icons : ๋ฆฌ์กํธ ์์ด์ฝ ์ ์ฉํ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(VS Code)์ @vscode-icons@ํ์ฅ์ @.jsx@ ํ์ฅ์์ ์์ด์ฝ์ด @.js@ ์์ด์ฝ์ผ๋ก ํ์๋ ๋, ์๋์ผ๋ก ๋ฆฌ์กํธ ์์ด์ฝ์ผ๋ก ํ์๋๊ฒ ํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ@[Ctrl]@ + @[Shift]@ + @[P]@๋ฅผ ๋๋ฅธ ํ, @Command Pallette@๋ฅผ ์คํํ๋ค.@settings@ ๋ฅผ ํ์ดํ ํ ํ, @Preferences: Open User Settings (JSON)@์ ํด๋ฆญํ๋ค.์๋์ ์ฝ๋๋ฅผ ์ถ๊ฐํด์ค๋ค.settings.json{ "vsicons.associations.files": [ { "icon": "reactjs", "extensions"..
2024.09.25 -
- [Information] CMS(Content Management System)
CMS(Content Management System)๋ค์ด๊ฐ๋ฉฐCMS(Content Management System)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. CMS(Content Management System)๊ฐ๋ ์ฝํ ์ธ ๊ด๋ฆฌ ์์คํ ์น์ฌ์ดํธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฝํ ์ธ ๋ฅผ ์์ฑ, ๊ด๋ฆฌ, ์์ , ๋ฐฐํฌํ๋ ๋ฐ ์ฌ์ฉํ๋ ์ํํธ์จ์ด๊ธฐ์ ์ ์ธ ์ง์์ด ์๋ ์ฌ์ฉ์๋ ์ฝ๊ฒ ์น ์ฝํ ์ธ ๋ฅผ ๊ด๋ฆฌํ ์ ์๋๋ก ์ค๊ณ๋์ด ์๋ค.๋ํ์ ์ธ ์๋ก WordPress, Joomla, Drupal ๋ฑ์ด ์๋ค.CMS๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝ๋ฉํ์ง ์๊ณ ๋ ํ ์คํธ, ์ด๋ฏธ์ง, ๋น๋์ค ๋ฑ์ ์ถ๊ฐํ๊ฑฐ๋ ๋ณ๊ฒฝํ ์ ์๋ค. ํน์ง๋น๊ฐ๋ฐ์๋ ์ฝ๊ฒ ์ฝํ ์ธ ๋ฅผ ๊ด๋ฆฌํ ์ ์๋ค.์น์ฌ์ดํธ ๋์์ธ๊ณผ ๋ ์ด์์์ ๋ฏธ๋ฆฌ ์ ์๋ ํ ํ๋ฆฟ์ผ๋ก ์ค์ ํ ์ ์๋ค.๋ค์ํ ๊ธฐ๋ฅ์ ์ถ๊ฐํ ์ ์๋ ํ๋ฌ๊ทธ์ธ๊ณผ ํ์ฅ ๊ธฐ๋ฅ์ ์ง์..
2024.09.25 -
- [React.js] ๋ฌดํ ์คํฌ๋กค(Infinite Scroll), ์ค์ผ๋ ํค(Skeleton) ํจ๊ณผ ์ ์ฉํ๊ธฐ (with React Query)
๋ฌดํ ์คํฌ๋กค(Infinite Scroll), ์ค์ผ๋ ํค(Skeleton) ํจ๊ณผ ์ ์ฉํ๊ธฐ (with React Query)๋ค์ด๊ฐ๋ฉฐReact Query๋ฅผ ์ด์ฉํ์ฌ ๋ฌดํ ์คํฌ๋กค(Infinite Scroll)๊ณผ ์ค์ผ๋ ํค(Skeleton) ํจ๊ณผ๋ฅผ ์ ์ฉํ ์์ ์ฝ๋๋ฅผ ์ฌ๋ ค๋ณธ๋ค.๊ฐ์ธ ๋ฏธ๋ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ๋ง๋ค์๋ ์ฝ๋์ด๋ค.๊ฒ์์ด๋ฅผ ์ ๋ ฅํ๋ฉด, ํด๋น ๊ฒ์์ด์ ๊ด๋ จ๋ ์ด๋ฏธ์ง๋ฅผ ํ์ํ๋ ์ฌ์ดํธUnsplash ๊ณต๊ฐ API๋ฅผ ์ด์ฉํ์ฌ ๊ตฌํํ์๋ค. ์ฝ๋๋ฆฌ์กํธ ์ฟผ๋ฆฌ์ @useInfiniteQuery()@๋ฅผ ์ด์ฉํ์ฌ ๋ฌดํ ์คํฌ๋กค(Infinite Scroll) ๊ธฐ๋ฅ์ ๊ตฌํํ์๋ค.@IntersectionObserver@๋ฅผ ์ฌ์ฉํ์ฌ ์คํฌ๋กค์ด ํ์ด์ง์ ๋งจ ์๋์ ๋๋ฌํ์ ๋๋ง ๋ค์ ํ์ด์ง์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๋๋ก ์ค์ ํ์๋ค.@useStat..
2024.09.23 -
- [React.js] .env ํ์ผ ๋ง๋ค๊ณ ์ฌ์ฉํ๊ธฐ (ํ๊ฒฝ ๋ณ์ ๊ด๋ฆฌ)
.env ํ์ผ ๋ง๋ค๊ณ ์ฌ์ฉํ๊ธฐ (ํ๊ฒฝ ๋ณ์ ๊ด๋ฆฌ)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ ํ๊ฒฝ ๋ณ์ ๊ด๋ฆฌ๋ฅผ ์ํด @.env@ ํ์ผ์ ๋ง๋ค๊ณ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. @.env@ ํ์ผ๊ฐ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉ๋๋ ํ๊ฒฝ ๋ณ์(Environment Variables)๋ฅผ ์ ์ฅํ๋ ํ์ผํ๊ฒฝ ๋ณ์๋ ์ด์์ฒด์ ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค์ ๊ฐ๋ค์ ์ธ๋ถ์์ ์ค์ ํ๊ณ ๊ด๋ฆฌํ ์ ์๊ฒ ํด์ฃผ๋ ๋ณ์๋ค๋ก, ์ฝ๋์ ์ง์ ํ๋์ฝ๋ฉํ์ง ์๊ณ ๋ ๋ฏผ๊ฐํ ์ ๋ณด๋ ์ค์ ๊ฐ์ ๊ด๋ฆฌํ ์ ์๊ฒ ํด์ค๋ค.๋ฆฌ์กํธ๋ ๋ ธ๋ ๊ฐ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ์ฃผ๋ก ๋ค์๊ณผ ๊ฐ์ ์ ๋ณด๋ฅผ @.env@ ํ์ผ์ ์ ์ฅํ๋ค.โ API ํค โ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฐ๊ฒฐ ์ ๋ณด โ API ์๋ํฌ์ธํธ โ ์ฑ ํ๊ฒฝ ์ค์ (๊ฐ๋ฐ, ํ ์คํธ, ํ๋ก๋์ ๋ฑ) ํน์ง์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฏผ๊ฐํ ์ ๋ณด๋ ํ๊ฒฝ์ ๋ฐ๋ผ ๋ฌ..
2024.09.23 -
- [React.js] React Query Devtools
React Query Devtools๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(React Query/Tanstack Query)์ ๊ฐ๋ฐ์ ๋๊ตฌ(Devtools)๋ฅผ ์ค์น ๋ฐ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. React Query Devtools๊ฐ๋ ์ํ ๊ด๋ฆฌ์ ์๋ฒ ๋ฐ์ดํฐ ๋๊ธฐํ๋ฅผ ๋๋ฒ๊น ํ๊ธฐ ์ํ ๊ฐ๋ฐ ๋๊ตฌReact Query๊ฐ ๊ด๋ฆฌํ๋ ์ฟผ๋ฆฌ(Query)์ ๋ฎคํ ์ด์ (Mutation) ์ํ๋ฅผ ์๊ฐ์ ์ผ๋ก ํ์ธํ ์ ์๋ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณตํ๋ค.๊ฐ๋ฐ์๊ฐ ์ฝ๊ฒ ๋ฐ์ดํฐ ํ๋ฆ์ ์ถ์ ํ๊ณ , ๋ฌธ์ ๋ฅผ ํ์ ํ๊ฑฐ๋ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐ ๋์์ ์ค๋ค. ์ฃผ์ ๊ธฐ๋ฅ์ฟผ๋ฆฌ ์ํ ํ์ธํ์ฌ ์คํ ์ค์ธ ๋ชจ๋ ์ฟผ๋ฆฌ์ ์ํ(์: @loading@, @success@, @error@ ๋ฑ)๋ฅผ ์ค์๊ฐ์ผ๋ก ํ์ธํ ์ ์๋ค.๋ํ ์ฟผ๋ฆฌ ๊ฒฐ๊ณผ ๋ฐ์ดํฐ, ์ฟผ๋ฆฌ ํค, ๋ง์ง๋ง์ผ๋ก ์ ๋ฐ์ดํธ๋ ์..
2024.09.22 -
- [Job Preparation] ์ฝ๋ฉ ํ ์คํธ ์ค๋น : ์๋ฃ๊ตฌ์กฐ (with Python)
์ฝ๋ฉ ํ ์คํธ ์ค๋น : ์๋ฃ๊ตฌ์กฐ (with Python)๋ค์ด๊ฐ๋ฉฐ์ฝ๋ฉ ํ ์คํธ ์ ์ ๊ฐ๋ณ๊ฒ ์ฝ์ด๋ณผ ์๋ฃ๊ตฌ์กฐ(Data Structure) ๊ด๋ จ ๋ด์ฉ์ ์ ๋ฆฌํด๋ณธ๋คํ์ด์ฌ(Python) ์ฝ๋๋ก ์ ๋ฆฌํ์๋ค. ์๋ฃ๊ตฌ์กฐ(Data Structure)๋ฐฐ์ด(Array)์ฐ์๋ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ฉฐ, ์ธ๋ฑ์ค(Index)๋ฅผ ํตํด ์์์ ์ ๊ทผํ ์ ์๋ค.ํ์ด์ฌ์ ๋ฆฌ์คํธ(@list@)๊ฐ ๋ฐฐ์ด์ฒ๋ผ ์ฌ์ฉ๋๋ค.arr = [1, 2, 3, 4, 5]print(arr[2]) # 3arr.append(6) # ๊ฐ ์ถ๊ฐarr.remove(3) # ๊ฐ ์ญ์ ์คํ(Stack)LIFO(Last In, First Out) ๊ตฌ์กฐ๋ง์ง๋ง์ ๋ค์ด๊ฐ ๋ฐ์ดํฐ๊ฐ ๊ฐ์ฅ ๋จผ์ ๋์จ๋ค.ํ์ด์ฌ์ ๋ฆฌ์คํธ(@list@)๋ฅผ ์คํ์ฒ๋ผ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, @appen..
1 2024.09.22