Search
πŸ’‘

μ •μ‹ μ°¨λ ·!

진행기간
2020/10/01 β†’ 2020/10/31
μ—­ν• 
λ°±μ—”λ“œ
속성
WEB
μ„œλΉ„μŠ€ μƒνƒœ
μ„œλΉ„μŠ€ μ’…λ£Œ

demo 보기

ν”„λ‘œμ νŠΈ κ°œμš” & 개발 동기

κ΅­λ°©λΆ€μ—μ„œ μ£Όμ΅œν•œ 2020 κ΅°μž₯병 곡개SW 해컀톀에 μΆœν’ˆν•œ ν”„λ‘œμ νŠΈμž…λ‹ˆλ‹€.
κ΅°μ—μ„œλŠ” κ΅° μž₯λ³‘μ—κ²Œ μ •μ‹ μ „λ ₯ꡐ윑(μ •ν›ˆκ΅μœ‘)을 맀주 1회 μ‹œν–‰ν•˜λ„λ‘ λ˜μ–΄μžˆμŠ΅λ‹ˆλ‹€.

κΈ°μ‘΄ μ •μ‹ μ „λ ₯ ꡐ윑의 문제점

β€’
μ •μ‹ μ „λ ₯κ΅μœ‘μ„ μœ„ν•œ μ‹œκ°„κ³Ό 곡간이 ν•œμ •μ μ΄κΈ° λ•Œλ¬Έμ— 근무, νœ΄κ°€, 특수보직 λ“±μ˜ 이유둜 μ—΄μ™Έν•œλ‹€λ©΄ κ΅μœ‘μ„ λ“£κ³  싢어도 듀을 μˆ˜κ°€ μ—†μ—ˆμŒ.
β€’
맀주 ν•œλͺ…λ‹Ή ν•œμž₯의 μ’…μ΄λ§Œ μ“΄λ‹€κ³  ν•˜λ”λΌλ„ 일주일이면 60만μž₯, 일년이면 3120만μž₯의 쒅이λ₯Ό 낭비함.
β€’
μ§€νœ˜κ΄€ μž…μž₯μ—μ„œλŠ” μ •μ‹ μ „λ ₯ ꡐ윑 ν›„ μš©μ‚¬λ“€μ˜ 닡변을 μ’…μ΄λ‘œ ν™•μΈν•˜λŠ”λ° λΆˆνŽΈν•¨μ΄ μžˆμ—ˆκ³  이전 μ •μ‹ μ „λ ₯κ΅μœ‘μ— λŒ€ν•œ μ œμΆœλ¬Όμ„ 찾기도 어렀움.
μ΄λŸ¬ν•œ λ¬Έμ œμ μ„ ν•΄κ²°ν•˜κΈ° μœ„ν•΄ κ΅° μ •μ‹ μ „λ ₯ꡐ윑 ν”Œλž«νΌμΈ μ •μ‹ μ°¨λ ·! 을 κ°œλ°œν–ˆμŠ΅λ‹ˆλ‹€.

μ •μ‹ μ°¨λ ·! 의 μž₯점

β€’
μ½”λ‘œλ‚˜ 19둜 μΈν•΄Β λΉ„λŒ€λ©΄μ΄ κ°•μ‘°λ˜λŠ” μƒν™©μ—μ„œ μ—¬λŸ¬λͺ…이 λͺ¨μ΄μ§€ μ•Šκ³ λ„ μ •μ‹ μ „λ ₯ κ΅μœ‘μ„ 받을 수 있음.
β€’
νœ΄κ°€, κ·Όλ¬΄λ‚˜ 사정상 λΆˆμ°Έν•œ 인원듀이 열외없이 정신전λ ₯ κ΅μœ‘μ— μ°Έμ—¬ν•  수 있음.
β€’
각 λΆ€λŒ€ μ§€νœ˜κ΄€μ΄ λΆ€λŒ€μ›μ˜ μ •μ‹ μ „λ ₯ ν˜„ν™©μ„ μ‹€μ‹œκ°„μœΌλ‘œ νŒŒμ•…ν•  수 μžˆμ–΄Β λΆ€λŒ€κ΄€λ¦¬μ— μš©μ΄ν•¨.
β€’
μ •μ‹ μ „λ ₯ ꡐ윑 μžλ£Œμ— μ‚¬μš©λ˜λŠ” 쒅이λ₯ΌΒ μ ˆμ•½ν•  수 있음.

κΈ°λŠ₯

Β λŒ€μ‹œλ³΄λ“œ

λŒ€μ‹œλ³΄λ“œμ—μ„œλŠ” 이번주의 μ •μ‹ μ „λ ₯κ³Ό μ΅œμ‹ μ˜ μš°λ¦¬μ—­μ‚¬ λ°”λ‘œμ•ŒκΈ° 컨텐츠λ₯Ό 확인할 수 있으며,우리 λΆ€λŒ€μ›λ“€μ˜ μ •μ‹ μ „λ ₯ꡐ윑 응닡도 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

Β μ£Όκ°„ μ •μ‹ μ „λ ₯ꡐ윑

Β μš°λ¦¬μ—­μ‚¬λ°”λ‘œμ•ŒκΈ°

μš°λ¦¬μ—­μ‚¬ λ°”λ‘œμ•ŒκΈ°μ—μ„œλŠ” λ‹€μ–‘ν•œ 역사, μ•ˆλ³΄κ΄€ μžλ£Œλ“€μ„ μˆ˜κ°•ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Β λΆ€λŒ€κ΄€λ¦¬

