✌🏻Project_SoundCloud λͺ©ν‘œ

CarminidoΒ·2020λ…„ 3μ›” 9일
0

ReactNative

λͺ©λ‘ 보기
3/6

μ €λ²ˆ ν”„λ‘œμ νŠΈλ₯Ό 톡해 깨달은 것

기둝으둜 κΈ°μ–΅ν•˜μž

ν”„λ‘œμ νŠΈλ₯Ό ν•˜λ‹€ 보면 μ‹œκ°„μ΄ 정말 빨리 흐λ₯Έλ‹€. λ•Œλ¬Έμ— λ‚΄κ°€ 무엇을 λ°°μ› κ³  λ‚΄κ°€ 무엇을 ν•΄λƒˆλŠ”μ§€μ— λŒ€ν•΄μ„œ 짚고 갈 수 μžˆλŠ” μ‹œκ°„μ΄ 거의 μ—†λ‹€.μ €λ²ˆ ν”„λ‘œμ νŠΈκ°€ λλ‚˜κ³  쀀식 λ©˜ν† λ‹˜κ»˜μ„œ 학생듀을 보며 μ•ˆνƒ€κΉŒμš΄ 점이 μš°λ¦¬κ°€ ν•΄μ˜¨κ²ƒμ— λŒ€ν•΄μ„œ 슀슀둜λ₯Ό κ²©λ €ν•˜κ³  λŒμ•„λ³΄κΈ° λ³΄λ‹€λŠ” μ•žμœΌλ‘œ ν•΄μ•Ό ν•  것에 λŒ€ν•΄μ„œ 쑰바심을 κ°€μ§€λŠ” 것이라고 ν•˜μ…¨λŠ”λ° 정말 κ·Έ 말이 λ”± λ§žλ‹€. 2μ£Όκ°€ μ§€λ‚¬λ”λ‹ˆ μ œλŒ€λ‘œ μ •λ¦¬λœ ν¬μŠ€νŒ…μ„ 거의 ν•˜μ§€ λͺ»ν–ˆκ³  λŒ€λΆ€λΆ„ μ„Έμ…˜μ΄ μ§„ν–‰λ˜λŠ” λ™μ•ˆ λ…ΈνŠΈν•„κΈ° μ‹μœΌλ‘œ μ“°λ‹€ λ§Œκ²ƒλ“€μ΄ λŒ€λΆ€λΆ„μ΄μ—ˆλ‹€. ν”„λ‘œμ νŠΈμ— κ΄€ν•œ 뢀뢄듀도 거의 μ œλŒ€λ‘œ ν¬μŠ€νŒ…μ„ ν•˜μ§€ λͺ»ν–ˆλ‹€.
ν•˜μ§€λ§Œ 그러면 μ•ˆλ  것 κ°™λ‹€. λ‚΄κ°€ μ–΄λ–€ 것을 μ–΄λ–€ μ‹μœΌλ‘œ κ΅¬ν˜„ν–ˆλŠ”μ§€, κ·Έ κ³Όμ •μ—μ„œ 고민이 μ–΄λ–»κ²Œ ν•΄κ²° λ˜μ—ˆλŠ”μ§€, 이게 μ™œ μ•ˆλ˜μ—ˆλŠ”μ§€μ— λŒ€ν•΄μ„œ κΌ­ 정리해 보아야 ν•˜λŠ” 것 κ°™λ‹€. λ‚΄κ°€ 정말 이해λ₯Ό ν–ˆλŠ”μ§€ λͺ»ν–ˆλŠ”지에 λŒ€ν•œ κ°€λŠ μ„ 정리λ₯Ό 톡해 ν•  수 μžˆμ„ 것 κ°™λ‹€. 이번 ν”„λ‘œμ νŠΈλŠ” 정말 κΌ­ μ‹œκ°„μ„ λ‚΄μ„œ 정리λ₯Ό ν•˜λ„λ‘ ν•΄μ•Ό κ² λ‹€. μ—­μ‹œ 물리적인 μ‹œκ°„μ΄ μ°Έ μ€‘μš”ν•˜λ‹€.

이번 ν”„λ‘œμ νŠΈλ₯Ό ν†΅ν•΄μ„œ κΌ­ ν•˜κ³  싢은 것

1. 둜그인 νŽ˜μ΄μ§€ κ΅¬ν˜„

