🎞 #02 μ™“μ±  클둠코딩 'MICCHA' Phase 2 기둝 (둜그인 ν›„ Home ν™”λ©΄, μ˜ν™” λͺ©λ‘ μŠ¬λΌμ΄λ“œ μž‘μ—…)

leehyunjuΒ·2021λ…„ 7μ›” 14일
5
post-thumbnail
post-custom-banner

miccha ν”Œμ  μ†Œκ°œμ™€ νŒ€ μ†Œκ°œλŠ” 이전에 ν–ˆκ³  μ΄μ–΄μ„œ Phase2 λ₯Ό 기둝해보렀 ν•œλ‹€.

βŒ›οΈ Phase 02 μž‘μ—… κΈ°κ°„

⭐️ 2021. 06. 14 ~ 06. 30


πŸ’» μž‘μ—… λͺ©ν‘œλ¬Ό

  • Home νŽ˜μ΄μ§€ λ§ˆν¬μ—… 및 μŠ€νƒ€μΌλ§, UI μ»΄ν¬λ„ŒνŠΈ μž‘μ—…
  • μ˜ν™” 무비 리슀트 API μΈν”Όλ‹ˆν‹° 크둀링
  • λΉ„λ°€λ²ˆν˜Έ μ°ΎκΈ° νŽ˜μ΄μ§€ API 연동
  • μΉ΄ν…Œκ³ λ¦¬μ— μ†ν•œ 컨텐츠λ₯Ό ν‘œμ‹œν•˜λŠ” κΈ°λŠ₯
  • 컨텐츠에 λŒ€ν•œ μ„ΈλΆ€ 정보λ₯Ό ν‘œμ‹œν•˜λŠ” κΈ°λŠ₯

Phase 01 단계가 λλ‚˜κ³  λ‚œ λ’€, μ„œλ‘œ 1주일 쑰금 λ„˜κ²Œ νœ΄μ‹μ„ κ°€μ‘Œλ‹€. 그리고 μ•½μ†λŒ€λ‘œ Phase 02 μž‘μ—…μ— λŒμž…ν–ˆλ‹€. 이전 단계 μž‘μ—…μ€ 에피타이저 급이라면 이 μž‘μ—…μ€ μ§„μ§œ 메인이라 ν•  수 μžˆλ‹€. UI μ»΄ν¬λ„ŒνŠΈλ₯Ό μ–΄λ–»κ²Œ ꡬ성할지 μ™“μ± ν”Œλ ˆμ΄ μ‚¬μ΄νŠΈ λ³΄λ©΄μ„œ 짱ꡬ ꡴리기 λ°”λΉ΄λ‹€.

제일 μž¬λ°Œμ—ˆκ³  고민도 정말 많이 ν–ˆλ˜. 사싀 아직도 μ•ΌκΈˆμ•ΌκΈˆ μˆ˜μ • μž‘μ—…μ€‘μ΄λ‹€. 그리고 μž‘μ—…ν•˜λ©΄μ„œ μ¦κ±°μ› λ˜ 것 ν•˜λ‚˜ 더 μΆ”κ°€ν•˜μžλ©΄ μ˜ν™” ν¬μŠ€ν„° λ³΄λŠ” μž¬λ―Έκ°€ μ μ ν•˜λ‹€λŠ”κ±°.. μž‘μ—…ν•˜λ‹€λ§κ³  μ˜ν™” λ½λΏŒμ™€μ„œ κ΄€λžŒν•˜λŠ”λ° 세상엔 μž¬λ°ŒλŠ”κ²Œ λ„˜ λ§Žμ€ λ“― ν•˜λ‹€ 였래 살아야지

Swiper μŠ¬λΌμ΄λ“œ 라이브러리λ₯Ό μ‚¬μš©ν–ˆκ³  ν•œ μž₯μ”© λ„˜μ–΄κ°ˆ λ•Œλ§ˆλ‹€ FadeIn 효과λ₯Ό λ„£μ–΄μ„œ κ΅¬ν˜„ν–ˆλ‹€. 그리고 μ˜ν™” μž₯λ₯΄λ³„λ‘œ μŠ¬λΌμ΄λ“œλ₯Ό λ‹€μ„― μ’…λ₯˜λ‘œ λ‚˜λˆ„μ—ˆλ‹€.

  • μ• λ‹ˆλ©”μ΄μ…˜
  • (혐지주의) 곡포/슀릴러
  • ν‚€μ¦ˆ
  • SF μ•‘μ…˜
  • 둜맨슀

