[Portfolio] 🍫 ROECY' Chocolate

jinyoung985Β·2022λ…„ 10μ›” 21일
0

Portfolio

λͺ©λ‘ 보기
1/7
post-thumbnail

πŸ“‹ ROECY' Chocolate

πŸ“Œ νŒ€λͺ… : μ—΄ν’ˆνƒ€ (열내지말고 ν’ˆμœ„μ§€ν‚€λ©° νƒ€μžμΉ˜μž)

  • λͺ¨ν‹°λΈŒλ‘œ ν•œ μ‚¬μ΄νŠΈ : https://roycechocolate.com/
  • νŒ€μž₯ : κΉ€μ§„μ˜
  • FE : κΉ€μ§„μ˜ κΉ€μœ ν˜„ μ •μ˜ˆμ› 천찬영
  • BE : μ˜€μ„œμ€€ μ˜€μ§€ν˜Έ

μ‚¬μš©ν•œ 기술 μŠ€νƒ
FE : JavaScript React.js sass react-slick λ“±λ“±
BE : Node.js JavaScript MySQL

JUSTCODE κ³Όμ •μ—μ„œ 처음으둜 μ§„ν–‰λœ 1μ°¨ νŒ€ ν”„λ‘œμ νŠΈμž…λ‹ˆλ‹€.

이 ν”„λ‘œμ νŠΈλŠ” νŒ€μž₯인 μ €λ₯Ό ν¬ν•¨ν•˜μ—¬ FE 총 4λͺ…, BE 2λͺ…μœΌλ‘œ 이루어진 νŒ€μœΌλ‘œ μ§„ν–‰ν–ˆκ³ , 컀머슀 μ‚¬μ΄νŠΈλ₯Ό λ§Œλ“€μ–΄λ³΄κ³  μ‹Άμ–΄ νŒ€μ›λ“€κ³Όμ˜ ν˜‘μ˜ν•˜μ— ROYCE’ Chocolate ν™ˆνŽ˜μ΄μ§€λ₯Ό λͺ¨ν‹°λΈŒλ‘œ μ œμž‘ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

μ—¬κΈ°μ„œ λͺ¨ν‹°λΈŒλ‘œ μ œμž‘ν•˜μ˜€λ‹€λŠ” 건, λˆ„κ΅°κ°€μ˜ μ½”λ“œλ₯Ό κ·ΈλŒ€λ‘œ 볡사 λΆ™μ—¬λ„£κΈ° ν•œ 것이 μ•„λ‹Œ νŽ˜μ΄μ§€μ˜ ꡬ쑰λ₯Ό μ°Έκ³ ν•˜μ—¬ 직접 μ½”λ“œλ₯Ό μž‘μ„±ν•œκ²ƒμ„ λœ»ν•©λ‹ˆλ‹€.

이 ν”„λ‘œμ νŠΈμ˜ μ£Όμš” κΈ°λŠ₯은 νšŒμ›κ°€μž… 및 둜그인, μƒν’ˆ ꡬ맀 등이 μžˆμŠ΅λ‹ˆλ‹€.


πŸ”— 링크

πŸ’» GitHub

πŸ“‹ 회고둝


πŸ”§ λ‚΄κ°€ κ΅¬ν˜„ν•œ κΈ°λŠ₯

1. Nav (Header)

νŽ˜μ΄μ§€μ˜ Y μΆ• μŠ€ν¬λ‘€μ„ κ°μ§€ν•˜μ—¬ 일정 슀크둀 λ°‘μœΌλ‘œ 내렀갔을 λ•Œμ™€ nav bar에 λ§ˆμš°μŠ€κ°€ μ˜¬λΌκ°”μ„ λ•Œ nav bar에 λ‹€λ₯Έ ν΄λž˜μŠ€κ°€ 적용되게 ν•œ λ’€, 각 ν΄λž˜μŠ€μ— λ‹€λ₯Έ λ””μžμΈμ΄ μ μš©λ˜λ„λ‘ κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.

2. Home (Main) & Carouesel

