πŸ“‚ λΉ„μ¦ˆλ‹ˆμŠ€ μΉ΄λ“œ 메이컀 - λͺ…함 λ§Œλ“€κΈ°

sohyeonbak_olyΒ·2021λ…„ 5μ›” 5일
0

ν”„λ‘œμ νŠΈ 리뷰

λͺ©λ‘ 보기
3/3
post-thumbnail

🧩 Project Summary

μΉ΄λ“œλͺ…함을 직접 λ§Œλ“œλŠ” νŽ˜μ΄μ§€μž…λ‹ˆλ‹€. μ˜ˆμ‹œλ‘œ λ§Œλ“€μ–΄μ Έ μžˆλŠ” μ‹œμ•ˆ λ‘κ°œλ₯Ό μˆ˜μ •ν•΄μ„œ μ‚¬μš©ν•  수 있고, μƒˆλ‘œ λͺ…함을 λ§Œλ“€ 수 μžˆλ„λ‘ μΆ”κ°€ μž…λ ₯폼이 ν•¨κ»˜ μžˆμŠ΅λ‹ˆλ‹€. 색상 선택 λ˜ν•œ ν•  수 μžˆλŠ”λ° μ„Έκ°€μ§€μ˜ μœ ν˜•μ΄ 있고, μΉ΄λ“œμ— λ“€μ–΄κ°ˆ 이미지λ₯Ό 선택할 수 μžˆλ„λ‘ 이미지 선택 폼이 μžˆμŠ΅λ‹ˆλ‹€. 기쑴에 λ§Œλ“€μ–΄μ Έ μžˆλŠ” μ‹œμ•ˆμ„ 포함해 λ§Œλ“  λͺ…함듀은 λ§ˆμŒμ— 듀지 μ•Šλ‹€λ©΄ μ‚­μ œ ν•  수 μžˆλ‹€. 개인의 νŽ˜μ΄μ§€λ‘œ μ‚¬μš©λ˜λ„λ‘ 둜그인 κΈ°λŠ₯이 μžˆμŠ΅λ‹ˆλ‹€.

λΉ„μ¦ˆλ‹ˆμŠ€ μΉ΄λ“œ 메이컀 νŽ˜μ΄μ§€ ν™•μΈν•˜κΈ° : 클릭!


🧩 Stack

  • HTML/CSS
  • Javascript
  • postCSS
  • Create React App
  • React - hooks
  • React-dom
  • Firebase - authentication
  • Cloudinary
  • Netlify

🧩 Skill

  • 둜그인/λ‘œκ·Έμ•„μ›ƒ
  • κΈ°μ‘΄ λͺ…함 μˆ˜μ •ν•˜κΈ°
  • μƒˆλ‘œμš΄ λͺ…함 λ“±λ‘ν•˜κΈ°
  • μΉ΄λ“œ μ‚­μ œν•˜κΈ°
  • μΉ΄λ“œ 색상 선택
  • μΉ΄λ“œ 이미지 λ“±λ‘ν•˜κΈ°

🧩 Projects

🏷 둜그인/λ‘œκ·Έμ•„μ›ƒ


firebase둜 googleκ³Ό github을 μ΄μš©ν•΄ κ°„νŽΈ λ‘œκ·ΈμΈμ„ ν•  수 μžˆλ„λ‘ μ œμž‘ν–ˆμœΌλ©°, μ΄ˆκΈ°ν™”λ©΄μ„ 둜그인 νŽ˜μ΄μ§€λ‘œ μ„€μ •ν•΄ λ‘œκ·ΈμΈμ„ μžμ—°μŠ€λŸ½κ²Œ μœ λ„ν•΄ κ°œμΈν™” νŽ˜μ΄μ§€λ‘œ μ΄μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 둜그인 ν›„ 메인 ν™”λ©΄ 우츑 μƒλ‹¨μ—μ„œ λ‘œκ·Έμ•„μ›ƒμ„ ν•˜λ©΄ 둜그인 νŽ˜μ΄μ§€λ‘œ μžμ—°μŠ€λŸ½κ²Œ 화면을 μ „ν™˜ν•©λ‹ˆλ‹€.

🏷 κΈ°μ‘΄ λͺ…함 μˆ˜μ •ν•˜κΈ°


νŽ˜μ΄μ§€ κΈ°λ³Έκ°’μœΌλ‘œ 두가지 컬러의 λ‹€λ₯Έ λͺ…함을 μ‹œμ•ˆμœΌλ‘œ 두고 μž…λ ₯ νΌμ—μ„œ μˆ˜μ •ν•˜λ©΄ μˆ˜μ •λœ λ‚΄μš©μ΄ λ°”λ‘œ λͺ…ν•¨μ‹œμ•ˆμ— 보일 수 μžˆλ„λ‘ μ œμž‘ν–ˆμŠ΅λ‹ˆλ‹€.

🏷 μƒˆλ‘œμš΄ λͺ…함 λ“±λ‘ν•˜κΈ°