μ €λ²ˆμ—λŠ” λ°±μ—”λ“œμ™€ 맞좰본게 거의 κ·Έλƒ₯ 데이터λ₯Ό λ°›μ•„μ™€μ„œ 맡으둜 λŒλ €μ„œ λΏŒλ €μ£ΌλŠ” λΆ€λΆ„ 밖에 μ—†μ—ˆλ‹€. λ‹€λ₯Έ μ‚¬λžŒλ“€μ΄ 둜그인과 νšŒμ›κ°€μž…μœΌλ‘œ λ°±μ—”λ“œ νŒ€μ›κ³Ό 일을 ν•˜λŠ” λͺ¨μŠ΅μ„ λ³΄λ©΄μ„œ λ‚˜λ„ 해보고 μ‹Άλ‹€λŠ” 생각이 많이 λ“€μ—ˆλ‹€. μ˜›λ‚ μ— 둜그인 μ„Έμ…˜μ„ ν• λ•Œμ—λŠ” fetch ν•¨μˆ˜, api μžμ²΄κ°€ μ–΄μƒ‰ν•˜κ³  μƒμ†Œν•΄μ„œ μ œλŒ€λ‘œ μ†Œν™”ν–ˆλ‹€λŠ” λŠλ‚Œμ΄ 잘 μ•ˆλ“€μ—ˆλ‹€. μ΄λ²ˆμ—λŠ” κΌ­ 해보고 μ‹Άμ—ˆλŠ”λ° μš°λ¦¬νŒ€μ—μ„œ react-native λ‚˜ ν˜Όμžλ‹ˆκΉŒ μ•„μ£Ό μΆ©λΆ„νžˆ 잘 ν•΄λ³Ό 수 μžˆμ„ 것이닀.

2. λ‹€μ–‘ν•œ νŽ˜μ΄μ§€ κ²½ν—˜ + λ¦¬μ•‘νŠΈ λ„€μ΄ν‹°λΈŒμ— μ΅μˆ™ν•΄μ§€κΈ°

μ €λ²ˆμ—λŠ” 메인 νŽ˜μ΄μ§€λ§Œ λ§‘μ•˜λ˜ λ‚˜μ˜€κΈ° λ•Œλ¬Έμ— μ΄λ²ˆμ—λŠ” λ‹€μ–‘ν•œ νŽ˜μ΄μ§€λ₯Ό 해보고 μ‹Άλ‹€. μ–΄μ°¨ν”Ό λ¦¬μ•‘νŠΈ λ„€μ΄ν‹°λΈŒλŠ” λ‚˜ 혼자이고 κ·Έλ ‡κΈ° λ•Œλ¬Έμ— λͺ¨λ“  νŽ˜μ΄μ§€λ₯Ό λ‚˜ 혼자 ν•΄μ•Ό ν•œλ‹€.
μ €λ²ˆμ— μΈμŠ€νƒ€κ·Έλž¨ 둜그인 νŽ˜μ΄μ§€λ₯Ό λ¦¬μ•‘νŠΈ λ„€μ΄ν‹°λΈŒλ‘œ λ§Œλ“€μ–΄ λ³΄κΈ°λŠ” ν–ˆμ§€λ§Œ 사싀 본격적인 뢀뢄은 κ·Έ λ‹€μŒλ‹¨κ³„ λΆ€ν„°μ˜€λ‹€. ν•˜μ§€λ§Œ μ‹œκ°„ 관계상 ν•˜μ§€ λͺ»ν•˜κ³  정말 λ§›λ³΄κΈ°λ§Œ ν•  수 μžˆμ—ˆλ‹€. κ·Έλž˜μ„œ μ΄λ²ˆμ—λŠ” μ‚¬μš΄λ“œ ν΄λΌμš°λ“œμ˜ 기본적인 νŽ˜μ΄μ§€λ“€μ„ ν•˜λ‚˜μ”© κ΅¬ν˜„ν•΄λ³΄λ©΄μ„œ λž˜μ•‘νŠΈ λ„€μ΄ν‹°λΈŒμ— μ΅μˆ™ν•΄μ§€λ €κ³  ν•œλ‹€.