κ΄€λ¦¬μžκ°€ μž₯병이 μ œμΆœν•œ μ •μ‹ μ „λ ₯κ΅μœ‘μ— λŒ€ν•΄ ν”Όλ“œλ°±κ³Ό 평점을 남길 수 있고, μž₯병 λ³„λ‘œ ν‰μ μ˜ 변화도λ₯Ό ν•œλˆˆμ— λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

Β μ •μ‹ μ „λ ₯ν˜„ν™©

μ •μ‹ μ „λ ₯ν˜„ν™©μ—μ„œλŠ” 본인이 μ œμΆœν•œ μ •μ‹ μ „λ ₯κ΅μœ‘μ„ λ‹€μ‹œ μ—΄λžŒν•˜κ³  κ΄€λ¦¬μžλ‘œλΆ€ν„° 받은 평가와 ν”Όλ“œλ°±μ„ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

기술 μŠ€νƒ

front-end

β€’
vue.js
β€’
vuetify

back-end

β€’
node.js
β€’
firebase

λ°œμƒλ¬Έμ œ 및 해결방법

β€’
Β κ΅° λ‚΄μ—μ„œ κ°œλ°œμ„ ν–ˆλŠ”λ°, λ³΄μ•ˆ 상 ssh 접속이 λ§‰ν˜€μžˆμ–΄μ„œ ec2 λ₯Ό μ„œλ²„λ‘œ μ‚¬μš©ν•  수 μ—†λŠ” μƒν™©μ΄μ˜€λ‹€ β‡’ Β μ„œλ²„λ¦¬μŠ€ ν”Œλž«νΌμΈ firebase λ₯Ό 톡해 μ„œλ²„λ₯Ό κ΅¬ν˜„ν•˜μ˜€λ‹€.

ν”„λ‘œμ νŠΈμ—μ„œ 맑은 λΆ€λΆ„

β€’
vue.js
β—¦
ν”„λ‘ νŠΈ λ‹¨μ—μ„œ firebase μ„œλ²„μ™€ ν†΅μ‹ ν•˜λŠ” 파트 μž‘μ„±
β€’
firebase
β—¦
DB섀계 (firestore)
β—¦
ν•¨μˆ˜ μ—…λ‘œλ“œ (fire function)

ν›„κΈ°

λ§Œμ‘±ν–ˆλ˜ 점

β€’
첫 νŒ€ ν˜‘μ—…μ΄μ—ˆκ³ , κ΅° λ‚΄μ—μ„œ κ°œλ°œμ„ ν•˜λŠλΌ 여건이 쒋지 μ•Šμ•˜μ§€λ§Œ 처음 κ³„νšν•œ ν”„λ‘œν† νƒ€μž…μ„ κ΅¬ν˜„ν•œ 것에 λŒ€ν•΄ λ§Œμ‘±ν•¨.
β€’
ν”„λ‘ νŠΈ 2λͺ…, λ°±μ—”λ“œ 1λͺ… μ‘°ν•©μ΄μ—¬μ„œ μ²˜μŒμ—λŠ” 뢀담이 λμ§€λ§Œ, λ‚˜λ¦„λŒ€λ‘œ λ‚΄ λͺ«μ„ ν•΄λ‚Έ 것 κ°™μ•„μ„œ λ§Œμ‘±ν•¨.

μ•„μ‰¬μ› λ˜ 점

β€’
firebaseλ₯Ό 처음 μ¨λ΄μ„œ κ·ΈλŸ΄μˆ˜λ„ μžˆκ² μ§€λ§Œ, 개인적으둜 μ„œλ²„λ¦¬μŠ€ 개발이 μ’€ λΆˆνŽΈν–ˆλ‹€. 특히 자체 DB인 firestoreλŠ” mongoDB 의 ORM 인 mongoose 에 λΉ„ν•΄ 쿼리문의 μ’…λ₯˜λ„ 맀우 적고 문법도 κ°„κ²°ν•˜μ§€ λͺ»ν•˜λ‹€κ³  λŠκΌˆλ‹€.
β€’
firebase λŠ” λΉ λ₯Έ κ°œλ°œμ„ μœ„ν•΄ 인증, μ•ŒλžŒ 같은 κΈ°λŠ₯듀이 κ΅¬ν˜„μ΄ λ˜μ–΄μžˆμ–΄μ„œ κ°€μ Έλ‹€μ“°κΈ°λ§Œ ν•˜λ©΄ λ˜μ§€λ§Œ 개발자 μž…λ§›λŒ€λ‘œ μ»€μŠ€ν…€μ΄ νž˜λ“€μ–΄μ„œ λ‹€μŒλΆ€ν„°λŠ” 쓰지 μ•Šμ„ 것 κ°™λ‹€.
β€’
firebase의 apiλ₯Ό κ·Έλƒ₯ κ°€μ Έλ‹€κ°€ μ“°λŠ” λŠλ‚Œμ΄μ—¬μ„œ λŒμ•„κ°€κΈ°λŠ” ν•˜μ§€λ§Œ λ­”κ°€λ₯Ό μ΄λ€˜λ‹€λŠ” λŠλ‚Œμ΄ μ—†μ—ˆκ³ , μ‹œκ°„μ΄ μ§€λ‚˜λ‹ˆ 머리에 λ‚¨λŠ” 것도 λ”±νžˆ μ—†λŠ” 것 κ°™λ‹€.
β€’
μ‚¬μš©μžκ°€ 주기적으둜 λ“€μ–΄κ°€μ•Ό ν•˜λŠ” μ„œλΉ„μŠ€μ˜ κ²½μš°λŠ” web 이 μ•„λ‹ˆλΌ app 이 더 적합할 것 κ°™λ‹€λŠ” 생각을 ν–ˆλ‹€

github repository 링크

ν”„λ‘œμ νŠΈ μ˜μƒλ§ν¬