#0 INTRODUCTION - WONILLISM/Clone_airbnb GitHub Wiki

created by mki

#0.0 Read this First

#0.0 Introduction (02:15)

์žฅ๊ณ ๋ฅผ ์‚ฌ์šฉ

์žฅ๊ณ ๋Š” ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“œ๋Š”๋ฐ ์ค‘์š”ํ•œ ํˆด

50~60๊ฐœ ํ”„๋กœ์ ํŠธ๋ฅผ ์žฅ๊ณ ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.

์žฅ๊ณ ๋Š” ๋งค๋ ฅ์ ์ด๋‹ค.

๋””์ž์ธ์€ tailwindcss

utility first CSS ํ”„๋ ˆ์ž„์›Œํฌ

ํด๋ž˜์Šค๊ฐ€ ๋งŽ๊ณ  ๋””์ž์ธ๋˜์–ด์žˆ๋‹ค.

CSS ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ ๊ทน์ ์œผ๋กœ ํ™œ์šฉํ•  ๊ฒƒ์ด๋‹ค.

#0.1 Therory Requirements (02:22)

  • HTML
    • class
    • id
    • flex
    • box
  • CSS
  • Python
    • ๋Œ€๋ถ€๋ถ„ ์‚ฌ์šฉํ•  ๊ฒƒ์ด๋‹ค.
    • Function
    • Class
    • Inheritance
    • Object Oriented
  • JavaScript
    • ์‚ฌ์ง„ ์Šฌ๋ผ์ด๋“œ
  • ์žฅ๊ณ ๋Š” Class์™€ Inheritence๋กœ ๋Œ€๋ถ€๋ถ„ ์ด๋ฃจ์–ด์ ธ์žˆ๋‹ค.

#0.2 Softwere Requirement part One (04:13)

  • VSC
    • ๋ฌด๋ฃŒ
    • ์ƒ‰๊น”์ด์จ
    • Extention
  • ๋ช‡๋ช‡์€ Pycharm
    • IDE
    • ํŒŒ์ด์ฌ ์ „์šฉ ํ”Œ๋Ÿฌ๊ทธ์ธ
    • ๋ฌด๋ฃŒ๊ฐ€ ์•„๋‹ˆ๋‹ค.
    • Community๋ฒ„์ „์€ ๋ฌด๋ฃŒ. ํ•˜์ง€๋งŒ ์žฅ๊ณ ์— ๋Œ€ํ•œ ์ง€์›์ด ์—†๋‹ค.
    • ์žฅ๊ณ , HTML, JS์ง€์›์„ ๋ฐ›๊ธฐ ์œ„ํ•ด์„œ๋Š”... ์œ ๋ฃŒ๋ฒ„์ „์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
  • ๋ฌด๋ฃŒ ์˜คํ”ˆ ์†Œ์Šค์ธ ๋Œ€์ฒด์ œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
  • ํŒŒ์ด์ฌ์„ ์ „๋ฌธ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, JetBrains์˜ Pycharm์„ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์€ ์„ ํƒ์ด๋‹ค.

#0.3 Softwere Requirement part Two (04:55)

  • python 3.7.3
  • python 3.7.4๊ฐ€ ์ตœ์‹ ์ธ ์‹œ์ ˆ
  • python
  • python3
  • alias
  • Mac์—์„œ๋Š” brew๋ฅผ ์ด์šฉํ•ด์„œ ์„ค์น˜ํ•˜๋Š”๊ฒŒ ์ข‹๋‹ค.
  • ์œˆ๋„์šฐ๋Š” WSL๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋ฉฐ, PATH์— ๋ฐ˜๋“œ์‹œ ์ถ”๊ฐ€ํ•ด์•ผ ํ•œ๋‹ค.

