[Project] Otjang πŸ‘•

gyu716625Β·2020λ…„ 9μ›” 16일
0

Project

λͺ©λ‘ 보기
2/2

πŸ€” Otjang은 무슨 ν”„λ‘œμ νŠΈμΈκ°€μš”?

μƒˆλ‘œμš΄ κ³„μ ˆμ΄ 였면 흐린 κΈ°μ–΅ 속 ν‹°μ…”μΈ λ₯Ό μ°Ύμ•„ μˆ˜λ‚© λ°•μŠ€λ₯Ό νŒŒν—€μΉ˜λ˜ κ²½ν—˜μ΄ μžˆμœΌμ‹ κ°€μš”?

옷μž₯(otjang)은 μƒν™œμ˜ 3μš”μ†Œ 쀑 ν•˜λ‚˜μΈ μ˜λ³΅μ„ ν•œ λˆˆμ— κ΄€λ¦¬ν•˜μ—¬ μƒν™œ νš¨μœ¨μ„ λ†’μ΄κ³ μž ν•©λ‹ˆλ‹€. μ˜λ³΅μ€ λ‚¨λ…€λ…Έμ†Œ λˆ„κ΅¬λ‚˜ μ°©μš©ν•˜λ―€λ‘œ, λ·°ν‹°/νŒ¨μ…˜μ— μ΄ˆμ μ„ λ§žμΆ”μ§€ μ•ŠλŠ” λ²”μš©μ  λΌμ΄ν”„μŠ€νƒ€μΌ 관리 ν”„λ‘œκ·Έλž¨μ„ 지ν–₯ν•©λ‹ˆλ‹€.

λ‚˜μ˜ 옷μž₯은 크게 의λ₯˜/μ‹ λ°œ/μž‘ν™” μΉ΄ν…Œκ³ λ¦¬λ‘œ λΆ„λ₯˜λ©λ‹ˆλ‹€. μ•„μ΄ν…œ 등둝 μ‹œ 이미지, κ³„μ ˆ, ꡬ맀일, ꡬ맀처(λΈŒλžœλ“œ), 가격 등을 ν•¨κ»˜ μž…λ ₯ν•©λ‹ˆλ‹€. μ•„μ΄ν…œ μ •λ³΄λŠ” 톡계에 ν™œμš©λ˜μ–΄ 월별 의λ₯˜ ꡬ맀 λΉ„μš© 등을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈ githubμ£Όμ†Œ

ν”„λ‘œμ νŠΈ μ—­ν• 

ν”„λ‘œμ νŠΈλŠ” 4λͺ…μ΄μ„œ 진행을 ν–ˆμœΌλ©°, 두 뢄이 ν”„λ‘ νŠΈ ν•œ 뢄이 ν’€μŠ€νƒ, μ œκ°€ λ°±μ—”λ“œλ‘œ 진행을 ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

βœ”οΈ Expected Features

Bare Minimum

  • νšŒμ›κ°€μž…, 둜그인, λΉ„λ°€λ²ˆν˜Έ λ³€κ²½
  • 의λ₯˜ 등둝 / νŽΈμ§‘ / μ‚­μ œ κΈ°λŠ₯
  • 의λ₯˜ 등둝 μ‹œ λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ 이미지 μ—…λ‘œλ“œ
  • 의λ₯˜ κ΅¬λ§€λΉ„μš© 월별 톡계 제곡
  • μ„Ένƒν‘œμ‹œκΈ°ν˜Έ 정보 제곡

Advanced

  • μ†Œμ…œ 둜그인
  • μžλ™ 둜그인
  • λΉ„λ°€λ²ˆν˜Έ μ°ΎκΈ°
  • 이미지 μ—…λ‘œλ“œ μ‹œ ν¬λ‘­ν•˜κΈ°
  • 카메라 μ•± μ ‘κ·Ό ν›„ μ΄¬μ˜ν•˜κΈ°
  • ν™”λ©΄ μŠ€μ™€μ΄ν”„ κΈ°λŠ₯
  • μ•„μ΄ν…œ 길게 ν΄λ¦­ν•˜μ—¬ μ‚­μ œν•˜κΈ°
  • μ•„μ΄ν…œ 정보 νŽ˜μ΄μ§€μ—μ„œ λ²„νŠΌ ν•˜λ‚˜μ— νŽΈμ§‘/μ‚­μ œ κΈ°λŠ₯ λ‹΄κΈ°(클릭 μ‹œ νŽΌμ³μ§€λ„λ‘)
  • 의λ₯˜ 관리에 κ΄€ν•œ μœ μš©ν•œ 정보 제곡

