Jess2.xyz

πŸ‘‹@Jess2
πŸ‘©πŸ»β€πŸ’»Frontend Developer

GitHubFacebookLinkedIn

[Essay] 4λ…„μ°¨ ν”„λ‘ νŠΈμ—”λ“œ 개발자의 2021 회고

ν˜„μž¬ λ‚ μ§œ κΈ°μ€€μœΌλ‘œ κ²½λ ₯ 만 3년이 쑰금 μ§€λ‚œ 4λ…„μ°¨ μ›Ή ν”„λ‘ νŠΈμ—”λ“œ 개발자의 μ§€λ‚œ 2021λ…„ νšŒκ³ λ‘μ„ μž‘μ„±ν•΄λ³Έλ‹€. κ°œμΈμ μœΌλ‘œλŠ” 3~4λ…„μ°¨κ°€ κ°€μž₯ μ• λ§€ν•œ μ‹œκΈ° 쀑 ν•˜λ‚˜μΈ 것 κ°™λ‹€. 이제 더 이상 μ‹ μž…λ„ μ•„λ‹ˆκ³  κ·Έλ ‡λ‹€κ³  μ‹œλ‹ˆμ–΄λ„ μ•„λ‹ˆλ‹€. 개인적으둜 λŠλΌκΈ°μ—λŠ” 아직 많이 λΆ€μ‘±ν•˜κ³  곡뢀할 게 λ„ˆλ¬΄ λ§Žμ€λ° νšŒμ‚¬μ—λŠ” λ­”κ°€λ₯Ό λ³΄μ—¬μ€˜μ•Ό ν•  것 같은 뢀담감이 λͺ°λ €μ˜€λŠ” μ‹œβ€¦

[JavaScript] μ°Έμ‘°ν• λ‹Ήκ³Ό κΉŠμ€λ³΅μ‚¬, 얕은볡사

μ°Έμ‘° ν• λ‹Ή, 얕은 볡사, κΉŠμ€ 볡사에 관해… μ›λž˜ μ•Œκ³  있던 λ‚΄μš© 기쑴에 μ •λ¦¬ν–ˆλ˜ ν¬μŠ€νŒ… μ°Έμ‘° ν• λ‹Ή μ£Όμ†Œκ°’μ„ λ³΅μ‚¬ν•˜λŠ” 것 얕은 볡사 (Shallow Copy) λ³΅μ‚¬λ˜μ–΄ μƒˆλ‘œμš΄ λ©”λͺ¨λ¦¬λ‘œ 할당이 λ˜μ§€λ§Œ μ†μ„±μœΌλ‘œ κ°–κ³  있던 κ°μ²΄λ‚˜ 배열은 μ£Όμ†Œκ°’μ΄ λ³΅μ‚¬λ˜λŠ” ν˜•νƒœ. ex) spread operator, object assign κΉŠμ€ 볡사 (Deep Copy) 볡…

[Seminar] 2021 NAVER DEVIEW 슬기둜운 웨일앱 개발

2021 NAVER DEVIEW <슬기둜운 웨일앱 개발> μ„Έμ…˜ λ“€μœΌλ©° μ •λ¦¬ν•œ λ‚΄μš© 1. 웨일 μ•±μ΄λž€? Whale platform(Whale λΈŒλΌμš°μ €λ‚˜ Whale OS)μ—μ„œ λ™μž‘ν•˜λŠ” ν™•μž₯μ•± Whale Platform Chromium 기반 μ›Ή μ„œλΉ„μŠ€ ν”Œλž«νΌ Chromium μ˜€ν”ˆμ†ŒμŠ€ + Whale만의 μ„œλΉ„μŠ€ Chromium κΈ°λŠ₯으둜만 κ΅¬μ„±λœ 앱은 λ‹€λ₯Έ λΈŒλΌμš°μ €β€¦

[JavaScript] OOP - 3. Prototypes

0. Table of Contents What is OOP Objects Prototypes πŸ‘‰ Current Page Prototypical Inheritance (TBD) ES6 Classes (TBD) ES6 Modules (TBD) 1. 상속 (Inheritance) 상속은 객체가 λ‹€λ₯Έ 객체의 속성과 λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•  수 μžˆλ„λ‘ ν•˜λŠ” OOP의 핡심…

[JavaScript] OOP - 2. Objects

0. Table of Contents What is OOP Objects πŸ‘‰ Current Page Prototypes Prototypical Inheritance (TBD) ES6 Classes (TBD) ES6 Modules (TBD) 1. Creating Objects μ€‘κ΄„ν˜Έ ()λ₯Ό 객체 λ¦¬ν„°λŸ΄ ꡬ문이라고 ν•œλ‹€. κ°μ²΄λŠ” key-value μŒμ„ 가진…

[etc.] ν•΄μ‹œ ν…Œμ΄λΈ”κ³Ό ν•΄μ‹œ ν•¨μˆ˜