3. μƒˆλ‘œμš΄ 기술 읡히기

  • styled-component
    μ €λ²ˆμ—λŠ” sassλ₯Ό κ²½ν—˜ν•΄ λ³΄μ•˜λ‹€λ©΄ μ΄λ²ˆμ—λŠ” styled-componentλ₯Ό ν•΄λ³Ό μ˜ˆμ •μ΄λ‹€. μŠ€νƒ€μΌ μ‰μ–΄λŠ” λ‚΄κ°€ ν‰μ†Œμ— μ΄μš©ν•˜κ±°λ‚˜ μ’‹μ•„ν•˜λŠ” μ„œλΉ„μŠ€λŠ” μ•„λ‹ˆμ—ˆμ§€λ§Œ μ‚¬μš΄λ“œ ν΄λΌμš°λ“œλŠ” 맀일 μ‚¬μš©ν•˜μ§€λŠ” μ•Šλ”λΌλ„ 항상 μ„€μΉ˜ν•˜κ³  가끔씩 μ΄μš©ν•˜λ˜ μ„œλΉ„μŠ€μ˜€λ‹€. UI도 μ’‹μ•„μ„œ κΌ­ !! ν΄λ‘ ν•˜κ³  μ‹Άμ—ˆλ˜ λ¦¬μŠ€νŠΈμ˜€λ‹€. ν•˜κ³  μ‹Άμ—ˆλ˜ 만큼 전보닀 더 λ””ν…ŒμΌν•˜κ³  λ©‹μ§€κ²Œ λ””μžμΈμ„ ν•˜κ³  μ‹Άλ‹€.

  • Hooks
    λ‚΄κ°€ 라이프사이클에 λŒ€ν•œ 이해λ₯Ό 잘 ν•˜κ³  μžˆλŠ”μ§€μ— λŒ€ν•΄μ„œ 사싀 μžμ‹ μ΄ μ—†κΈ΄ ν•˜λ‹€. λ‚΄κ°€ ν–ˆλ˜ 뢀뢄이 라이프 사이클을 신경쓰지 μ•Šμ•„λ„ λ˜λŠ” λΆ€λΆ„? μ΄μ—ˆλ˜κ²ƒλ„ ν•œλͺ«ν•˜λŠ” 것 κ°™λ‹€. 근데 λ©˜ν† λ‹˜μ΄ hooksλ₯Ό μ“°λ©΄μ„œ 라이프 사이클을 더 잘 이해할 μˆ˜λ„ μžˆλ‹€κ³  ν•˜μ…¨λ‹€. 또 μ €λ²ˆ ν”„λ‘œμ νŠΈλ₯Ό ν•˜λ©΄μ„œ stateκ°€ 정말 끝도 없이 λ§Žμ•„μ§€λŠ” κ±Έ λ³΄λ©΄μ„œ μ™œ 페이슀뢁이 hooksλ₯Ό λ§Œλ“€κ²Œ λ˜μ—ˆλŠ”μ§€μ— λŒ€ν•΄μ„œ 점점 μ΄ν•΄ν•˜κ²Œ λ˜μ—ˆλ‹€.
    정말 λΆˆνŽΈν•¨μ„ μΆ©λΆ„νžˆ λŠλ‚€ λ‹€μŒμ— μƒˆλ‘œμš΄ 것을 λ°°μ›Œμ•Ό λ‚΄κ°€ 이것을 μ™œ λ°°μ›Œμ•Ό ν•˜λŠ”μ§€, 이것이 μ™œ ν•„μš”ν•œμ§€λ₯Ό μ•„λŠ” 것 κ°™λ‹€. ( 였늘 프리티어와 eslintλ₯Ό λ‹€μ‹œ κΉ”κΈ° μœ„ν•΄ μ—΄μ‹¬νžˆ μ„œμΉ­ν•˜λŠ” λ‚˜ μžμ‹ μ„ λ³΄λ©΄μ„œ λ‹€μ‹œ ν•œλ²ˆ κΉ¨λ‹¬μ•˜μŒ...)
    κ·Έλž˜μ„œ 이번 기회λ₯Ό 톡해 ν›…μŠ€λ₯Ό ν•œλ²ˆ 써보렀고 ν•œλ‹€.

profile
λ‚˜λŠ”μ•Ό 코린이 ν•˜μ§€λ§Œ 무럭무럭 자라고 있죠

0개의 λŒ“κΈ€