πŸ›  Stack


λ°±μ—”λ“œ λΆ€λΆ„μž…λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈλŠ” JavaScript, node JSλ₯Ό 기반으둜 μž‘μ„±λ˜μ—ˆκ³  μ‚¬μš©ν•œ ν”„λ ˆμž„μ›Œν¬λŠ” expressμž…λ‹ˆλ‹€. μ½”λ“œμ˜ λ²„μ „κ΄€λ¦¬λŠ” github둜 κ΄€λ¦¬ν•˜μ˜€κ³ , μ„œλ²„ λ°°ν¬λŠ” aws의 ec2λ₯Ό μ‚¬μš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€. λ˜ν•œ νŒ€μ›κ°„μ˜ μ½”λ“œμŠ€νƒ€μΌμ„ λ™μΌν•˜κ²Œ ν•˜κΈ° μœ„ν•΄ eslintλ₯Ό μ μš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€. ORM은 Sequelizeλ₯Ό μ΄μš©ν•˜μ˜€κ³  μ‚¬μš©ν•œ databaseλŠ” MySQLμž…λ‹ˆλ‹€. 이 λ˜ν•œ 배포 μ‹œ RDSλ₯Ό 톡해 μ§„ν–‰ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μœ μ €μΈμ¦μ€ JWTλ₯Ό μ‚¬μš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

βš™οΈ Architecture



πŸ“± Wire Frame

miro | otjang wireframing


πŸ—„ Schema

πŸ“ API λ¬Έμ„œ

gitbook | otjang api

🀟 μ‹œμ—° GIF

νšŒμ›κ°€μž…/νƒˆν‡΄λΉ„λ°€λ²ˆν˜Έ λ³€κ²½μžλ™ 둜그인
μΉ΄ν…Œκ³ λ¦¬μ•„μ΄ν…œ μΆ”κ°€μ•„μ΄ν…œ νŽΈμ§‘
μ•„μ΄ν…œ μ‚­μ œν†΅κ³„μ„Ένƒν‘œμ‹œκΈ°ν˜Έ

🀷 μ–΄λ €μ› λ˜ 점 & 해결방법

4μ£Ό ν”„λ‘œμ νŠΈμ˜€κΈ° λ•Œλ¬Έμ—, 초반 섀계λ₯Ό 생각을 많이 ν–ˆμ—ˆλ˜ 것 κ°™μŠ΅λ‹ˆλ‹€.

