Jinwoo
Preview Image

μ™œ μƒνƒœ 관리 λΌμ΄λΈŒλŸ¬λ¦¬κ°€ ν•„μš”ν• κΉŒ?

μ•ˆλ…•ν•˜μ„Έμš”! μ˜€λŠ˜μ€ μžλ°”μŠ€ν¬λ¦½νŠΈ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ μƒνƒœ 관리 λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μ™œ ν•„μš”ν•œμ§€μ— λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. 특히, Redux와 같은 μƒνƒœ 관리 λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μ–΄λ–€ 문제λ₯Ό ν•΄κ²°ν•΄μ£Όκ³ , μ–΄λ–€ 이점을 μ œκ³΅ν•˜λŠ”μ§€μ— λŒ€ν•΄ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€. μ™œ μƒνƒœ 관리 λΌμ΄λΈŒλŸ¬λ¦¬κ°€ ν•„μš”ν• κΉŒ? 1. λ³΅μž‘ν•œ μƒνƒœ 관리 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ 컀지고 λ³΅μž‘ν•΄μ§ˆμˆ˜λ‘ λ‹€μ–‘ν•œ μ»΄ν¬λ„ŒνŠΈ κ°„μ˜ μƒνƒœ...

Preview Image

Redux에 λŒ€ν•΄ μ•Œμ•„λ³΄μž

μ•ˆλ…•ν•˜μ„Έμš”! μ˜€λŠ˜μ€ μžλ°”μŠ€ν¬λ¦½νŠΈ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ μƒνƒœ 관리λ₯Ό μœ„ν•΄ 자주 μ‚¬μš©λ˜λŠ” Redux에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. ReduxλŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μƒνƒœλ₯Ό 효율적으둜 κ΄€λ¦¬ν•˜κ³  예츑 κ°€λŠ₯ν•˜κ²Œ λ§Œλ“€μ–΄ μ£ΌλŠ” λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€. 그럼 λ°”λ‘œ μ‹œμž‘ν•˜κ² μŠ΅λ‹ˆλ‹€. Reduxλž€ 무엇인가? ReduxλŠ” JavaScript μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ μƒνƒœ 관리λ₯Ό μœ„ν•œ 예츑 κ°€λŠ₯ν•œ μƒνƒœ μ»¨ν…Œ...

Preview Image

Promise와 콜백 μ§€μ˜₯(CallBack Hell)

μ•ˆλ…•ν•˜μ„Έμš”! μ˜€λŠ˜μ€ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 비동기 μ²˜λ¦¬μ—μ„œ μ€‘μš”ν•œ κ°œλ…μΈ Promise와 콜백 μ§€μ˜₯(Callback Hell)에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. 이 두 κ°€μ§€ κ°œλ…μ„ μ΄ν•΄ν•˜λ©΄ 더 κΉ”λ”ν•˜κ³  μœ μ§€λ³΄μˆ˜ν•˜κΈ° μ‰¬μš΄ μ½”λ“œλ₯Ό μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€. Promise와 콜백 μ§€μ˜₯(CallBack Hell) 콜백 ν•¨μˆ˜μ™€ 콜백 μ§€μ˜₯ 콜백 ν•¨μˆ˜λž€? 콜백 ν•¨μˆ˜λŠ” λ‹€λ₯Έ ν•¨μˆ˜μ˜ ...

Preview Image

Side-Effect에 λŒ€ν•΄ μ•Œμ•„λ³΄μž

