๐Ÿฏ ๋ฐฉํ•™ 4์ฃผ ์Šคํ„ฐ๋”” ์ •๋ฆฌํ•˜๋ฉฐ..

์ตœ๋ฏผ์„ยท2021๋…„ 1์›” 30์ผ
2

ํšŒ๊ณ 

๋ชฉ๋ก ๋ณด๊ธฐ
5/9
post-thumbnail

9๊ธฐ ์šด์˜์ง„ ์Šคํ„ฐ๋””

๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ 9๊ธฐ ์šด์˜์ง„ ์Šคํ„ฐ๋””๊ฐ€ ์–ด๋Š๋ง 5์ฃผ์ฐจ ๋งˆ์ง€๋ง‰ ํ† ์ด ํ”„๋กœ์ ํŠธ์— ๋“ค์–ด์„ฐ๋‹ค.
๋ฐฉํ•™ ์šด์˜์ง„ ์Šคํ„ฐ๋””๋ฅผ ์šด์˜ํ•œ์ง€ ๋ฒŒ์จ ํ•œ ๋‹ฌ์ด ์ง€๋‚˜๋ฒ„๋ ธ๋‹ค.

  • ๋งค์ฃผ ๊ธˆ์š”์ผ 8์‹œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ์•ฝ 2์‹œ๊ฐ„ ์ •๋„ ์ง„ํ–‰
  • ๊ฐ ์ž 1์ฃผ์ฐจ์˜ ์ฃผ์ œ๋ฅผ ์ •ํ•ด์„œ "Velog" ์—…๋ฐ์ดํŠธํ•˜๊ธฐ

์‚ฌ์‹ค Velog ๊ณต๋ถ€ ๋‚ด์šฉ ์ž‘์„ฑ์ด ๊ณผ์—ฐ ๋„์›€๋ ๊นŒ? ๊ทธ๋Ÿฐ๋ฐ
์ง€๊ธˆ 4์ฃผ์ฐจ๊ฐ€ ๋˜๋ฉด์„œ ์ •๋ง ๋„์›€์ด ๋งŽ์ด ๋˜์—ˆ๊ณ , ๋‚จ๋Š” ๊ฒƒ์ด ๋งค์šฐ ๋งŽ์•˜๋‹ค.

4์ฃผ๊ฐ„์˜ ์Šคํ„ฐ๋”” ๊ณผ์ •์— ๋Œ€ํ•ด์„œ ๊ฐ„๋žตํ•˜๊ฒŒ ์ž‘์„ฑํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

์™œ ์‹œ์ž‘ํ–ˆ์„๊นŒ?

  • 2021๋…„ ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ 9๊ธฐ ์šด์˜์ง„ ๋ฉ˜ํ†  ํ™œ๋™์— ๋ถ€์กฑํ•จ์„ ์ฑ„์šฐ๊ธฐ ์œ„ํ•จ.
  • ์šด์˜์ง„ ๊ฐœ ๊ฐœ์ธ์˜ ๊ฐœ๋ฐœ ์ง€์‹ ์ƒ์Šน์„ ์œ„ํ•จ.
  • ๋Œ€์ถฉ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋Š” ๋ฐฉํ•™์„ ์—ด์‹ฌํžˆ ๋ณด๋‚ด๊ธฐ ์œ„ํ•œ ๋™๊ธฐ๋ถ€์—ฌ๋ฅผ ์œ„ํ•จ.
  • ์šด์˜์ง„๋ผ๋ฆฌ์˜ ๊ณต๋ชจ์ „(ํ•ด์ปคํ†ค) ์ฐธ์—ฌ๋ฅผ ์œ„ํ•œ ์ค€๋น„.

๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ๋ถ€๋ถ„์ด๋ฉฐ,์ค‘์š”ํ•œ ๋ถ€๋ถ„์ธ
9๊ธฐ ์šด์˜์ง„ ์›ํ• ํ•œ ๋ฉ˜ํ†  ํ™œ๋™
์ด ๋˜๊ธฐ ์œ„ํ•จ์ด๋‹ค.

Django ์›นํ”„๋ ˆ์ž„์›Œํฌ์— ๋Œ€ํ•œ ์ดํ•ด + HTML/CSS์— ๋Œ€ํ•ด์„œ๋Š”
๋ฉ˜ํ‹ฐ๋“ค์—๊ฒŒ ์•Œ๋ ค์ค„ ์ˆ˜ ์žˆ๋Š” ์ž์‹ ๊ฐ๊ณผ ์‹ค๋ ฅ์ด ๋˜์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.

