ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
๐Ÿง  MindWell โ€” A Free, Open-Source Mental Health Platform Built with React and Next.js
Dev.toDev.to
Frontend

React 19์™€ Next.js 15 ๊ธฐ๋ฐ˜์˜ ์ ‘๊ทผ์„ฑ ์šฐ์„  ๋ฉ˜ํƒˆ ํ—ฌ์Šค ํ”Œ๋žซํผ ์„ค๊ณ„

๐Ÿง  MindWell โ€” A Free, Open-Source Mental Health Platform Built with React and Next.js

Rudra Sarker2026๋…„ 4์›” 1์ผ2๋ถ„beginner

AI ์š”์•ฝ

Context

์ง€์—ญ์ ยท๊ฒฝ์ œ์  ์ œ์•ฝ์œผ๋กœ ์ธํ•œ ์ •์‹  ๊ฑด๊ฐ• ๋ฆฌ์†Œ์Šค ์ ‘๊ทผ์„ฑ ๋ถ€์กฑ ๋ฌธ์ œ. ๋ฏผ๊ฐํ•œ ๊ฐœ์ธ ์ •๋ณด ๋ณดํ˜ธ์™€ ๋ณดํŽธ์  ์ ‘๊ทผ์„ฑ ๋ณด์žฅ์ด ํ•„์ˆ˜์ ์ธ ๋„๋ฉ”์ธ ํŠน์„ฑ.

Technical Solution

  • React 19์™€ Next.js 15๋ฅผ ํ™œ์šฉํ•œ ์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ ๊ตฌ์ถ•
  • Tailwind CSS ๊ธฐ๋ฐ˜์˜ Component-driven architecture ์ ์šฉ์œผ๋กœ UI ์žฌ์‚ฌ์šฉ์„ฑ ๋ฐ ๊ฐœ๋ฐœ ํšจ์œจ์„ฑ ์ œ๊ณ 
  • ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ์ง€์›, ํ‚ค๋ณด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜, ๊ณ ๋Œ€๋น„ ๋ชจ๋“œ, Semantic HTML์„ ์ ์šฉํ•œ Accessibility-First ์„ค๊ณ„
  • ๋ถˆํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ์ˆ˜์ง‘๊ณผ ์ถ”์ ์„ ์™„์ „ํžˆ ๋ฐฐ์ œํ•œ Privacy-centric ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ๊ตฌ์กฐ
  • Vercel ํ”Œ๋žซํผ์„ ํ†ตํ•œ ์ง€์†์  ๋ฐฐํฌ ๋ฐ ์ธํ”„๋ผ ๊ด€๋ฆฌ ์ฒด๊ณ„ ๊ตฌ์ถ•
  • ์ง€์—ญ๋ณ„ ์–ธ์–ด ํ™•์žฅ๊ณผ ๊ธฐ๋Šฅ ์ถ”๊ฐ€๊ฐ€ ์šฉ์ดํ•œ Open Source ๋ฐฐํฌ ์ „๋žต ์ฑ„ํƒ

Key Takeaway

ํŠน์ • ๋„๋ฉ”์ธ์˜ ๋ฏผ๊ฐ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ๊ธฐ๋Šฅ ๊ตฌํ˜„๋ณด๋‹ค ์‚ฌ์šฉ์ž์˜ ์ •์„œ์  ์•ˆ์ „๊ณผ ์ ‘๊ทผ์„ฑ ํ‘œ์ค€ ์ค€์ˆ˜๋ฅผ ์ตœ์šฐ์„ ์œผ๋กœ ํ•˜๋Š” ์„ค๊ณ„ ์›์น™์˜ ์ค‘์š”์„ฑ.

์‹ค์ฒœ ํฌ์ธํŠธ

๊ณต๊ณต ์„œ๋น„์Šค๋‚˜ ์˜๋ฃŒ ๊ด€๋ จ ํ”Œ๋žซํผ ์„ค๊ณ„ ์‹œ Semantic HTML๊ณผ ์›น ์ ‘๊ทผ์„ฑ ํ‘œ์ค€(WCAG)์„ ์ดˆ๊ธฐ ์•„ํ‚คํ…์ฒ˜ ๋‹จ๊ณ„๋ถ€ํ„ฐ ๋ฐ˜์˜ํ•  ๊ฒƒ

ํƒœ๊ทธ

#Open Source#Tailwind CSS#React#Accessibility#Next.js
์›๋ฌธ ์ฝ๊ธฐ