λ‚΄κ°€ 맑은 μž‘μ—…λ¬Ό 쀑 κ°€μž₯ κ³ λ―Ό 많이 ν–ˆλ˜ 뢀뢄을 꼽자면 λ°”λ‘œ 이 movieItem μ»΄ν¬λ„ŒνŠΈμ™€, movieSlider 뢀뢄이닀. 일단 λ§ˆν¬μ—…λ„ μ‹ κ²½ 많이 썼고 왓챠와 정말 ν‘μ‚¬ν•˜κ²Œ λ§Œλ“€κΈ° μœ„ν•΄μ„œ λͺ‡ λ²ˆμ”© λœ―μ–΄κ³ μ³μ„œ λ‚˜μ˜¨ 결과물이닀. μ™„λ²½ν•˜κ²Œ 클둠할 수 μ—†μ–΄ μ’€ μ•„μ‰½μ§€λ§Œ,, λ‚˜μ€‘μ— 더 λ””λ²¨λ‘­ν•˜λ©΄ λ˜λŠ” λΆ€λΆ„μ΄λ‹ˆκΉŒ..!

MouseHover ν–ˆμ„ μ‹œ ν•΄λ‹Ή thisλŠ” scale 이 μ»€μ§€λ©΄μ„œ ν˜•μ œ νƒœκ·Έλ“€μ„ λ°€μ–΄λ‚΄λŠ” λ™μž‘μ€ trasform:translateX() 속성을 μ΄μš©ν•˜μ—¬ μž‘μ—… ν–ˆλ‹€. 이 과정에 μžˆμ–΄μ„œ 머리가 ν„°μ§ˆ λ»” ν–ˆλ˜κ²Œ μŠ¬λΌμ΄λ“œ 캐루셀 라이브러리인 slick을 μ¨μ„œ μž‘μ—…ν•˜λ‹ˆ μœ„ Demo 처럼 κ΅¬ν˜„μ΄ μ•ˆλœλ‹€... κ·Έλž˜μ„œ μŠ¬λΌμ΄λ“œ ν™”μ‚΄ν‘œ λ²„νŠΌ 눌러 λ„˜κΈ°λŠ” 것은 JS둜 κ΅¬ν˜„ν•˜λŠ” 방식을 μ„ νƒν•˜κ²Œ λ˜μ—ˆλ‹€.

그리고 μ™“μ± μ—μ„œλŠ” IE(읡슀)μ—μ„œλ„ 잘 보이도둝 크둜슀 λΈŒλΌμš°μ§• μ‹ κ²½μ¨μ„œ μž‘μ—…ν•œ λͺ¨μ–‘인데 λ‚˜λŠ” CSS μ΅œμ‹  기술(?)인 grid와 flexλ₯Ό μ‚¬μš©ν•΄μ„œ μž‘μ—…ν–ˆκΈ°μ— IE와 Edge12-15μ—λŠ” μ•ˆνƒ€κΉμ§€λ§Œ λͺ» λ³΄λŠ”κ±Έλ‘œ

λ‚΄κ°€ μ‚¬μš©ν•  CSSκ°€ μ–΄λŠ λΈŒλΌμš°μ €κΉŒμ§€ μ§€μ›ν•˜λŠ”μ§€ 확인할 수 μžˆλŠ” μ‚¬μ΄νŠΈ
μ°Έκ³  : https://caniuse.com/

μΊ¬.. λΏŒλ“―ν•˜λ‹€..

πŸ‘‰ μ‚¬μ΄νŠΈ λ°”λ‘œκ°€κΈ°

https://miccha.vercel.app/home

profile
μ•„λŠ‘ν•œ λ‡Œκ³΅κ°„ 🧠
post-custom-banner

2개의 λŒ“κΈ€

comment-user-thumbnail
2021λ…„ 7μ›” 19일

μž˜λ§Œλ“œμ…¨λ„€μš”

1개의 λ‹΅κΈ€