๋‚˜๊ฐ™์€ ๊ฒฝ์šฐ, 2020๋…„ ๋ฉ˜ํ†  ํ™œ๋™์„ ํ•  ๋•Œ,
๋ฒผ๋ฝ์น˜๊ธฐ๋กœ ๊ณต๋ถ€ํ•ด์„œ ์ž์‹ ์ด ์—†์—ˆ๋˜ ๊ฒฝํ—˜์„ ์ƒ๊ฐํ•ด ๊ฐœ์„ ํ•œ ์Šคํ„ฐ๋”” ๋ฐฉ๋ฒ•์ด๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋˜ ๋‹ค๋ฅธ ์ด์œ ๋กœ 8๊ธฐ ๋•Œ,
์šด์˜์ง„๋“ค์˜ ๋…ธ๋ ฅ๊ณผ ์‹œ๊ฐ„ ํˆฌ์ž์— ๋น„ํ•ด, ์ŠคํŽ™ ํˆฌ์ž๋‚˜ ์ƒ์žฅ ๋ฐ ์ˆ˜๋ฃŒ์ฆ ๋ถ€์—ฌ
๊ฐ™์ด ํ•ด์ค„ ๋ถ€๋ถ„์ด ์—†์—ˆ๋˜ ๊ฒƒ์ด ์•„์‰ฌ์› ๋‹ค.

๊ทธ๋ž˜์„œ ์ด๋ฒˆ ๋ฐฉํ•™ ์Šคํ„ฐ๋””๋ฅผ ํ†ตํ•ด์„œ ์„œ๋กœ ๊ธฐ์ˆ  ์Šคํƒ ์Šคํ„ฐ๋”” ์ง„ํ–‰ํ•˜๋ฉด์„œ
์‹ค์ œ ๊ณต๋ชจ์ „์— ๋‚˜๊ฐ€์„œ ์“ธ ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ  ์Šคํƒ๋“ค์„ ๋‹จ๋ จํ•œ๋‹ค๋Š” ๋ชฉํ‘œ์˜€๋‹ค.

์šฐ๋ฆฌ๊ฐ™์€ ๊ฒฝ์šฐ, DRF(Django) + React ๋ฅผ ํ†ตํ•œ ํ˜‘์—…์ด ๋ชฉํ‘œ๋‹ค.

์Šคํ„ฐ๋”” ๋ถ„๋ฅ˜ํ•˜๊ธฐ

์ด 5๋ช…์˜ ์šด์˜์ง„ ์นœ๊ตฌ๋“ค๊ณผ ๊ฐ™์ด ์ง„ํ–‰ ํ•œ ์Šคํ„ฐ๋””์˜€๋‹ค.

  • ํ”„๋ก ํŠธ : 2๋ช…(ReactJS, Flutter)
  • ๋ฐฑ : 3๋ช…(Django, NodeJS)

์ด๋Ÿฌํ•œ ๊ธฐ์ˆ  ์Šคํƒ ๋ชฉํ‘œ๋ฅผ ๊ฐ€์ง€๊ณ  ์Šคํ„ฐ๋””๋ฅผ ์ง„ํ–‰ํ–ˆ๋‹ค.
์ถ”๊ฐ€ ์ ์œผ๋กœ ํ•œ ์ชฝ ๋ถ„์•ผ์˜ ๋‚ด์šฉ๋งŒ ๋ด์„œ๋Š” ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์šฐ๋‹ˆ,
๋ถ„๋ฅ˜๋Š” ์ €๋ ‡๊ฒŒ ํ•˜์ง€๋งŒ ํ’€์Šคํƒ๋„ ๊ฐ€๋Šฅ์ผ€ํ•˜๊ฒŒ ๊ณต๋ถ€๋ฅผ ๋‘ ๋ถ„์•ผ ๋‹ค ํ•˜๋„๋ก ๊ถŒ์œ ํ–ˆ๋‹ค.

์šด์˜์ง„์˜ ์ˆ™๋ช…์ด๋‹ค^_^ใ…Žใ…Ž

๋‚˜๋Š” ๋ฌด์—‡์„ ๊ณต๋ถ€ ํ–ˆ์„๊นŒ?

