Instagram Clone ν›„κΈ°

dustjd1535Β·2020λ…„ 9μ›” 13일
0

Instagram Clone Project πŸŽ‰


Project κΈ°κ°„ πŸ“…

  • 2020.09.01 - 2020.09.11

기술 μŠ€νƒ πŸ”§

  • HTML,CSS
  • JavaScript(ES6+)
  • React
  • SCSS

μž‘μ—… 사항 πŸ“

  • Login Page λ ˆμ΄μ•„μ›ƒ κ΅¬ν˜„
  • Main Page λŒ“κΈ€μ°½ κ΅¬ν˜„
  • Login Page id, Password μž…λ ₯μ‹œ λ²„νŠΌ ν™œμ„±ν™”
  • Main Page λŒ“κΈ€μ°½ key press, λ²„νŠΌ ν΄λ¦­μ‹œ λŒ“κΈ€ κΈ°λŠ₯
  • fetch()λ₯Ό μ΄μš©ν•œ μ„œλ²„μ™€μ˜ 톡신
  • Routeλ₯Ό μ΄μš©ν•œ νŽ˜μ΄μ§€ 이동

κΈ°μ–΅ν•˜κ³  싢은 μ½”λ“œπŸ‘€

map()λ₯Ό ν™œμš©ν•œ μ½”λ“œ 쀄이기

Projectλ₯Ό μ§„ν–‰ν•˜λ©΄μ„œ μ½”λ“œλ₯Ό μ§œλŠ”κ²Œ ν•˜λ‚˜ν•˜λ‚˜ μƒμ†Œν•˜κ³  μ‹ κΈ°ν–ˆμ§€λ§Œ, map() ν™œμš©ν•˜λ©° μ½”λ“œμ˜ 양을 μ€„μΌλΏλ§Œ μ•„λ‹ˆλΌ, 가독성 λ˜ν•œ λ†’μΌμˆ˜ μžˆλ‹€λŠ” 것에 map()을 μƒλ‹Ήνžˆ 많이 쓸것 κ°™λ‹€λŠ” 생각이 λ“€μ—ˆλ‹€. λ‹€μŒ ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•˜λ©΄μ„œ map()을 많이 μ‚¬μš©ν•΄λ³΄λ„λ‘ ν•˜μž.

fetch()λ₯Ό ν™œμš©ν•œ API 연동

map()λ₯Ό 이어, 또 ν•˜λ‚˜λ₯Ό λ§ν•˜μžλ©΄ ν”„λ‘ νŠΈμ™€ λ°±μ—”λ“œμ˜ λ§Œλ‚¨μΈfetch()μ΄μš©ν•œ API 톡신

가독성을 μ˜¬λ €μ£ΌλŠ” 비ꡬ쑰화 ν• λ‹Ή

개인적으둜 κΈ°λ‘ν•˜κ³  싢은 μ½”λ“œλŠ” 비ꡬ쑰화 할당이닀. 기술적이고 μ–΄λ €μš΄ μ½”λ“œλŠ” μ•„λ‹ˆμ§€λ§Œ, λˆ„κ°€ λ‚΄ μ½”λ“œλ₯Ό λ΄€μ„λ•Œ μ΄λŸ¬ν•œ 것을 ν‘œν˜„ν•˜κ³  μ‹Άμ—ˆκ΅¬λ‚˜ λΌλŠ” 말을 λ“€μ„μˆ˜ μžˆλŠ”κ²Œ λ‚΄ λͺ©ν‘œμ΄λ‹€. κ°œλ°œμžλŠ” μ½”λ“œλ‘œ λˆ„κ΅¬λ³΄λ‹€ μ‰½κ²Œ μ„±λͺ…ν• μˆ˜ μžˆμ–΄μ•Ό λœλ‹€. λ‹€μŒ ν”„λ‘œμ νŠΈλ₯Ό 진행할땐 비ꡬ쑰화 할당을 μ“°λ©° 가독성을 λ†’μ—¬μ£Όλ©΄μ„œ μ§„ν–‰ν•˜κ³  μ‹Άλ‹€.


ν”„λ‘œμ νŠΈμ—μ„œ λŠλ‚€μ 

처음 코딩을 λ°°μ› λ‹€ λ³΄λ‹ˆ 많이 μƒμ†Œν•˜κ³  μ–΄λ €μ› μ§€λ§Œ, μ½”λ“œλ‘œ λ­”κ°€λ₯Ό ν‘œν˜„ν•œλ‹€λŠ” 것이 μ‹ μ„ ν•˜κ³  μž¬λ°ŒλŠ” 일이라 μƒκ°ν•˜λ©° ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν–ˆλ˜ 것 κ°™λ‹€.

μΈμŠ€νƒ€κ·Έλž¨ ν”„λ‘œμ νŠΈ λ§ˆμ§€λ§‰λ‚  11기의 λΆ„λ“€μ˜ 2μ°¨ ν”„λ‘œμ νŠΈ λ°œν‘œλ₯Ό λ΄€λŠ”λ° 2μ£Ό λ§Œμ— μ–΄λ–»κ²Œ μ €λŸ° κΈ°λŠ₯듀을 κ΅¬ν˜„ν–ˆμ„κΉŒλΌλŠ” 걱정에 λ‹€μŒμ£Ό λΆ€ν„΄ μž μ„ 쀄여야겠닀 λΌλŠ” 생각이든닀....

빨리 μ§„ν–‰ν•˜κ³  μ‹Άλ‹€λŠ” 생각도 λ“€λ©΄μ„œλ„ ν•œνŽΈμœΌλ‘  걱정이 μ•žμ„œκΈ°λ„ ν•œλ‹€.
κ·Έλž˜λ„ μž˜ν•΄λ³΄λ„λ‘ ν•˜μž !! πŸ‘ŠπŸ‘ŠπŸ‘Š

profile
더 λ‚˜μ€ κ°œλ°œμžκ°€ 되자.

0개의 λŒ“κΈ€