μ•ˆλ…•ν•˜μ„Έμš”! μ˜€λŠ˜μ€ μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ λ¦¬μ•‘νŠΈ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ μ€‘μš”ν•œ κ°œλ… 쀑 ν•˜λ‚˜μΈ μ‚¬μ΄λ“œ μ΄νŽ™νŠΈ(Side Effect)에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. μ‚¬μ΄λ“œ μ΄νŽ™νŠΈλ₯Ό μ΄ν•΄ν•˜λ©΄ μ½”λ“œμ˜ 예츑 κ°€λŠ₯μ„±κ³Ό μœ μ§€λ³΄μˆ˜μ„±μ„ 높일 수 μžˆμŠ΅λ‹ˆλ‹€. 그럼 λ°”λ‘œ μ‹œμž‘ν•˜κ² μŠ΅λ‹ˆλ‹€. Side-Effectλž€ 무엇인가? μ •μ˜ μ‚¬μ΄λ“œ μ΄νŽ™νŠΈλŠ” ν•¨μˆ˜λ‚˜ ν‘œν˜„μ‹μ΄ 싀행될 λ•Œ, ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’ 이...

Preview Image

ν™”μ‚΄ν‘œ ν•¨μˆ˜μ™€ 일반 ν•¨μˆ˜μ˜ 차이점