์šด์˜์ง„๋งˆ๋‹ค์˜ ์Šคํ„ฐ๋”” ๋‚ด์šฉ์€ ๋‹ค๋ฅด๊ฒ ์ง€๋งŒ,
๋‚˜๊ฐ™์€ ๊ฒฝ์šฐ๋Š” React๋ฅผ ์ง‘์ค‘์ ์œผ๋กœ ๋‹ค๋ค˜๋‹ค.

๋‚˜์ค‘ ์กธ์—… ํ›„, ํ”„๋ก ํŠธ์—”๋“œ ๊ด€๋ จํ•˜์—ฌ ๋ฐฐ์šฐ๊ณ  ์‹ถ์—ˆ๊ณ  ,
์ง‘์ค‘ํ•ด์„œ ๋ฐฐ์šธ ๊ธฐํšŒ๋ฅผ ์ง€๊ธˆ ์—ฌ๊ธฐ ์Šคํ„ฐ๋”” ๊ธฐํšŒ๋•Œ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ถ”๊ฐ€์ ์œผ๋กœ Django REST Framework, Firebase์— ๋Œ€ํ•œ
์ดํ•ด๋ฅผ ํ‚ค์›Œ์„œ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ์ค€๋น„๋„ ํ•ด๋ณด์•˜๋‹ค.

4์ฃผ ๋™์•ˆ ๋‚ด๊ฐ€ ๋ฐฐ์šด ๋‚ด์šฉ๋“ค

1์ฃผ์ฐจ

NodeJS + ReactJS + MongoDB

  • ๊ธฐ์ดˆ BASIC ๋‹ค๋ฃจ๊ธฐ
  • NOSQL์— ๋Œ€ํ•œ ์ดํ•ด ( ๊ด€๊ณ„ํ˜• ๋””๋น„๋งŒ ์จ๋ด„.. )
  • Inflearn ํด๋ก  ์ฝ”๋”ฉ
  • https://velog.io/@minsgy/Node-React-Basic [์ด6ํŽธ]
  • ๊ฐœ์ธ์ ์œผ๋กœ ๋งŽ์€ ์‹œ๊ฐ„์ด ๋“ค์—ˆ๊ณ , ๋ฉ˜ํƒˆ์ด ๋‚˜๊ฐ”๋˜ ์ฃผ ์˜€๋‹ค.
    ์ฒ˜์Œ์œผ๋กœ ์‹ค์ „์—์„œ ์จ๋ณด๋Š” JS ๋ฌธ๋ฒ•๊ณผ Django๋งŒ ์‚ฌ์šฉ ํ–ˆ๋˜ ๋‚˜์—๊ฒŒ
    Request(์š”์ฒญ), Response(์‘๋‹ต)์— ๋Œ€ํ•œ ๊ฐœ๋…์€ ์ƒ๋‹นํžˆ ์ƒ์†Œํ–ˆ๋‹ค.
  • React์™€์˜ ํ†ต์‹  ๊ณผ์ •๊ณผ REST API์— ๋Œ€ํ•œ ์‹ค์Šต์„ ํ•˜์—ฌ ์ ‘ํ•˜๊ธฐ ์ข‹์•˜๋˜ ์ฃผ์ฐจ์˜€๋‹ค.

์ด 1์ฃผ์ฐจ ๊ณผ์ •์„ ๊ฐ€์ง€๊ณ , Velog ์ฒซ ์ •๋ฆฌํ•˜๋Š”๋ฐ ๊ต‰์žฅํžˆ ์–ด๋ ค์› ๋˜ ์ ..^^
๊ทธ๋ฆฌ๊ณ  ์ด๋•Œ ๊ณ ๋ ค๋Œ€ํ•™๊ต ํ•ด์ปคํ†ค ์ค€๋น„ํ•˜๋Š๋ผ ๋”ฅํ•˜๊ฒŒ ๊ณต๋ถ€ ๋ชปํ•ด์„œ ์•„์‰ฌ์› ๋‹ค.


2์ฃผ์ฐจ

