React & TypeScript & GraphQL ๋กœ ๋ฒ„๊ทธ์—†์ด ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•˜๊ธฐ!

๐Ÿ› ๋ฒ„๊ทธ๋Š” ๊ฐœ๋ฐœ์ž์˜ ์ˆ™๋ช…โ€ฆ? ์ด์ œ ํ—ค์–ด์งˆ ์‹œ๊ฐ„์ž…๋‹ˆ๋‹ค.

ํด๋ž˜์Šค ์†Œ๊ฐœ
๋‚œ์ด๋„
๋ณดํ†ต
์นดํ…Œ๊ณ ๋ฆฌ
์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ - ํ”„๋กœ๊ทธ๋ž˜๋ฐ
ํƒœ๊ทธ
๋ฆฌ์•กํŠธ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
์ถ”์ฒœ ํ•™์Šต๋Œ€์ƒ
- ์›น๊ฐœ๋ฐœ์ž๋กœ ์ปค๋ฆฌ์–ด๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„
- ์ทจ๋ฏธ๋กœ ๋‚˜๋งŒ์˜ ์•ฑ์„ ๋งŒ๋“ค ๊ธฐ์ˆ ๋ ฅ์„ ๊ฐ–์ถ”๊ณ  ์‹ถ์œผ์‹  ๋ถ„
- ๋น„๊ต์  ์ตœ์‹ ์˜ ๊ธฐ์ˆ ๋กœ ์•ฑ์„ ์ œ์ž‘ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„
- ๋ฆฌ์•กํŠธ์—์„œ TypeScript ๊ฐ€ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋Š”์ง€ ์ฒดํ—˜ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„


๊ฐ•์ขŒ์˜ ํŠน๋ณ„ํ•จ ์‹ค์ „์— ๊ฐ•ํ•œ ๊ฒฝ์Ÿ๋ ฅ ์žˆ๋Š” ํฌํŠธํด๋ฆฌ์˜ค ์™„์„ฑ HTML, CSS ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์ฐจ๊ทผ์ฐจ๊ทผ ๊ณต๋ถ€ํ•˜๋ฉฐ ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ ์ •๋ง ์‹ค๋ฌด์—์„œ ๊ธฐ๋Šฅ์„ ์“ธ ์ˆ˜ ์žˆ์„์ง€ ๊ฑฑ์ •๋˜์‹œ๋‚˜์š”? ์ด ๊ฐ•์ขŒ์—์„œ๋Š” ํด๋ผ์ด์–ธํŠธ๋ถ€ํ„ฐ ์„œ๋ฒ„๊นŒ์ง€ ์œ ๊ธฐ์ ์œผ๋กœ ์—ฐ๊ฒฐ๋œ ์‡ผํ•‘๋ชฐ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค์–ด๋ณผ ๊ฑฐ์˜ˆ์š”. ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ TypeScript๋กœ ์ž‘์„ฑํ•จ์œผ๋กœ์จ ๋†’์€ ์•ˆ์ •์„ฑ๊ณผ ์ƒ์‚ฐ์„ฑ์„ ์ถ”๊ตฌํ•˜๋Š” ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์—ฌ๋Ÿฌ๋ถ„์˜ ํฌํŠธํด๋ฆฌ์˜ค์— ์™ ๋„ฃ์–ด๋ณด์„ธ์š”! ํ•จ๊ป˜ ๋ฐฐ์›Œ๋ณผ ๊ฑฐ์˜ˆ์š” React, TypeScript, GraphQL ์‹œ๋„ˆ์ง€๋ฅผ ๊ฒฝํ—˜ํ•ด ๋ณด์„ธ์š” ๋‹จ์ˆœํ•จ๊ณผ ๋น ๋ฅธ ๊ฐœ๋ฐœ ์‚ฌ์ดํด์ด ๋งค๋ ฅ์ ์ธ React, TypeScript, GraphQL๊ณผ ํ•จ๊ป˜ ๊ฐ„๋‹จํ•˜์ง€๋งŒ ์›ฌ๋งŒํ•œ ๊ธฐ๋Šฅ์„ ๋ชจ๋‘ ๊ฐ–์ถ˜ ์‡ผํ•‘๋ชฐ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค์–ด๋ณผ ๊ฑฐ์˜ˆ์š”. ์›น ๊ฐœ๋ฐœ ์ง„์˜์—์„œ ์‚ฌ๋ž‘๋ฐ›๊ณ  ์žˆ๋Š” ์กฐํ•ฉ์ธ ๋งŒํผ ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋งŒ์กฑ์Šค๋Ÿฌ์šด ๊ฐœ๋ฐœ ๊ฒฝํ—˜๊นŒ์ง€ ์–ป์–ด ๊ฐ€์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์„œ๋ก ๋งŒ ๊ธธ๊ณ  ๋‚ด์šฉ์ด ๋ถ€์‹คํ•œ ๊ฐ•์˜๋Š” ๊ทธ๋งŒ! ๊ธฐ์กด์— 12์‹œ๊ฐ„ ๋ถ„๋Ÿ‰์œผ๋กœ ๊ฐ•์˜ํ•˜๋˜ ์ปค๋ฆฌํ˜๋Ÿผ์„ ์ด 2~3์‹œ๊ฐ„ ๋ถ„๋Ÿ‰์œผ๋กœ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์™์™ ๋ฐฐ์šฐ์‹ค ์ˆ˜ ์žˆ๋„๋ก ์•Œ๋ ค๋“œ๋ฆด๊ฒŒ์š”!