그레이 μƒ‰μƒμ˜ μž…λ ₯폼은 μƒˆλ‘œμš΄ λͺ…함을 μΆ”κ°€ν•  λ•Œ μ‚¬μš©ν•˜λŠ” κ²ƒμœΌλ‘œ 초기 μž…λ ₯값을 μž…λ ₯ν•˜κ³  Addλ²„νŠΌμ„ λˆ„λ₯΄λ©΄ μž…λ ₯λ‚΄μš©μ˜ λͺ…함과 μž…λ ₯폼이 μƒˆλ‘­κ²Œ μΆ”κ°€λ©λ‹ˆλ‹€.

🏷 λͺ…함 μ‚­μ œν•˜κΈ°


κΈ°μ‘΄ λͺ…ν•¨μ˜ λ‚΄μš©μ΄λ‚˜ μƒˆλ‘­κ²Œ μΆ”κ°€ν•œ λͺ…ν•¨μ˜ λ‚΄μš©μ„ μ‚­μ œν•˜κ³  μ‹Άμ„λ•Œ μž…λ ₯폼의 우츑 ν•˜λ‹¨μ˜ Deleteλ²„νŠΌμ„ λˆ„λ₯΄λ©΄ ν•΄λ‹Ή λͺ…함과 μž…λ ₯폼이 μ‚­μ œλ©λ‹ˆλ‹€.

🏷 λͺ…함 색상 선택

λͺ…ν•¨μ˜ 색상은 3κ°€μ§€λ‘œ 주어지고 White/Black/Blue둜 κΈ°μ‘΄ μΉ΄λ“œμ—μ„œ 색상 변경을 μ›ν• μ‹œ λ‹€λ₯Έ 컬러의 색상을 μ„ νƒν•˜λ©΄ ν•΄λ‹Ή μƒ‰μƒμœΌλ‘œ μΉ΄λ“œκ°€ λ³€κ²½λ©λ‹ˆλ‹€.

🏷 λͺ…함 이미지 λ“±λ‘ν•˜κΈ°

λͺ…함에 사진을 λ“±λ‘ν•˜λŠ” μ˜μ—­μ΄ μžˆλŠ”λ° 이미지 μ„ νƒλ²„νŠΌμ„ λˆ„λ₯΄κ³  μ›ν•˜λŠ” 이미지λ₯Ό μ„ νƒν•˜λ©΄ ν•΄λ‹Ή 이미지가 λͺ…함에 등둝이 λ©λ‹ˆλ‹€. 사진을 μ €μž₯ν•˜κ³  λ“±λ‘ν•˜λŠ” λ°©μ‹μœΌλ‘œ Cloudinaryλ₯Ό μ΄μš©ν–ˆμŠ΅λ‹ˆλ‹€.




🧩 ν›„κΈ°

λ§Œλ“€κ³ , μˆ˜μ •ν•˜κ³ , μ‚­μ œν•˜λŠ” λ°©μ‹μ˜ νŽ˜μ΄μ§€λ₯Ό λ§Œλ“  ν”„λ‘œμ νŠΈμ˜€μŠ΅λ‹ˆλ‹€. λ¦¬μ•‘νŠΈμ˜ state와 Props의 관계섀정과 μ»΄ν¬λ„ŒνŠΈλ₯Ό μͺΌκ°œκ³  μ„€μ •ν•˜λŠ” 방식을 많이 μ•Œμ•„κ°”λ˜ ν”„λ‘œμ νŠΈμ˜€μŠ΅λ‹ˆλ‹€. λ˜ν•œ firebaseλ‚˜ cloudinary와 같은 ν”„λ ˆμž„μ›Œν¬λ₯Ό μ΄μš©ν•΄ 데이터 관리없이 μžμ—°μŠ€λŸ½κ²Œ μ‚¬μš©μ΄ κ°€λŠ₯ν•œ νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€ 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. ν”„λ‘œμ νŠΈμ˜ μ‚¬μ΄μ¦ˆμ™€ μ˜λ„μ— λ§žλŠ” λΌμ΄λΈŒλŸ¬λ¦¬λ‚˜ ν”„λ ˆμž„μ›Œν¬λ₯Ό μ‚¬μš©ν•˜λŠ” κ²ƒμ˜ μž₯점을 μ•Œ 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

λ˜ν•œ 처음으둜 postCSSλ₯Ό μ΄μš©ν•΄ λͺ¨λ“ˆν™”ν•œ css파일둜 μ»΄ν¬λ„ŒνŠΈ λ³„λ‘œ μŠ€νƒ€μΌμ„ μ§€μ •ν•˜κ³ , λ³€μˆ˜λ₯Ό λ°”λ‘œ ν• λ‹Ήν•΄μ„œ μŠ€νƒ€μΌμ„ λ§Œλ“œλŠ” μƒˆλ‘œμš΄ 방식을 μ΅ν˜”μŠ΅λ‹ˆλ‹€.

🧩 κ΅μœ‘ν›„κΈ°

  • λ“œλ¦Όμ½”λ”©
  • firebase Docs
  • Cloudinary Docs
  • PostCSS Docs

> λΉ„μ¦ˆλ‹ˆμŠ€ μΉ΄λ“œ 메이컀 μ½”λ“œλ³΄κΈ° : [클릭!](https://github.com/sohyeonBak/Business-Card-Maker)
profile
μ •λ¦¬ν•˜κ³  κΈ°μ–΅ν•˜λŠ” κ³³

관심 μžˆμ„ λ§Œν•œ 포슀트

0개의 λŒ“κΈ€