ReactJS + Firebase + ์›น ์†Œ์ผ“

  • ReactJS์— ๋Œ€ํ•ด์„œ ์ง‘์ค‘์ ์œผ๋กœ ๋ฐฐ์› ๋˜ ์ฃผ์ฐจ ์˜€๋‹ค.
  • Inflearn ์œ ๋ฃŒ ๊ฐ•์˜ (React + Firebase Chat)
  • https://velog.io/@minsgy/React-Chat-1 [์ด5ํŽธ]
  • 2์ฃผ์ฐจ์—์„œ ๋‚˜๋Š” ๊ฐ•์˜ ๋‚ด์šฉ์„ ๊ทธ๋Œ€๋กœ ๋”ฐ๋ผํ•˜์ง€ ์•Š๊ณ ,
    ๋ฐฉ์‹์„ ๋ฐ”๊ฟ”์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•ด๋ณด์•˜๋‹ค.
  • Class๊ธฐ๋ฐ˜์˜ LifeCycle ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ , ๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฐ•์˜ ๋‚ด์šฉ์ด์˜€๋‹ค.
    ๊ทธ๋ ‡์ง€๋งŒ ๋‚˜๋Š” ํ•จ์ˆ˜๊ธฐ๋ฐ˜์˜ hook์œผ๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์–ด์„œ,
    ๋ฐฉ์‹์„ ๋ฐ”๊ฟ”์„œ Class ๊ธฐ๋ฐ˜์„ ํ•จ์ˆ˜๊ธฐ๋ฐ˜์œผ๋กœ ๋ฐ”๊ฟ”๋‚˜๊ฐ”๋‹ค.
  • ํฌ๋ธŒ์Šค ์„ ์ • - ๊ฐ€์žฅ ๋ฒ„๊ทธ๊ฐ€ ๋งŽ์ด ๋‚˜์™”๋˜ ์ฃผ์ฐจ
  • ๋ป˜ ์ง“๊ณผ Search๋ฅผ ๋ฐ˜๋ณตํ•˜๋ฉด์„œ ๊ฐ€์žฅ ๋งŽ์ด ๋ฐฐ์› ๋˜ ์ฃผ์ฐจ๋‹ค.

๋งŽ์ด ํ† ๋‚˜์™”๋˜ ์ฃผ์ฐจ์ด๋‹ค. ์ด ์ฏค์—์„œ ๋ฒจ๋กœ๊ทธ ์ž‘์„ฑ์— ๋Œ€ํ•ด ์ต์ˆ™ํ•ด์ ธ์„œ ๊ฐœ์ธ์ ์œผ๋กœ ๋งŽ์ด ์„ฑ์žฅํ•œ ์ฃผ์ฐจ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

2์ฃผ์ฐจ ๋งˆ๋ฌด๋ฆฌ ํ›„, ๊ฐ•์˜๋ฅผ ์ค‘์‹ฌ์ ์œผ๋กœ ํ•ด์™”๋˜ ์šฐ๋ฆฌ์˜
์Šคํ„ฐ๋”” ๋ฐฉ์‹์„ ํ”„๋กœ์ ํŠธ ์ค‘์‹ฌ์œผ๋กœ ๋ฐ”๊พธ์žํ•˜์—ฌ

3์ฃผ์ฐจ ๋ถ€ํ„ฐ๋Š” ํ† ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ฃผ์ œ๋กœ ์žก๊ณ  ์ง„ํ–‰ ํ–ˆ๋‹ค.


3์ฃผ์ฐจ

๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ์ถœ์„๋ถ€ ํ”„๋กœ์ ํŠธ

  • ReactJS + Redux + Firebase
  • ๋ฆฌ์•กํŠธ์™€ ํŒŒ์ด์–ด๋ฒ ์ด์Šค๋ฅผ ๊ฐ€์ง€๊ณ , ์ฒ˜์Œ์œผ๋กœ ํ•ด๋ณด๋Š”
    ZeroBase์˜ ํ† ์ด ํ”„๋กœ์ ํŠธ ์˜€๋‹ค.
  • ์‹ค์ „ ๊ฒฝํ—˜์„ ๊ฐ€์žฅ ๋งŽ์ด ๋ฐฐ์› ๋˜ ํ”„๋กœ์ ํŠธ์˜€๋‹ค.
    ๊ฐ€์žฅ ํฐ ์žฌ๋ฏธ๋ฅผ ๋Š๊ผˆ๋˜ ํ† ์ดํ”„๋กœ์ ํŠธ๋ฉฐ, ๋ฟŒ๋“ฏํ•จ์„ ๋Š๊ผˆ๋˜ ์ฃผ์ฐจ.
  • https://velog.io/@minsgy/series/Toyproject [์ด5ํŽธ]

