Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

ํ”Œ๋Ÿฌํ„ฐ์™€ ์žฅ๊ณ ๋กœ 1์‹œ๊ฐ„๋งŒ์— ํ€ด์ฆˆ ์•ฑ/์„œ๋ฒ„ ๋งŒ๋“ค๊ธฐ [๋ฌด์ž‘์ • ํ’€์Šคํƒ]

ํ”Œ๋Ÿฌํ„ฐ์™€ ์žฅ๊ณ ๋กœ ํ’€์Šคํƒ ํ€ด์ฆˆ์•ฑ์„ ๋งŒ๋“œ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค! ๋ฐฐ์šธ ๊ฑฐ๋ฆฌ๊ฐ€ ๋งŽ์€ ํ’€์Šคํƒ ๊ฐ•์˜๋กœ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์–ด๋ณด์„ธ์š”:)

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ’€์Šคํƒ, ๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ํ”„๋ก ํŠธ์—”๋“œ๋ถ€ํ„ฐ ๋ฐฑ์—”๋“œ๊นŒ์ง€ ํ’€์Šคํƒ ํ€ด์ฆˆ์•ฑ ๋งŒ๋“ค๊ธฐ

  • Flutter์˜ MediaQuery๋กœ ๋ฐ˜์‘ํ˜• UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•

  • http, Swiper, AutoSizeText ๋“ฑ Flutter ํŒจํ‚ค์ง€ ์‚ฌ์šฉ๋ฒ•

  • Flutter์™€ API ์„œ๋ฒ„ ์—ฐ๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•

  • ๊ฐ„๋‹จํ•˜๊ฒŒ Django Rest Framework๋กœ API ์„œ๋ฒ„ ๋งŒ๋“ค๊ธฐ

  • Django ํ”„๋กœ์ ํŠธ๋ฅผ Heroku์— ๋ฐฐํฌํ•˜๊ธฐ

ํ’€์Šคํƒ ํ€ด์ฆˆ์•ฑ ๋งŒ๋“ค๊ธฐ!
ํ”Œ๋Ÿฌํ„ฐ(Flutter)์™€ ์žฅ๊ณ (Django Rest Framework)๋กœ
๋น ๋ฅด๊ฒŒ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„ ๋ฐฐ์›Œ๋ณด์•„์š”.

 

๊ฐ€์žฅ ๋น ๋ฅด๊ฒŒ ์•ฑ ๊ฐœ๋ฐœ์„
์‹œ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•, Flutter

Flutter๋Š” ๊ตฌ๊ธ€์ด ๊ฐœ๋ฐœํ•œ ์•ฑ/์›น/๋ฐ์Šคํฌํƒ‘์•ฑ ๊ฐœ๋ฐœ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค.
์ดˆ์ฐฝ๊ธฐ์—๋Š” Dart๋ผ๋Š” ์ƒ์†Œํ•œ ์–ธ์–ด๋กœ ์ธํ•œ ์–ด๋ ค์›€์ด ์žˆ์—ˆ์ง€๋งŒ, React Native๋ฅผ ๊ฐ€๋ฟํžˆ ๋›ฐ์–ด๋„˜๋Š” ์•ฑ ์„ฑ๋Šฅ๊ณผ ๊ฐœ๋ฐœ ์†๋„๋ฅผ ์ž๋ž‘ํ•˜๋ฉฐ ํฐ ์ธ๊ธฐ๋ฅผ ๋Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Flutter๋ฅผ ์ ‘ํ•ด๋ณธ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์€ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ ๊ฐœ๋ฐœ์„ Flutter๊ฐ€ ์ถฉ๋ถ„ํžˆ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ์„ ๊ฑฐ๋ผ๊ณ  ํŒ๋‹จํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๋ฐฑ์—”๋“œ ์ž…๋ฌธ์ž์—๊ฒŒ
๊ฐ€์žฅ ์นœ์ ˆํ•œ ํ”„๋ ˆ์ž„์›Œํฌ,
Django Rest Framework

Django Rest Framework๋Š” Django ๊ธฐ๋ฐ˜์˜ REST API ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค.

์ž…๋ฌธ์ž์—๊ฒŒ ๊ฐ€์žฅ ์นœ์ ˆํ•œ ํŒŒ์ด์ฌ๊ณผ ์žฅ๊ณ ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“  ํ”„๋ ˆ์ž„์›Œํฌ๋ผ ์•„์ฃผ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฐฑ์—”๋“œ API๋ฅผ ๊ฐœ๋ฐœํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

๐Ÿ’ก ๊ฐ•์˜ ํŠน์ง•