Carousel은 react-slick 라이브러리λ₯Ό 톡해 κ΅¬ν˜„ν–ˆκ³ , 마우슀 hover μ‹œ μ• λ‹ˆλ©”μ΄μ…˜μ΄ λ™μž‘ν•˜λ„λ‘ κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.

또 λ§ˆμ§€λ§‰ μƒν’ˆ 판맀 μ»΄ν¬λ„ŒνŠΈλŠ” μƒν’ˆ μƒμ„ΈνŽ˜μ΄μ§€λ₯Ό λ§‘μœΌμ‹  μ˜ˆμ›λ‹˜μ˜ μ»΄ν¬λ„ŒνŠΈλ₯Ό μž¬ν™œμš©ν–ˆμŠ΅λ‹ˆλ‹€.

Search κΈ°λŠ₯은 타이핑을 μž…λ ₯ν•  λ•Œλ§ˆλ‹€ 데이터λ₯Ό μš”μ²­ν•˜λŠ” 것이 μ•„λ‹ˆλΌ, λͺ¨λ“  μƒν’ˆ 데이터λ₯Ό λ°›μ•„μ˜¨ ν›„, κ·Έκ±Έ filter λ©”μ†Œλ“œλ₯Ό 톡해 좜λ ₯ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€.

5. Cart

Headerμ—μ„œ CARTλ₯Ό λˆ„λ₯΄κ±°λ‚˜, μƒν’ˆμ„ μž₯λ°”κ΅¬λ‹ˆμ— μΆ”κ°€ν•˜λ©΄ λ‚˜μ˜€λŠ” μ‚¬μ΄λ“œλ°”μž…λ‹ˆλ‹€.

async & await을 ν†΅ν•œ 동기 처리둜 λ¬Όν’ˆ μƒμ„ΈνŽ˜μ΄μ§€μ—μ„œ λ¬Όν’ˆ μΆ”κ°€λ₯Ό ν–ˆμ„ λ•Œ, requestκ°€ μ „λ‹¬λ˜κ³  Cart에 λ¬Όν’ˆμ΄ μΆ”κ°€λœ 후에야 Cartκ°€ 열리도둝 κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.

6. Cart (μƒμ„ΈνŽ˜μ΄μ§€)

Cart μƒμ„ΈνŽ˜μ΄μ§€μ—μ„  Cartμ—μ„œ μ“΄ CartItemBox μ»΄ν¬λ„ŒνŠΈλ₯Ό μž¬ν™œμš©ν–ˆκ³ , 총 가격이 99λ‹¬λŸ¬λ₯Ό λ„˜μ§€ μ•ŠμœΌλ©΄ 총 가격에 배솑비 3λ‹¬λŸ¬κ°€ μΆ”κ°€λ˜κ²Œ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

또 Kakao μ£Όμ†Œ APIλ₯Ό 톡해 배솑지λ₯Ό 직접 μž…λ ₯ν•  수 μžˆλ„λ‘ κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.

7. μ±„νŒ…

μƒλ‹΄μ›κ³Όμ˜ μ±„νŒ…μ€ Tawk.to ν”ŒλŸ¬κ·ΈμΈμ„ 톡해 κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.


🀯 기얡에 λ‚¨λŠ” νŠΈλŸ¬λΈ”

이번 ν”„λ‘œμ νŠΈλ₯Ό ν•˜λ©° κ°€μž₯ 기얡에 λ‚¨λŠ” νŠΈλŸ¬λΈ”μ€ λ°±μ—”λ“œμ™€ ν†΅μ‹ ν•˜λ©° 마주친 μˆ˜λ§Žμ€ μ—λŸ¬λ“€μž…λ‹ˆλ‹€.