처음 ν”„λ‘œμ νŠΈλ₯Ό μ„€κ³„ν•˜λ©΄μ„œ 옷의 μ’…λ₯˜κ°€ 정말 λ‹€μ–‘ν•˜μ—¬ κ³„μ†ν•΄μ„œ λΆ„κΈ°κ°€ λŠ˜μ–΄λ‚¬κ³  νƒ€μž…μ— λ”°λ₯Έ λΆ„κΈ°κΉŒμ§€ ν•©μΉ˜λ©΄ 12κ°œκ°€ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. 또 κ³„μ ˆλ³„λ‘œ μ˜·μ„ λ³΄μ—¬μ£ΌλŠ” κΈ°λŠ₯ λ˜ν•œ μžˆμ—ˆ λ•Œλ¬Έμ— ν™”λ©΄μ—μ„œ μ„œλ²„λ‘œ apiμ½œμ„ κ³„μ†ν•΄μ„œ λ‚ λ¦¬λŠ” κ°€λŠ₯성을 μƒκ°ν•΄λ΄€λ˜ 것 κ°™μŠ΅λ‹ˆλ‹€.(μœ μ €κ°€ κ³„μ†ν•΄μ„œ λΆ„κΈ°λ₯Ό λ°”κΏ”μ„œ μ˜·μ„ ν™•μΈν•˜κ±°λ‚˜... 그런 경우, call이 많이 였면 μ„œλ²„μ— κ³ΌλΆ€ν•˜κ°€ μžˆμ„ 수 μžˆμ§€ μ•Šμ„κΉŒ μƒκ°ν–ˆμ—ˆμŠ΅λ‹ˆλ‹€.)
κ·Έλž˜μ„œ 이λ₯Ό ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œμ—μ„œ μœ μ €κ°€ λ“±λ‘ν•œ μ˜·λ“€μ„ 가지고 있고, 이λ₯Ό 톡해 λ Œλ”λ§μ„ ν•˜λŠ” 것이 쒋을 것이라고 μƒκ°ν•˜μ˜€μŠ΅λ‹ˆλ‹€. 그럼 ν•œ μœ μ €μ˜ μ „μ²΄λ“±λ‘ν•œ 데이터λ₯Ό μ–΄λ–»κ²Œ λ„˜κ²¨μ€˜μ•Όν•˜λŠ”μ§€κ°€ λ¬Έμ œμ˜€μŠ΅λ‹ˆλ‹€.

데이터λ₯Ό db에 μ €μž₯ν• λ•Œ ν•œ μ˜·μ€ μ—¬λŸ¬ κ³„μ ˆμ˜ 옷이 될 수 있기 λ•Œλ¬Έμ— λ‹€λŒ€λ‹€ 관계라 ν…Œμ΄λΈ”μ΄ λΆ„λ¦¬λ˜μ–΄μžˆλŠ”λ° 이λ₯Ό ν΄λΌμ΄μ–ΈνŠΈ μš”μ²­ μ‹œλ§ˆλ‹€ 쑰인을 μ΄μš©ν•˜λŠ” 것 λ³΄λ‹€λŠ” λ·°ν…Œμ΄λΈ”μ„ λ§Œλ“€μ–΄λ†“κ³  μ§„ν–‰ν•˜λŠ” 것이 μ ‘κ·Όν•˜μ§€ μ•Šμ„ 데이터에 λŒ€ν•œ 접근도 막아주고 μš”μ²­μ‹œλ§ˆλ‹€ κΈ΄ 퀴리λ₯Ό μ‹€ν–‰ν•  ν•„μš”κ°€ μ—†κ² λ‹€κ³  νŒλ‹¨ν•˜μ—¬ λ·°ν…Œμ΄λΈ”μ„ μƒμ„±ν•˜λ„λ‘ μ§„ν–‰ν•˜κΈ°λ‘œ νŒ€μ›λ“€κ³Ό κ²°μ •ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

근데 Sequelizeμ—μ„œ viewλ₯Ό μ§€μ›ν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€...(λΉ„κ·Ή) 정말 λ©°μΉ κ°„ μ‚½μ§ˆν•˜κ³  정말 방법이 없어맀 μš”μ²­λ§ˆλ‹€ 쑰인문을 μ‹€ν–‰μ‹œμΌœμ•Όν•˜λ‚˜ ν•˜κ³  생각을 ν–ˆμ—ˆμ§€λ§Œ... λ„€ 방법은 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. stackoverflowμ—μ„œ μš°μ—°νžˆ 방법을 λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€. migration을 μ΄μš©ν•΄μ„œ view ν…Œμ΄λΈ”μ„ 생성할 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

μžμ„Έν•œ 방법은 TIL으둜 λΈ”λ‘œκ·Έλ‘œ μ •λ¦¬ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
TIL | sequelize에 view table μ μš©μ‹œν‚€κΈ°

πŸ‘€ ν”„λ‘œμ νŠΈλ₯Ό λλ§ˆμΉ˜λ©΄μ„œ