μ•ˆλ…•ν•˜μ„Έμš”! μ˜€λŠ˜μ€ μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 자주 μ‚¬μš©λ˜λŠ” ν™”μ‚΄ν‘œ ν•¨μˆ˜(Arrow Function)와 일반 ν•¨μˆ˜(Regular Function)의 차이점에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. 이 두 κ°€μ§€ ν•¨μˆ˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œ μž‘μ„± μ‹œ μ€‘μš”ν•œ 역할을 ν•˜μ§€λ§Œ, 각각의 νŠΉμ§•κ³Ό μ‚¬μš© 사둀가 λ‹€λ¦…λ‹ˆλ‹€. 그럼 λ°”λ‘œ λ“€μ–΄κ°€κ² μŠ΅λ‹ˆλ‹€. ν™”μ‚΄ν‘œ ν•¨μˆ˜μ™€ 일반 ν•¨μˆ˜μ˜ 차이점 ν™”μ‚΄ν‘œ ν•¨μˆ˜(...

Preview Image

ν˜Έμ΄μŠ€νŒ…μ— λŒ€ν•΄ μ•Œμ•„λ³΄μž

μ•ˆλ…•ν•˜μ„Έμš”. μ˜€λŠ˜μ€ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λ…νŠΉν•œ κ°œλ… 쀑 ν•˜λ‚˜μΈ ν˜Έμ΄μŠ€νŒ…(Hoisting)에 λŒ€ν•΄ μ•Œμ•„λ³΄λ €κ³  ν•©λ‹ˆλ‹€. λ°”λ‘œ λ“€μ–΄κ°€κ² μŠ΅λ‹ˆλ‹€. ν˜Έμ΄μŠ€νŒ…(Hoisting) ν˜Έμ΄μŠ€νŒ…μ΄λž€ 무엇인가? ν˜Έμ΄μŠ€νŒ…μ€ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 λ³€μˆ˜μ™€ ν•¨μˆ˜ 선언을 μ½”λ“œμ˜ μ΅œμƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ¦¬λŠ” λ™μž‘μ„ μ˜λ―Έν•©λ‹ˆλ‹€. 이 λ•Œλ¬Έμ— λ³€μˆ˜κ°€ μ„ μ–Έλ˜κΈ° 전에 μ‚¬μš©ν•  수 μžˆλŠ” κ²ƒμ²˜λŸΌ λ³΄μ΄λŠ” ν˜„μƒ...

Preview Image

데이터 ν˜• λ³€ν™˜μ— λŒ€ν•΄ μ•Œμ•„λ³΄μž

μ•ˆλ…•ν•˜μ„Έμš”. μ˜€λŠ˜μ€ 데이터 ν˜• λ³€ν™˜μ— λŒ€ν•΄ μ•Œμ•„λ³΄λ €κ³  ν•©λ‹ˆλ‹€. λ°”λ‘œ λ“€μ–΄κ°€κ² μŠ΅λ‹ˆλ‹€. 데이터 ν˜• λ³€ν™˜(Data Type Conversion) 데이터 ν˜• λ³€ν™˜μ΄λž€? 데이터 ν˜• λ³€ν™˜μ€ ν”„λ‘œκ·Έλž˜λ°μ—μ„œ λ³€μˆ˜μ˜ 데이터 νƒ€μž…μ„ λ‹€λ₯Έ νƒ€μž…μœΌλ‘œ λ³€κ²½ν•˜λŠ” 과정을 μ˜λ―Έν•©λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” 두 κ°€μ§€ μ£Όμš” 데이터 ν˜• λ³€ν™˜ 방식이 μžˆμŠ΅λ‹ˆλ‹€: λͺ…μ‹œμ  ν˜• λ³€ν™˜(Expl...

Preview Image

μŠ€μ½”ν”„(Scope)에 λŒ€ν•΄ μ•Œμ•„λ³΄μž

μ•ˆλ…•ν•˜μ„Έμš”! μ˜€λŠ˜μ€ μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 맀우 μ€‘μš”ν•œ κ°œλ… 쀑 ν•˜λ‚˜μΈ μŠ€μ½”ν”„(Scope)에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. μŠ€μ½”ν”„λ₯Ό 잘 μ΄ν•΄ν•˜λ©΄ μ½”λ“œμ˜ 가독성을 높이고, 버그λ₯Ό 쀄이며, λ©”λͺ¨λ¦¬ 관리λ₯Ό 효율적으둜 ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 그럼 λ°”λ‘œ μ‹œμž‘ν•˜κ² μŠ΅λ‹ˆλ‹€. μŠ€μ½”ν”„(Scope)λž€ 무엇인가? μŠ€μ½”ν”„λŠ” ν”„λ‘œκ·Έλž˜λ°μ—μ„œ λ³€μˆ˜κ°€ μ •μ˜λ˜κ³  μ ‘κ·Όν•  수 μžˆλŠ” 유효 λ²”μœ„λ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€...

Preview Image

데이터 νƒ€μž…μ— λŒ€ν•΄ μ•Œμ•„λ³΄μž

μ•ˆλ…•ν•˜μ„Έμš”. μ˜€λŠ˜μ€ 데이터 νƒ€μž…μ— λŒ€ν•΄ μ •λ¦¬ν•˜λ €κ³  ν•©λ‹ˆλ‹€. μ—¬λŸ¬λͺ¨λ‘œ λΆ€μ‘±ν•œ 뢀뢄이 μžˆμ„ 수 μžˆμœΌλ‚˜ μ–‘ν•΄λΆ€νƒλ“œλ¦½λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 데이터 νƒ€μž… μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 동적 타이핑(dynamic typing)을 μ‚¬μš©ν•˜λŠ” μ–Έμ–΄λ‘œ, λ³€μˆ˜μ— μ—¬λŸ¬ μ’…λ₯˜μ˜ 데이터λ₯Ό μ €μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 데이터 νƒ€μž…μ€ 크게 μ›μ‹œ νƒ€μž…(Primitive Types)κ³Ό 객체...

Preview Image

κΉŠμ€ 볡사 & 얕은 볡사에 λŒ€ν•΄ μ•Œμ•„λ³΄μž

μ•ˆλ…•ν•˜μ„Έμš”. μ˜€λŠ˜μ€ κΉŠμ€ 볡사와 μ–•μœΌ 볡사에 λŒ€ν•΄ μ •λ¦¬ν•˜λ €κ³  ν•©λ‹ˆλ‹€. κΈ°λ³Έ κ°œλ…μ΄ μ•½ν•΄μ„œ κΎΈμ€€νžˆ 곡뢀해 λ‚˜κ°ˆλ €κ³  ν•©λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 얕은 볡사와 κΉŠμ€ 볡사 μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 객체λ₯Ό λ³΅μ‚¬ν•˜λŠ” 방법은 크게 두 κ°€μ§€λ‘œ λ‚˜λˆŒ 수 μžˆμŠ΅λ‹ˆλ‹€: 얕은 볡사(Shallow Copy)와 κΉŠμ€ 볡사(Deep Copy). 이 두 κ°€μ§€ 방법은 객체의 ν”„λ‘œνΌν‹°λ₯Ό μ–΄λ–»...