특히 Cartμͺ½μ„ 톡신할 λ•Œ κ°€μž₯ 였λ₯˜λ₯Ό 많이 λ§ˆμ£Όν–ˆλŠ”λ°,
μ €λŠ” mock dataλ₯Ό 톡해 Cart UIλ₯Ό κ΅¬μ„±ν•΄λ†“μ•˜λŠ”λ° μ‹€μ œλ‘œ ν†΅μ‹ ν–ˆμ„ λ•Œ μƒν’ˆμ΄ ν•˜λ‚˜λ„ μ—†λŠ” 경우, μˆ˜λŸ‰ 1κ°œμ—μ„œ μ œκ±°ν–ˆμ„ λ•Œ, λΉ„λ‘œκ·ΈμΈ μƒνƒœλ‘œ Cart μ˜€ν”ˆ μ‹œ λ“±λ“± ν”„λ‘ νŠΈμ™€ λ°± 두 ν™˜κ²½ λͺ¨λ‘ μˆ˜λ§Žμ€ μ—λŸ¬μ™€ λ§ˆμ£Όν–ˆμŠ΅λ‹ˆλ‹€.

ν•˜μ§€λ§Œ ν•΄λ‹Ή 파트λ₯Ό λ§‘μœΌμ‹  λ°±μ—”λ“œ μ„œμ€€λ‹˜κ³Ό ν•¨κ»˜ λ©”νƒ€λ²„μŠ€ ν”Œλž«νΌ zepμ—μ„œ 계속 μ‹€μ‹œκ°„μœΌλ‘œ μ†Œν†΅ν•˜λ©° κ²°κ΅­ μ—λŸ¬λ₯Ό μ „λΆ€ μž‘μ•˜κ³ , λͺ¨λ“  경우의 수λ₯Ό ν…ŒμŠ€νŠΈν•΄λ³΄μ•˜μ„ λ•Œ μ•„λ¬΄λŸ° μ—λŸ¬κ°€ μΌμ–΄λ‚˜μ§€ μ•ŠλŠ” κ±Έ 보고 맀우 λΏŒλ“―ν–ˆλ˜ 기얡이 μžˆμŠ΅λ‹ˆλ‹€.


πŸ’ͺ ν”„λ‘œμ νŠΈλ₯Ό 톡해 μ„±μž₯ν•œ λΆ€λΆ„

1. 리더십

이번 ν”„λ‘œμ νŠΈλ₯Ό 톡해 처음으둜 개발 ν”„λ‘œμ νŠΈμ˜ νŒ€μž₯을 맑아 회의, μ—­ν•  λΆ„λ°°, 문제 ν•΄κ²°, μ»¨λ²€μ…˜ λ§žμΆ”κΈ°, ν‹°μΌ“ 관리 λ“± λ‹€μ–‘ν•œ 뢀뢄을 도맑아 μ§„ν–‰ν•˜λ©° 리더십을 κΈ°λ₯Ό 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

2. λ¬Έμ œν•΄κ²° λŠ₯λ ₯

처음으둜 μ§„ν–‰ν•˜λŠ” 개발 ν”„λ‘œμ νŠΈλ‹€ λ³΄λ‹ˆ λ‹€μ–‘ν•œ λ¬Έμ œμ— λΆ€λ”ͺν˜”λŠ”λ°, Git ν˜‘μ—… 문제, μ—λŸ¬ λ“± λ‹€μ–‘ν•œ 상황을 λ§ˆμ£Όν•˜λ©° κ·Έ 상황을 ν•΄κ²°ν•˜λŠ” λŠ₯λ ₯을 ν•΄κ²°ν•˜λŠ” λŠ₯λ ₯을 κΈΈλ €μŠ΅λ‹ˆλ‹€.

3. 정보 탐색 및 ν™œμš©

처음 μ‚¬μš©ν•΄ λ³΄λŠ” κΈ°λŠ₯λ“€ ex) Carousel, Kakao μ£Όμ†Œ API, async await λ“±λ“±
을 ꡬ글링을 톡해 μ‚¬μš©ν•˜λ©° μΈν„°λ„·μ—μ„œ 정보λ₯Ό μ°Ύμ•„ μƒˆλ‘œμš΄ κΈ°μˆ μ„ μ‚¬μš©ν•˜λŠ” μš”λ Ήμ„ μ΅ν˜”μŠ΅λ‹ˆλ‹€.

0개의 λŒ“κΈ€