이번 ν”„λ‘œμ νŠΈλ₯Ό ν†΅ν•΄μ„œ 2μ£Ό ν”„λ‘œμ νŠΈλ• 생각해보지 λͺ»ν–ˆλ˜ 것듀을 μƒκ°ν•˜λ©΄μ„œ μ½”λ“œλ₯Ό μ§°κ³ , λ°μ΄ν„°μ˜ μ •ν™•μ„±μ΄λ‚˜ 무결성 등을 μƒκ°ν•˜λ©΄μ„œ μ½”λ“œλ₯Ό μž‘μ„±ν•  수 μžˆμ–΄μ„œ κ·Έλž˜λ„ 저에겐 λœ»κΉŠμ€ ν”„λ‘œμ νŠΈ μ˜€λ˜ 것 κ°™μŠ΅λ‹ˆλ‹€!

이 이외에도 μ†Œμ…œλ‘œκ·ΈμΈ 같은 κ²½μš°μ—λ„ 어렀움을 κ²ͺμ—ˆμŠ΅λ‹ˆλ‹€. μ„œλ²„ μ‚¬μ΄λ“œμ—μ„œ μ†Œμ…œλ‘œκ·ΈμΈμ„ μ§„ν–‰ν•˜λ €κ³  ν–ˆλŠ”λ° μ΄λŠ” ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ μ²˜λ¦¬ν•˜κ³  λ”°λ‘œ db에 νšŒμ› 등둝을 ν•˜λŠ” 일을 ν•„μš”λ‘œ ν•˜μ˜€κ³  κ·Έ λΆ€λΆ„μ—μ„œ λ‹€λ₯Έ μ‚¬μ΄νŠΈλ“€μ˜ μ†Œμ…œλ‘œκ·ΈμΈμ΄ μ™œ λ‹€λ₯Έκ°€μ— λŒ€ν•΄μ„œ 이해도 ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

특히 μ†Œν†΅μ΄ μ•ˆλ˜μ–΄μ„œ ν”„λ‘œμ νŠΈλ₯Ό λ§ˆμΉ˜μ§€ λͺ»ν–ˆλ˜ μ €λ²ˆ ν”„λ‘œμ νŠΈμ™€ 달리 μ΄λ²ˆμ—λŠ” 맀일 μ˜€μ „ 10μ‹œμ— λ―ΈνŒ…μ„ 톡해 μžμ‹ μ΄ μ§„ν–‰ν•œ 일과 κ³„νšν•œ 일을 κ³΅μœ ν•˜λŠ” μ‹œκ°„μ„ κ°€μ Έμ„œ 계속 λ¬΄νƒˆν•˜κ²Œ ν”„λ‘œμ νŠΈλ₯Ό 끝마칠 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

ν”„λŸ°νŠΈμ—”λ“œμ—μ„œ expoκ°€ μ•„λ‹Œ reactnative-cliλ₯Ό μ΄μš©ν•΄μ„œ 배포의 어렀움을 κ²ͺμ–΄ κ²°κ΅­ λ°°ν¬λŠ” ν•˜μ§€ λͺ»ν•œ 아쉬움이 λ‚¨μ§€λ§Œ, ν˜‘μ—…μ˜ μž₯점과 λ™λ£Œμ˜ μ€‘μš”μ„±μ„ λͺ¨λ‘ λŠλ‚„ 수 μžˆμ—ˆλ˜ ν”„λ‘œμ νŠΈ μ˜€μŠ΅λ‹ˆλ‹€.

profile
μ•ˆμ •μ„±, ν™•μž₯μ„± μžˆλŠ” μ„œλ²„λ₯Ό κ΅¬μΆ•ν•˜κ³  κ°€κΎΈλŠ” 것을 λͺ©ν‘œλ‘œ κ³΅λΆ€ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. πŸ€”πŸ€”πŸ€”πŸ€” λΆ€μ‘±ν•˜κΈ°μ— λ§žμ§€ μ•ŠλŠ” λ‚΄μš©μ΄ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. 과감없이 ν”Όλ“œλ°± ν•΄μ£Όμ‹œλ©΄ 정말 κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€..πŸ™

0개의 λŒ“κΈ€