🚀 Stacks

Front-End

<aside> <img src="attachment:390c4549-7196-457e-93ac-5ec597c48d69:img.icons8.png" alt="attachment:390c4549-7196-457e-93ac-5ec597c48d69:img.icons8.png" width="40px" /> React

</aside>

<aside> <img src="notion://custom_emoji/3e05cc39-b823-81eb-a997-0003adfd8f8f/2235cc39-b823-8018-956d-007af8d37096" alt="notion://custom_emoji/3e05cc39-b823-81eb-a997-0003adfd8f8f/2235cc39-b823-8018-956d-007af8d37096" width="40px" /> TypeScript

</aside>

<aside> <img src="attachment:647553d7-b614-41b4-ae7a-0b87c0880e35:img.icons8.png" alt="attachment:647553d7-b614-41b4-ae7a-0b87c0880e35:img.icons8.png" width="40px" /> Tailwind

</aside>

<aside> <img src="attachment:7e1a7bdc-a7c8-40d3-8925-6995c576e2e7:NPcnJa-KI6Tp7EjYhiGRmCG7HDi0EifWpgt9oxU_K9kArwGzE84xGq6qD_JkoUA1X4iZjKM06e9GjKRrN5oZxw.svg" alt="attachment:7e1a7bdc-a7c8-40d3-8925-6995c576e2e7:NPcnJa-KI6Tp7EjYhiGRmCG7HDi0EifWpgt9oxU_K9kArwGzE84xGq6qD_JkoUA1X4iZjKM06e9GjKRrN5oZxw.svg" width="40px" /> Vite

</aside>

<aside> <img src="attachment:5e07b07c-084c-4a61-964d-8c4e0ca2f273:lWcXbpCwKlTNMM2v_SiGVK5Q6XsnTOvH6txHs25DbpbP_XGDum3MfxpNHYDCGHxuqGeZaJ8PVZLWO9LJFGFGAA.webp" alt="attachment:5e07b07c-084c-4a61-964d-8c4e0ca2f273:lWcXbpCwKlTNMM2v_SiGVK5Q6XsnTOvH6txHs25DbpbP_XGDum3MfxpNHYDCGHxuqGeZaJ8PVZLWO9LJFGFGAA.webp" width="40px" /> Zustand

</aside>

<aside> <img src="attachment:626fd9c1-d98e-4111-93d1-1ba1a23b4959:s0.png" alt="attachment:626fd9c1-d98e-4111-93d1-1ba1a23b4959:s0.png" width="40px" /> Tanstack Query

</aside>

Back-End

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1629972500/noticon/htwpjnfc0hlr1teypbjo.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1629972500/noticon/htwpjnfc0hlr1teypbjo.png" width="40px" /> Java

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567008187/noticon/m4oad4rbf65fjszx0did.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567008187/noticon/m4oad4rbf65fjszx0did.png" width="40px" /> SpringBoot

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1741217250/noticon/iqqqbtkh6ybpkvz0opnm.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1741217250/noticon/iqqqbtkh6ybpkvz0opnm.png" width="40px" /> Spring Data JPA

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1686935854/noticon/r7w1ipwmdmhlfzqfw69h.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1686935854/noticon/r7w1ipwmdmhlfzqfw69h.png" width="40px" /> Spring Security

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1569654347/noticon/mdujedvj9w8c9rz9phny.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1569654347/noticon/mdujedvj9w8c9rz9phny.png" width="40px" /> JWT Token

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566912632/noticon/konazfwbuwdnn43mcqux.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566912632/noticon/konazfwbuwdnn43mcqux.png" width="40px" /> OAuth 2.0

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1603423163/noticon/az0cvs28lm7gxoowlsva.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1603423163/noticon/az0cvs28lm7gxoowlsva.png" width="40px" /> My SQL

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1616658979/noticon/lcugxam6owivokgw1psc.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1616658979/noticon/lcugxam6owivokgw1psc.png" width="40px" /> Grafana

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1704429529/noticon/tmmqyirdigq6pdb8xwnz.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1704429529/noticon/tmmqyirdigq6pdb8xwnz.png" width="40px" /> Loki

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1621236120/noticon/v3pcpusajohadldxvm7k.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1621236120/noticon/v3pcpusajohadldxvm7k.png" width="40px" /> Query Dsl

</aside>