์ด ์‹œ์ ๋ถ€ํ„ฐ React์— ๋Œ€ํ•œ ์œ ์ง€ ๋ณด์ˆ˜ ๊ด€๋ จํ•˜์—ฌ ๊ด€์‹ฌ์ด ์ƒ๊ฒผ์œผ๋ฉฐ,
๋‹ค๋ฅธ ์›นํ”„๋ ˆ์ž„์›Œํฌ์™€ ์—ฐ๊ฒฐํ•ด์„œ ํ•˜๋Š” ํ˜‘์—…์— ๋Œ€ํ•ด ๊ด€์‹ฌ์ด ๋งŽ์ด ์ƒ๊ฒผ๋‹ค.


4์ฃผ์ฐจ

Django REST API + ๋™์•„๋ฆฌ ์›๋ฐ์ดํด๋ž˜์Šค

  • ๋™์•„๋ฆฌ ์›๋ฐ์ดํด๋ž˜์Šค ํ–‰์‚ฌ์™€ ์ง„ํ–‰์„ ํ•ด์„œ ์ฝ”๋”ฉ์„ ๋งŽ์ด ๋ชปํ•œ ์ฃผ
  • Django REST API์™€ ReactJS์˜ ํ†ต์‹ ์„ ํ†ตํ•ด ํ˜‘์—… ์ค€๋น„
  • ์‹ค์งˆ์ ์œผ๋กœ ๊ฐ€์žฅ ์ค‘์š”ํ–ˆ๊ณ , ์•ž์œผ๋กœ ์žˆ์„ ํ˜‘์—…์— ๋Œ€ํ•œ ์ค€๋น„๋ฅผ ํ–ˆ๋˜ ๊ณผ์ •
  • ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ๋ฐ ํŒŒ์ผ ๋””๋ ‰ํ† ๋ฆฌ ๊ด€๋ฆฌ์— ๋Œ€ํ•ด ๋งŽ์ด ๊ณ ๋ฏผ ํ–ˆ๋˜ ์ฃผ์ฐจ.
  • https://velog.io/@minsgy/Django-RESTAPI-React-1 [์ด2ํŽธ]

๋งˆ์ง€๋ง‰ ๋‚จ์€ 5์ฃผ์ฐจ๋Š”?

ํŒ€์› ๋ชจ๋‘ 3์ฃผ์ฐจ์˜ ์Šค์ผ€์ค„ ์ œ์ž‘ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•ด์„œ ํฅ๋ฏธ์™€ ์žฌ๋ฏธ๋ฅผ ๋Š๊ผˆ์—ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๋งˆ์ง€๋ง‰์€ ์ž์œ ์ฃผ์ œ๋กœ ๊ฐ์ž ์ฃผ์ œ ์ •ํ•ด์„œ ๋ฐฐ์šด ๊ธฐ์ˆ ์Šคํƒ์œผ๋กœ ๋งˆ๋ฌด๋ฆฌํ•˜๋Š” ์ฃผ์ฐจ์ด๋‹ค.

๋” ์ง„ํ–‰ํ•˜๊ณ  ์‹ถ์ง€๋งŒ, ์•ž์œผ๋กœ ๋™์•„๋ฆฌ ์šด์˜์— ๋Œ€ํ•ด ์ค€๋น„ ํ•  ๊ฒƒ์ด ๋งŽ์•„์„œ 5์ฃผ์ฐจ๋ฅผ ๋งˆ๋ฌด๋ฆฌ๋กœ ์Šคํ„ฐ๋””๋ฅผ ์ข…๋ฃŒํ•  ์ƒ๊ฐ์ด๋‹ค ๐Ÿ˜

๊ธธ์—ˆ์ง€๋งŒ ์งง์•˜๋˜ ์Šคํ„ฐ๋”” ๊ธฐ๊ฐ„๋™์•ˆ ๋ฌต๋ฌตํ•˜๊ฒŒ ์ž˜ ๋”ฐ๋ผ์™€์ค€ ํŒ€์›๋“ค์—๊ฒŒ ์ •๋ง ๊ณ ๋ง™๊ณ !

๋‹ค๋“ค 2021๋…„ ์‹œ์ž‘ํ•˜๋Š” ๋ฐœํŒ์ด ๋˜์—ˆ์œผ๋ฉด ์ •๋ง ์ข‹๊ฒ ๋‹ค!

profile
๋˜๋Œ์•„๋ณด๋ฉฐ ์„ฑ์žฅํ•ฉ๋‹ˆ๋‹ค๐Ÿ”จ

0๊ฐœ์˜ ๋Œ“๊ธ€