์ „์ฒด ๊ฐ•์˜ FULL ์ž๋ง‰! ๋น ๋ฅธ ์ฝ”๋“œ ์ง„ํ–‰!

"๋ฌด์ž‘์ • ํ’€์Šคํƒ" ๊ฐ•์˜๋Š” ๊ฐ ์ฝ”๋“œ์— ๋Œ€ํ•œ ์„ค๋ช…์„ ์ตœ์†Œํ™”ํ•˜์—ฌ ์ผ๋‹จ ์ฝ”๋“œ๋ฅผ ๋”ฐ๋ผํ•ด๋ณด๊ณ , ๊ฐ์ž ๊ณ ๋ฏผํ•˜๋ฉฐ ๊ณต๋ถ€ํ•˜๋Š” ํ˜•ํƒœ์˜ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

๊ฐ•์˜์— ์„ค๋ช…์ด ๋ถ€์กฑํ•  ์ˆ˜ ์žˆ์–ด, ์ถ”ํ›„์— ๋ณธ ๊ฐ•์˜์— ๋‚˜์˜ค๋Š” ์œ„์ ฏ์ด๋‚˜ ๋กœ์ง์— ๋Œ€ํ•œ ๊ฐ•์˜๋ฅผ ๋”ฐ๋กœ ์—…๋กœ๋“œํ•  ์˜ˆ์ •์ด๋ฉฐ ๊ธฐ๋ณธ์ ์ธ ๊ฐœ๋…์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ๋จผ์ € ํ•„์š”ํ•˜์‹  ๋ถ„๋“ค์—๊ฒ ์ž˜ ๋งž์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜์ค‘์— "๋ฝ•๋ฝ‘๋Š” ํ’€์Šคํƒ" ๊ฐ•์˜์—์„œ ๋” ์ž์„ธํ•˜๊ณ , ์นœ์ ˆํ•œ ์„ค๋ช…์„ ์ง„ํ–‰๋“œ๋ฆด๊ฒŒ์š”!

๋˜ํ•œ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์ด ์—†์œผ์‹  ๋ถ„๋“ค์„ ์œ„ํ•ด ํ…Œ์ŠคํŠธ API ์ฃผ์†Œ๋ฅผ ์ฒจ๋ถ€ํ•ด๋‘์—ˆ์Šต๋‹ˆ๋‹ค:) 

โœ๏ธ ์ด ๊ฐ•์˜์—์„œ ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค

๊ฐ•์˜์—์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋‚ด์šฉ์„ ๋ฐฐ์šฐ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

โ˜‘๏ธ Flutter๋กœ ๋ฐ˜์‘ํ˜• UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•
โ˜‘๏ธ Flutter ์‹ค๋ฌด ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ž์˜ Flutter ๊ฐœ๋ฐœ ๊ฟ€ํŒ
โ˜‘๏ธ Flutter์™€ API๋ฅผ ์—ฐ๋™ํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๋ฐฉ๋ฒ•
โ˜‘๏ธ Django Rest Framework๋กœ API ์„œ๋ฒ„๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•
โ˜‘๏ธ Django ํ”„๋กœ์ ํŠธ๋ฅผ Heroku์— ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•

๐Ÿ“– ์ด ๊ฐ•์˜๊ฐ€ ๋๋‚˜๋ฉด ์™„์„ฑ๋  ํ€ด์ฆˆ์•ฑ

๊ฐ•์˜๊ฐ€ ๋๋‚˜๋ฉด, ์•„๋ž˜์˜ ํ€ด์ฆˆ์•ฑ์„ ์™„์„ฑํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:)

๐Ÿ“– ์ด ๊ฐ•์˜๊ฐ€ ๋๋‚˜๋ฉด ์™„์„ฑ๋  ๋ฐฑ์—”๋“œ API

๊ฐ•์˜๊ฐ€ ๋๋‚˜๋ฉด, ์•„๋ž˜์˜ API ์„œ๋ฒ„๋ฅผ ์™„์„ฑํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค :)

๐Ÿ›  ํ•„์š”ํ•œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ - Flutter

Flutter๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์ด๋ฉด ๋ฌด์—‡์ด๋“  ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค! 
๋”ฐ๋กœ ์„ค๋ช… ๊ฐ•์˜๊ฐ€ ์—†์œผ๋‹ˆ, ๋ฏธ๋ฆฌ ์ค€๋น„ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค:)
ํ”Œ๋Ÿฌํ„ฐ ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ธํŒ…ํ•˜๊ธฐ 

์ œ ๊ฐœ๋ฐœํ™˜๊ฒฝ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
OS: Mac OS Mojave / iOS Simulator
SDK: Flutter SDK 1.12.13+hotfix.8
Editor: VS code
VS code extensions: Dart / Flutter / Rainbow Brackets

