Y J S
์œ ์ฃผ์„ญ ์ฆ๋ช…์‚ฌ์ง„

์•ˆ๋…•ํ•˜์„ธ์š”! ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์œ ์ฃผ์„ญ์ž…๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋” ์ข‹๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ํ•ญ์ƒ ๊ณ ๋ฏผํ•˜๊ณ , ๋” ๋‚˜์€ ์ฝ”๋“œ๋ฅผ ํ–ฅํ•ด ๋Š์ž„์—†์ด ์„ฑ์žฅํ•˜๋Š” ์ค‘์ด์—์š”.

์ด๋ฉ”์ผ ๋ณด๋‚ด๊ธฐ โœ‰๏ธ์ด๋ ฅ์„œ ๋‹ค์šด๋กœ๋“œ โ†“

ํ•ต์‹ฌ ์—ญ๋Ÿ‰

์†Œํ†ต์„ ์ค‘์š”์‹œํ•˜๊ณ , ํ˜‘์—…์„ ์ค‘์š”์‹œํ•˜๋ฉฐ, ํ•ญ์ƒ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ

React.js๋ฅผ ์ด์šฉํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ํ•˜๋ฉฐ, javascript, typescript์˜ ์‚ฌ์šฉ์— ๋Šฅ์ˆ™ํ•ฉ๋‹ˆ๋‹ค. Next.js์™€ ๋”๋ถˆ์–ด React Library๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ์„ ํ•ฉ๋‹ˆ๋‹ค.

์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๋ฐ ํ˜‘์—…

Github๋ฅผ ์ด์šฉํ•œ ํ˜‘์—…์„ ํ•˜๋ฉฐ, notion ๋“ฑ์˜ ํ˜‘์—… ๋„๊ตฌ ์‚ฌ์šฉ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ํŒ€ ํ˜‘์—… ์›์น™์„ ์ค€์ˆ˜ํ•˜๋ฉฐ, ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ์ค‘์š”์‹œํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ์ˆ  ์Šคํƒ ๋ฐ ๋„๊ตฌ

์ฃผ์š” ๊ธฐ์ˆ  ์Šคํƒ ๋ฐ ๋„๊ตฌ๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ์ˆ 

๊ธฐ๋ณธ ์–ธ์–ด ๋ฐ ํ•ต์‹ฌ ํ”„๋ก ํŠธ์—”๋“œ ์—ญ๋Ÿ‰

  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • Tailwind CSS
  • Next.js

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

  • React
  • Tanstack Query
  • React Hook Form
  • Zustand

ํ™˜๊ฒฝ ๋ฐ ๋ฐฐํฌ

์„œ๋น„์Šค ์šด์˜๊ณผ ๋ฐฐํฌ ํ™˜๊ฒฝ

  • Supabase
  • Vercel
  • Vite
  • Webpack

ํ˜‘์—… ๋„๊ตฌ

๋””์ž์ธ ํ˜‘์—… ๋ฐ ํ”„๋กœํ† ํƒ€์ดํ•‘ ๋„๊ตฌ

  • Figma
  • Notion
  • Cursor
  • GitHub

๊ฒฝ๋ ฅ

ํ”„๋กœ์ ํŠธ ์šด์˜๊ณผ ํ˜‘์—… ๊ฒฝํ—˜์„ ํ†ตํ•ด ์–ป์€ ์‹ค๋ฌด ์—ญ๋Ÿ‰์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

  • PECSPERT ยท ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ด

    ๋ฐœํ™”์— ์–ด๋ ค์›€์ด ์žˆ๋Š” ์žํ ์•„๋™์„ ์œ„ํ•œ ๋ณด์™„๋Œ€์ฒด์˜์‚ฌ์†Œํ†ต(AAC) ์•ฑ์„ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹จ์–ด ์นด๋“œ๋ฅผ ์„ ํƒํ•˜๋ฉด ์Œ์„ฑ์œผ๋กœ ์ถœ๋ ฅ๋˜์–ด ๊ฐ์ •๊ณผ ์š•๊ตฌ๋ฅผ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š” ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค.

    React NativeReactExpoReact Hook FormTypeScript

ํ”„๋กœ์ ํŠธ

๋Œ€ํ‘œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ”ผ๋“œ ํ˜•์‹์œผ๋กœ ๋ฏธ๋ฆฌ ์‚ดํŽด๋ณด๊ณ , ํด๋ฆญํ•ด ์ƒ์„ธ ์„ค๋ช…์„ ํ™•์ธํ•˜์„ธ์š”.

  • ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ

    Next.js์™€ Tailwind CSS๋กœ ๊ตฌ์ถ•ํ•œ ๋ฐ˜์‘ํ˜• ํฌํŠธํด๋ฆฌ์˜ค, ๋‹คํฌ ๋ชจ๋“œ์™€ ๋ธ”๋กœ๊ทธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

    Next.jsTypeScriptTailwind CSSMDX

  • Epigram ํ˜‘์—… ํ”„๋กœ์„ธ์Šค ์ตœ์ ํ™”

    ํ˜‘์—… ์ฒด๊ณ„ ์žฌ์ •๋น„์™€ UI ๊ฐœ์„ ์œผ๋กœ ๋นŒ๋“œ ์˜ค๋ฅ˜๋ฅผ 70% ์ด์ƒ ์ค„์ด๊ณ  ๊ฐ์ • ์ธ์‹ ํšจ์œจ์„ ๋†’์ธ ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค.

    ReactTypeScriptRechartsToastifyNotion

  • TripView ์—ฌํ–‰ ๋ฆฌ๋ทฐ ํ”Œ๋žซํผ

    ์—ฌํ–‰์„ ๊ธฐ๋กํ•˜๊ณ  ๋ฆฌ๋ทฐ๋ฅผ ๋‚จ๊ธธ ์ˆ˜ ์žˆ๋Š” ํ”Œ๋žซํผ์œผ๋กœ, ์ผ์ •๋ณ„ ์—ฌํ–‰์ง€๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ๊ณต๊ฐœ/๋น„๊ณต๊ฐœ๋ฅผ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    Next.jsTailwind CSSTypeScriptSupabaseReact QueryReact Hook FormZod

  • WINE ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”Œ๋žซํผ

    ์™€์ธ์„ ํƒ์ƒ‰ํ•˜๊ณ  ์• ํ˜ธ๊ฐ€๋“ค์ด ์†Œํ†ตํ•  ์ˆ˜ ์žˆ๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์œผ๋กœ, ๊ฒ€์ƒ‰ยทํ•„ํ„ฐยท๋ฆฌ๋ทฐ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ด ๋งž์ถคํ˜• ์™€์ธ ๊ด€๋ฆฌ์™€ ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ฒฝํ—˜์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

    Next.jsTailwind CSSTypeScriptReact Hook FormReact Query

๊ธฐ๋ก๊ณผ ์„ฑ์žฅ์˜ ์—ฌ์ •

๋ธ”๋กœ๊ทธ์™€ ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ… ํŽ˜์ด์ง€์—์„œ ๋ฌธ์ œ ํ•ด๊ฒฐ ๊ณผ์ •๊ณผ ๋ฐฐ์›€์„ ํ™•์ธํ•ด๋ณด์„ธ์š”.