#0.4 Django vs Flak (06:33)

  • Django๋ฅผ ์„ ํƒํ•œ ์ด์œ 
    • ๊ฑฐ๋Œ€ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค.
    • ๋งŽ์€ ์œ ํ‹ธ๋ฆฌํ‹ฐ๊ฐ€ ๋งŒ๋“ค์–ด์ ธ์žˆ๋‹ค. ์žฅ๊ณ ๊ฐ€ ๋‹ค ๋งŒ๋“ค์–ด ๋†“์•˜๋‹ค.
    • ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๊ณตํ†ต์ ใ…‡๋กœ ํ•„์œ ํ•œ ๋ถ€๋ถ„์ด ๋ฌด์—‡์ธ์ง€ ์•Œ๊ณ  ๊ธฐ๋Šฅ์„ ๋ฏธ๋ฆฌ ๋„ฃ์–ด๋†จ๋‹ค.
    • Battary Included
    • Fully loaded
    • ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€, ์‚ฌ์šฉ์ž ์ธ์ฆ!
    • ์ด๋ฉ”์ผ ๋ฐฑ์—”๋“œ
    • ํŒจ์Šค์›Œ๋“œ
    • ์–ด๋งˆ์–ด๋งˆํ•˜๊ฒŒ ๋งŽ์€ ๊ธฐ๋Šฅ
    • ์•„์ฃผ ๋น ๋ฅด๊ณ  ์‹ ์†ํ•˜๊ณ  ์ปค์Šคํ„ฐ๋งˆ์ด์ง•๋„ ์‰ฝ๋‹ค.
    • ์šฐ๋ฆฌ ๋ชฉํ‘œ์— ์ ํ•ฉํ•˜๋‹ค!
    • ์žฅ๊ณ ๋Š” ์ฝ”๋“œ๋ฅผ ๊ฐ•์š”ํ•œ๋‹ค.
    • ์›น ํ”„๋ ˆ์ž„์›Œํฌ์™€ ์‹ธ์šฐ๋Š” ์ผ์ด ์—†์–ด์•ผ ํ•œ๋‹ค.
  • Flask, Pyramid
    • ์ž‘๊ณ  ๊ท€์—ฌ์›Œ์„œ ๋งŽ์€ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š”๋‹ค.
    • ์•„์ฃผ์•„์ฃผ ๊ฐ„๋‹จํ•˜๋‹ค.
    • ์›น ์„œ๋ฒ„ ๋งŒ๋“œ๋Š”๊ฑธ ๋„์™€์ค„๊ฒŒ!
    • ์ง์ ‘! ๋งŒ๋“ค๊ฒŒ ๋„ˆ๋ฌด ๋งŽ๋‹ค.
    • Flask๋„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋„ˆ๋ฌด ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค. ์žฅ๊ณ ๋กœ ์ผ์ฃผ์ผ์ด๋ฉด ๊ฑธ๋ฆด ๊ฒƒ์„... 3๋‹ฌ์€ ๊ฑธ๋ฆด ๊ฒƒ์ด๋‹ค.
    • ๋งˆ์ดํฌ๋กœ ์„œ๋น„์Šค๋ฅผ ๊ตฌ์ถ•ํ•  ๋•Œ ์ข‹๋‹ค.

#0.5 Django vs React (05:06)

  • React๊ฐ€ ์•„๋‹Œ Djangoํ…œํ”Œ๋ฆฟ์„ ํƒํ•œ ์ด์œ 
  • ๋ชจ๋“  ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ React๋ฅผ ํ•„์š”๋กœ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค.
  • React๊ฐ€ ํ•„์ˆ˜ ์‚ฌํ•ญ์ด ์•„๋‹ˆ๋‹ค.
  • ์–ด๋ฉ”์ด์ง•ํ•œ Django ํ…œํ”Œ๋ฆฟ ์‹œ์Šคํ…œ
  • ํฐ ๋ถ€๋ถ„์„ ์ฐจ์ง€ํ•˜๋Š” ํ…œํ”Œ๋ฆฟ!
  • Django ํŒŒํญ ์ธ์Šคํƒ€ ํ•€ํ„ฐ๋ ˆ์ŠคํŠธ...
  • ํ…œํ”Œ๋ฆฟ์„ ์“ฐ๊ณ  ์“ฐ์ง€ ์•Š๊ธฐ๋„ ํ•œ๋‹ค. ์ธ์Šคํƒ€ ํ•€ํ„ฐ๋Š” ํ…œํ”Œ๋ฆฟ์„ ์•ˆ์“ด๋‹ค. ๋‹ค์ด๋‚˜๋ฏน์„ ์›ํ•ด์„œ.. ์• ํ”Œ๋ฆฌ์บ์ด์…˜์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜๊ธธ ์›ํ•ด์„œ. ์ƒํ˜ธ์ž‘์šฉ์ด ๋งŽ์ด ์ด๋ค„์ ธ ๋ฆฌ์•กํŠธ๊ฐ€ ํ•„์š”ํ•˜๋‹ค.
  • airbnb๋Š” ์ฝ˜ํ…์ธ  ์œ„์ฃผ๋ผ... ์–‘์‹์„ ์ฑ„์šฐ๊ณ  ๋ณด์—ฌ์ฃผ๊ธฐ.. ์ด๋Ÿฐ ๊ฒƒ๋“ค์ด๋ผ... ํŒ์—…์ด๋‚˜ ์Šฌ๋ผ์ด๋“œ๊ฐ€ ๋งŽ์ง€ ์•Š๋‹ค. ๊ทธ๋Ÿฐ๊ฒฝ์šฐ react๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค.
  • National geograpic
  • https://www.nationalgeographic.com/
  • ๋…ธ๋งˆ๋“œ์ฝ”๋”๋„ ์žฅ๊ณ  ํ…œํ”Œ๋ฆฟ์œผ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” React๋กœ ๋งŒ๋“ค์—ˆ์ง€๋งŒ... Django๋กœ ๋ฐ”๊พธ์—ˆ๋‹ค.
  • React๋ฅผ ์“ธ ํ•„์š”๊ฐ€ ์—†์„ ๋•Œ๋„ ์žˆ๋‹ค. ์ถฉ๋ถ„ํ•˜๋‹ค.
  • Django์˜ API์ธก๋ฉด๋งŒ ๊ฐ•์กฐํ•œ๋‹ค.
  • ํ•˜์ง€๋งŒ Django์˜ ํ…œํ”Œ๋ฆฟ์€ ๊ฐ•๋ ฅํ•˜๋‹ค.
  • ์ธ์Šคํƒ€๊ทธ๋žจ์€ ๊ฑฐ์˜ React์ด์ง€๋งŒ... ๋ช‡๋ช‡ ๋ถ€๋ถ„์€ Django