์ถ”์ฒœ ์ˆ˜๊ฐ•์ž ์ด๋Ÿฐ ๋ถ„๊ป˜ ์ถ”์ฒœํ•ด์š”


  • ์›น ๊ฐœ๋ฐœ์ž ์ปค๋ฆฌ์–ด๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„
  • ์ทจ๋ฏธ๋กœ ๋‚˜๋งŒ์˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ณ  ์‹ถ์œผ์‹  ๋ถ„
  • React์—์„œ TypeScript๊ฐ€ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋Š”์ง€ ๊ถ๊ธˆํ•˜์‹  ๋ถ„



๊ฐ•์˜์ž ์†Œ๊ฐœ 4๋…„์ฐจ ์›น ๊ฐœ๋ฐœ์ž ๋ฐ•์„ฑ๋ฏผ์ž…๋‹ˆ๋‹ค

์•ˆ๋…•ํ•˜์„ธ์š” :) ๊ฐ•์˜์ž ๋ฐ•์„ฑ๋ฏผ์ž…๋‹ˆ๋‹ค. ํ˜„์—…์—์„œ ์›น ๊ฐœ๋ฐœ์„ ํ•˜๊ณ  ์žˆ๊ณ , ํŠนํžˆ ํ”„๋ก ํŠธ์—”๋“œ์— ๊ด€์‹ฌ์ด ๋งŽ์Šต๋‹ˆ๋‹ค. ๊ต์œก ๋ถ„์•ผ์—๋„ ๋œป์ด ์žˆ์–ด 1๋…„ ์ด์ƒ ํŠœํ„ฐ๋ง์„ ์ง„ํ–‰ํ–ˆ๊ณ , ์ข‹์€ ๊ธฐํšŒ๋กœ ์˜์ƒ ๊ฐ•์˜๋ฅผ ์‹œ์ž‘ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋งŽ์€ ๋ถ„๋“ค์—๊ฒŒ ๋„์›€์ด ๋˜๊ธธ ๋ฐ”๋ผ๋ฉฐ, ๊ถ๊ธˆํ–ˆ๋˜ ๋ถ€๋ถ„์„ ์ž˜ ๋ฐฐ์›Œ๊ฐ€์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ๊ฐ•์˜์—์„œ ๋งŒ๋‚˜์š”!





๐Ÿ”— ๊ตฌ๋ฆ„ ๋ธ”๋กœ๊ทธ์—์„œ ๋ฐ•์„ฑ๋ฏผ๋‹˜ ์ธํ„ฐ๋ทฐ๋ฅผ ํ™•์ธํ•ด๋ณด์„ธ์š”.


๊ต์œก ๊ณผ์ •
๋ชจ๋‘ ํŽผ์น˜๊ธฐ
  • 01
    Intro
  • ๊ฐ•์˜ ์†Œ๊ฐœ
    ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋ฐ ๋””ํŽœ๋˜์‹œ ์ถ”๊ฐ€
  • 02
    Frontend Only
  • ํ…Œ๋งˆ ์„ค์ •
    Github์— ํ”„๋กœ์ ํŠธ ์—…๋กœ๋“œํ•˜๊ธฐ
    Dark mode ์ ์šฉํ•˜๊ธฐ
    ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€
    '์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ์ถ”๊ฐ€' ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•˜๊ธฐ
    ์žฅ๋ฐ”๊ตฌ๋‹ˆ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ
  • 03
    Backend API ์ƒ์„ฑ
  • GraphQL API ์ œ์ž‘
  • 04
    Frontend & Backend ์—ฐ๋™
  • Type Generation
    Data Fetching
    Mutation & Cache Update
  • 05
    Performance Improvement
  • ๋ฆฌ๋ Œ๋”๋ง ์ตœ์ ํ™”
  • 06
    ๋ฐฐํฌ
  • ํด๋ผ์ด์–ธํŠธ & ์„œ๋ฒ„ ๋ฐฐํฌํ•˜๊ธฐ
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ|2021๋…„ 03์›” 09์ผ
๊ฐ•์˜์ž ์†Œ๊ฐœ
์•ˆ๋…•ํ•˜์„ธ์š”. ๊ตฌ๋ฆ„์—๋“€ ์บกํ‹ด Alucard์ž…๋‹ˆ๋‹ค. ํ•จ๊ป˜ ํ•™์Šต์„ ์‹œ์ž‘ํ•ด๋ด์š”!

๊ฐ•์ขŒ ํ›„๊ธฐ
๏ฟฆ25,000
๏ฟฆ
22,500
(10%)

ํ‰๊ท ํ‰์ 
4.5
๋‚œ์ด๋„
๋ณดํ†ต
์ˆ˜๊ฐ•๊ธฐ๊ฐ„
ํ‰์ƒ ๋ฌด์ œํ•œ