๐Ÿ›  ํ•„์š”ํ•œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ - Django Rest Framework

Django ๊ฐœ๋ฐœ์€ ํŒŒ์ด์ฌ๋งŒ ์žˆ์œผ๋ฉด ๋ฐ”๋กœ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!
๋ฒ„์ „๋งŒ ๋„ˆ๋ฌด ์˜ค๋ž˜๋˜์ง€ ์•Š์€ ๊ฒƒ์œผ๋กœ ์„ธํŒ…ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. (์ตœ์†Œ 3.5 ์ด์ƒ)
ํŒŒ์ด์ฌ ์„ค์น˜ํ•˜๊ธฐ 

์ œ ๊ฐœ๋ฐœํ™˜๊ฒฝ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
Python 3.6.3

๐Ÿ›  ๊ฐ•์˜ ์ž๋ฃŒ์‹ค

๋ฐฑ์—”๋“œ API ์ฃผ์†Œ: https://drf-quiz-test.herokuapp.com/quiz/3/

ํ”Œ๋Ÿฌํ„ฐ(ํ”„๋ก ํŠธ์—”๋“œ) ์ฝ”๋“œ ๋ ˆํฌ: https://github.com/TaeBbong/quiz_app_lecture

์žฅ๊ณ (๋ฐฑ์—”๋“œ) ์ฝ”๋“œ ๋ ˆํฌ: https://github.com/TaeBbong/quiz_drf_lecture

(์œ ํŠœ๋ธŒ๋กœ๋„ ๋ณผ ์ˆ˜ ์žˆ์–ด์š”!) ๋ฌด๋ฃŒ ๊ฐ•์˜ ์œ ํŠœ๋ธŒ ๋งํฌ: https://www.youtube.com

๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ ์˜ˆ์ƒ๋˜๋Š” ์งˆ๋ฌธ QnA

Q. ๊ผญ ๊ฐ•์˜์—์„œ ๋‚˜์˜ค๋Š” ๋Œ€๋กœ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋‚˜์š”?
A. ๊ฐ•์˜์ž๋„ ๊ฐœ๋ฐœ์„ ์ž˜ ํ•˜๋Š” ์‚ฌ๋žŒ์ด ์•„๋‹ˆ๋ผ, ์ข‹์ง€ ์•Š์€ ์ฝ”๋“œ๊ฐ€ ์ž‘์„ฑ๋˜์–ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ Flutter ๊ฒฝ๋ ฅ์ด ๊ธธ์ง€ ์•Š์•„ ๋•Œ๋•Œ๋กœ ํ•„์š” ์—†๋Š” ์ฝ”๋“œ ๋“ฑ์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹คใ… ใ…  ๋” ๊ณต๋ถ€ํ•ด์„œ ์•ž์œผ๋กœ ๋ฐœ์ „๋œ ์ฝ”๋“œ์™€ ๊ฐ•์˜๋ฅผ ๋ณด์—ฌ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค:)

Q. ํ”Œ๋Ÿฌํ„ฐ์™€ ์žฅ๊ณ  API๋งŒ ์—ฐ๋™ํ•  ์ˆ˜ ์žˆ๋‚˜์š”?
A. ์–ด๋–ค API์ด๋“  ์ƒ๊ด€ ์—†์Šต๋‹ˆ๋‹ค! ์žฅ๊ณ  ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์Šคํ”„๋ง, ๋…ธ๋“œ์ œ์ด์—์Šค ๋“ฑ ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐœ๋ฐœํ•˜์—ฌ ํ”Œ๋Ÿฌํ„ฐ์™€ ์—ฐ๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜์—์„œ๋Š” ์žฅ๊ณ ๋กœ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ๊ฐ€๋ฅด์ณ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๐Ÿ’ก ๊ฐ•์˜๊ฐ€ ๋งˆ์Œ์— ๋“œ์…จ๋‹ค๋ฉด..!

๋ณธ ๊ฐ•์˜๋Š” ๋ฌด๋ฃŒ๋กœ ์ง„ํ–‰๋˜๋Š” ๊ฐ•์˜์ธ ๋งŒํผ ๊ฐ•์˜ ์ œ์ž‘์ž๋Š” ์—ฌ๋Ÿฌ๋ถ„๋“ค์˜ ์‘์›๊ณผ ๊ฒฉ๋ ค ๋•๋ถ„์— ์—ด์‹ฌํžˆ ์ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