ν•΄μ‹œ ν…Œμ΄λΈ” (Hash Table) F(key) β†’ Hash Code β†’ Index β†’ Value κ²€μƒ‰ν•˜κ³ μž ν•˜λŠ” key값을 μž…λ ₯λ°›μ•„μ„œ ν•΄μ‹œ ν•¨μˆ˜λ₯Ό λŒλ €μ„œ λ°˜ν™˜λ°›μ€ ν•΄μ‹œ μ½”λ“œλ₯Ό λ°°μ—΄ index둜 ν™˜μ‚°μ„ ν•΄μ„œ 데이터에 μ ‘κ·Όν•˜λŠ” λ°©μ‹μ˜ μžλ£Œκ΅¬μ‘°μ΄λ‹€ μ—¬κΈ°μ„œ 값은 λ¬Έμžμ—΄μ΄ 될 μˆ˜λ„ 있고 숫자, 파일 데이터도 될 수 μžˆλ‹€. ν•΄μ‹œ ν•¨μˆ˜λŠ” μ–΄λ–€ νŠΉμ •ν•œ κ·œμΉ™μ„ μ΄μš©ν•΄μ„œβ€¦

[JavaScript] OOP - 1. What is OOP

0. Table of Contents What is OOP πŸ‘‰ Current Page Objects Prototypes Prototypical Inheritance (TBD) ES6 Classes (TBD) ES6 Modules (TBD) 1. What is OOP? OOP(객체 지ν–₯ ν”„λ‘œκ·Έλž˜λ°)λž€, ν•¨μˆ˜λ³΄λ‹€λŠ” 객체λ₯Ό μ€‘μ‹¬μœΌλ‘œ ν•˜λŠ” ν”„λ‘œκ·Έλž˜λ° μŠ€νƒ€μΌ, …

[JavaScript] λ°°μ—΄ κ³ μ°¨ ν•¨μˆ˜

0. Index κ³ μ°¨ ν•¨μˆ˜λž€? 많이 μ‚¬μš©λ˜λŠ” λ°°μ—΄ κ³ μ°¨ ν•¨μˆ˜λ“€ forEach map filter reduce some every find findIndex fill sort includes λ‹€μ–‘ν•œ κ³ μ°¨ ν•¨μˆ˜λ“€ μ‹œκ°ν™” 비ꡐ μ„±λŠ₯ 비ꡐ 1. κ³ μ°¨ ν•¨μˆ˜λž€? ν•¨μˆ˜λ₯Ό 인자둜 μ „λ‹¬λ°›κ±°λ‚˜ ν•¨μˆ˜λ₯Ό 결과둜 λ°˜ν™˜ν•˜λŠ” ν•¨μˆ˜ 2. 많이 μ‚¬μš©λ˜λŠ” λ°°μ—΄ κ³ μ°¨ ν•¨μˆ˜λ“€ 2-1. Ar…

[WEB] CORS : ꡐ차 좜처 λ¦¬μ†ŒμŠ€ 곡유 (Cross-Origin Resource Sharing)

ν•œ μ‚¬μ΄νŠΈμ—μ„œ μ£Όμ†Œκ°€ λ‹€λ₯Έ μ„œλ²„λ‘œ μš”μ²­μ„ 보낼 λ•Œ CORS κ΄€λ ¨ μ—λŸ¬κ°€ λ°œμƒν•œλ‹€. https://aaa.com μ—μ„œ https://bbb.com/api/ccc API둜 정보λ₯Ό λ°›μ•„μ˜€κΈ° μœ„ν•΄ β€˜ν”„λ‘ νŠΈβ€™μ—μ„œ HTTP μš”μ²­μ„ λ³΄λƒˆμ„ λ•Œ 미리 νŠΉμ • 섀정을 해주지 μ•ŠμœΌλ©΄ CORS κ΄€λ ¨ μ—λŸ¬λ‘œ λ§‰νžˆκ²Œ λœλ‹€. β€˜PostMan’ 같은 κ²ƒμœΌλ‘œ λ˜‘κ°™μ€ μš”μ²­μ„ λ³΄λ‚΄κ±°λ‚˜ β€˜λ°±β€¦

[JavaScript] κΉŠμ€λ³΅μ‚¬(Deep Copy)와 얕은볡사(Shallow Copy)

1. μ°Έμ‘° ν• λ‹Ή 에 을 ν• λ‹Ήν•  λ•Œ, μ£Όμ†Œκ°’μ΄ ν• λ‹Ήλ˜λŠ” 것이기 λ•Œλ¬Έμ— ν•œ 객체의 값을 μˆ˜μ •ν•˜λ©΄ λ‹€λ₯Έ 객체의 κ°’ λ˜ν•œ λ™μΌν•˜κ²Œ λ³€ν•œλ‹€. 2. 얕은 볡사 - Shallow Copy 2-1. Object.assign() λ©”μ†Œλ“œλŠ” μ—΄κ±°ν•  수 μžˆλŠ” ν•˜λ‚˜ μ΄μƒμ˜ 좜처 객체(source)λ‘œλΆ€ν„° λŒ€μƒ 객체(target)둜 속성을 볡사할 λ•Œ μ‚¬μš©ν•˜κ³  λŒ€μƒ 객체(targe…