<aside> <img src="attachment:f517230e-0905-4c8e-a699-1913d5fe9d38:gpt.png" alt="attachment:f517230e-0905-4c8e-a699-1913d5fe9d38:gpt.png" width="40px" /> OpenAI

</aside>

Infra

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1698294991/noticon/seoaznmbzm3pcp2um3d3.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1698294991/noticon/seoaznmbzm3pcp2um3d3.png" width="40px" /> Docker

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913679/noticon/xlnsjihvjxllech0hawu.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913679/noticon/xlnsjihvjxllech0hawu.png" width="40px" /> Redis

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1593063747/noticon/v54j0lavn52l6ff61sga.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1593063747/noticon/v54j0lavn52l6ff61sga.png" width="40px" /> AWS

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566914173/noticon/kos1xkevxtr81zgwvyoe.svg" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566914173/noticon/kos1xkevxtr81zgwvyoe.svg" width="40px" /> EC2

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1683592944/noticon/plcvyiwmdh4adlt8dxgo.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1683592944/noticon/plcvyiwmdh4adlt8dxgo.png" width="40px" /> RDS

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567064876/noticon/sb5llmvfubuceldbkmx8.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567064876/noticon/sb5llmvfubuceldbkmx8.png" width="40px" /> S3

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1628559235/noticon/mzvbkxjbquxnev7aa1rp.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1628559235/noticon/mzvbkxjbquxnev7aa1rp.png" width="40px" /> Load Balancer

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1673248072/noticon/uj1sljza7nnsj0lpilwk.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1673248072/noticon/uj1sljza7nnsj0lpilwk.png" width="40px" /> Github Actions

</aside>

🛠  Tools

<aside> <img src="https://cdn-icons-png.flaticon.com/512/5968/5968705.png" alt="https://cdn-icons-png.flaticon.com/512/5968/5968705.png" width="40px" /> Figma

</aside>

<aside> <img src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" alt="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" width="40px" /> Git

</aside>

<aside> <img src="notion://custom_emoji/3e05cc39-b823-81eb-a997-0003adfd8f8f/2235cc39-b823-80b9-956d-007a0caca395" alt="notion://custom_emoji/3e05cc39-b823-81eb-a997-0003adfd8f8f/2235cc39-b823-80b9-956d-007a0caca395" width="40px" /> VSCode

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913019/noticon/watr41yboy1ub4jfuqlq.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913019/noticon/watr41yboy1ub4jfuqlq.png" width="40px" /> InteliJ

</aside>

👥  Collaboration

<aside> <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="https://cdn-icons-png.flaticon.com/512/25/25231.png" width="40px" /> GitHub

</aside>

<aside> <img src="https://cdn.icon-icons.com/icons2/2389/PNG/512/notion_logo_icon_145025.png" alt="https://cdn.icon-icons.com/icons2/2389/PNG/512/notion_logo_icon_145025.png" width="40px" /> Notion

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/5968/5968756.png" alt="https://cdn-icons-png.flaticon.com/512/5968/5968756.png" width="40px" /> Discord

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/2111/2111615.png" alt="https://cdn-icons-png.flaticon.com/512/2111/2111615.png" width="40px" /> Slack

</aside>

<aside> <img src="notion://custom_emoji/3e05cc39-b823-81eb-a997-0003adfd8f8f/2225cc39-b823-8071-8abc-007afb51521c" alt="notion://custom_emoji/3e05cc39-b823-81eb-a997-0003adfd8f8f/2225cc39-b823-8071-8abc-007afb51521c" width="40px" />

Jira

</aside>

🧩 Libraries & Utilities

Front-End

라우팅 & 데이터 통신

• react-router-dom

• axios

• TanStack Query

  https://www.heropy.dev/p/HZaKIE

UI 인터랙션 & 애니메이션

• react-spring (예 : 바텀시트)

• framer-motion

• headlessui

  https://headlessui.com/

사용자 경험 향상 도구

• react-toastify

  https://fkhadra.github.io/react-toastify/introduction/

• css loader

  https://css-loaders.com/dots/

상태관리

• zustand (전역상태관리)

  https://www.heropy.dev/p/n74Tgc

코드 스타일링 & 정리

• prettier-plugin-tailwindcss

CSS 프레임워크

• tailwindcss

패키지 설치

Zod + React-Hook-Form 사용 이유 및 기대 효과