๊ฐ•์˜๊ฐ€ ๋งˆ์Œ์— ๋“œ์…จ๋‹ค๋ฉด ์ปคํ”ผ ํ•œ ์ž”โ˜• ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค:)

 

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ๋ฌด์ž‘์ • ๋”ฐ๋ผํ•˜๋ฉฐ ๋งŒ๋“ค์–ด๋ณด๋Š” ๊ฐ•์˜๋ฅผ ์ข‹์•„ํ•˜๋Š” ์‚ฌ๋žŒ

  • Flutter๋ฅผ ์ฒ˜์Œ ์ ‘ํ•ด๋ณด๋Š” ์‚ฌ๋žŒ

  • ๊ธฐ์ดˆ์ ์ธ ๊ฐœ๋ฐœ ์ง€์‹์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์‚ฌ๋žŒ

  • ์ผ๋‹จ ์‹œ๋„ ํ•ด๋ณด๊ณ  ๊ณ ๋ฏผํ•˜๋Š”๊ฑธ ์ข‹์•„ํ•˜๋Š” ์‚ฌ๋žŒ

์•ˆ๋…•ํ•˜์„ธ์š”
๊ถŒํƒœ๋ฝ•์ž…๋‹ˆ๋‹ค.

17,492

๋ช…

์ˆ˜๊ฐ•์ƒ

357

๊ฐœ

์ˆ˜๊ฐ•ํ‰

30

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

ํ”„๋กœํ•„

๋ธ”๋กœ๊ทธ: taebbong.github.io

ํŽ˜์ด์Šค๋ถ: facebook.com/taebbong

๊นƒํ—ˆ๋ธŒ: github.com/TaeBbong

ํ•™๋ ฅ

๊ณ ๋ ค๋Œ€ํ•™๊ต ์ •๋ณด๋ณดํ˜ธํ•™๋ถ€ ์กธ์—…(2020.02)

ํ•œ์„ฑ๊ณผํ•™๊ณ ๋“ฑํ•™๊ต ์กฐ๊ธฐ ์กธ์—…(2016.02)

๊ฒฝ๋ ฅ

(์ฃผ) ๋ณด์ด์ €์—‘์Šค ์ธํ„ด, Flutter ์•ฑ/๋ฐฑ์—”๋“œ ์„œ๋ฒ„ ์œ ์ง€๋ณด์ˆ˜ ์ด๊ด„ (2019.07 ~ 2019.09)

์†Œํ”„ํŠธ์›จ์–ด ๋งˆ์—์ŠคํŠธ๋กœ 8๊ธฐ ๋ฉ˜ํ‹ฐ ๊ณผ์ • ์ˆ˜๋ฃŒ (2017.08 ~ 2017.12)

์œ ํŠœ๋ธŒ ๋ฐ์ดํ„ฐ ๋ถ„์„ ์Šคํƒ€ํŠธ์—… 'Picasso' ๊ณต๋™ ์ฐฝ์—… (2017.12 ~ 2018.06)

๊ณ ๋ ค๋Œ€ํ•™๊ต ์ •๋ณด๋ณดํ˜ธํ•™๋ถ€ ๊ฐœ๋ฐœ ๋™์•„๋ฆฌ DevKor ์ดˆ๋Œ€ ํšŒ์žฅ (2018.12 ~ 2020.02)

์˜คํˆฌ์žก / ์œ„์‹œ์ผ“ ํ”„๋ฆฌ๋žœ์„œ ๊ฐœ๋ฐœ์ž (2018.06 ~ )

์†Œ๊ฐœ

'๊ธฐ๋ฐœ์ž์ด๋„ˆ'๋ฅผ ๊ฟˆ๊พธ๋Š” ๊ฐœ๋ฐœ์ž ๊ถŒํƒœ๋ฝ•์ž…๋‹ˆ๋‹ค. ์ค‘ํ•™๊ต๋•Œ๋ถ€ํ„ฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•ด์™”๊ณ  ์ดํ›„ ์ฐฝ์—…์„ ๋ชฉํ‘œ๋กœ ์—ฌ๋Ÿฌ ๊ฐœ๋ฐœ๊ณผ ๊ด€๋ จ๋œ ํ™œ๋™์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ž‘๋…„ ์ฐฝ์—…์„ ๊ฒฝํ—˜ํ•ด๋ณด์•˜๊ณ  ๋‚ด ์•„์ด๋””์–ด๋กœ ์ฐฝ์—…ํ•˜๋Š” ์ผ์„ ํ•˜๊ณ  ์‹ถ์–ด ๊ทธ๋งŒ๋‘๊ณ  ๊ฐœ๋ฐœ ๊ณต๋ถ€์™€ ๊ฐ•์˜์ œ์ž‘์— ๋ชฐ๋‘ํ•˜๋ฉฐ ์ง€๋‚ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

7๊ฐœ โˆ™ (59๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!