배움을 λ‚˜λˆ„λ©° ν•¨κ»˜ μ„±μž₯ν•˜λŠ” 것을 μ’‹μ•„ν•©λ‹ˆλ‹€. ✈️

μŠ€ν„°λ””λ₯Ό ν•˜λ©° 지식을 λ‚˜λˆ„κ³  νŒ€μ›λ“€κ³Ό ν•¨κ»˜ μ„±μž₯ν•˜λ €κ³  ν•©λ‹ˆλ‹€. λΈ”λ‘œκ·Έλ₯Ό μš΄μ˜ν•˜κ³ , λ‹€μ–‘ν•œ μ£Όμ œμ— λŒ€ν•΄ 60+개 ν¬μŠ€νŒ…μ„ μž‘μ„±ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

μ‚¬μš©μž κ²½ν—˜μ„ μ€‘μš”ν•˜κ²Œ μƒκ°ν•©λ‹ˆλ‹€.

기쑴에 λΆˆνŽΈν–ˆλ˜ 학ꡐ μž…ν•™ 지원 μ„œλΉ„μŠ€, 학ꡐ 곡식 ν™ˆνŽ˜μ΄μ§€λ₯Ό κ°œλ°œν•œ κ²½ν—˜μ΄ μžˆμŠ΅λ‹ˆλ‹€. 총 **2,000+λͺ…μ˜ μ‚¬μš©μžκ°€ μ ‘μ†ν•˜μ˜€κ³ , 검색엔진에 3,000+번 λ…ΈμΆœλ˜μ—ˆμŠ΅λ‹ˆλ‹€.

λˆ„κ΅¬λ‚˜ 배울 수 μžˆλŠ” 세상을 λ§Œλ“€μ–΄ λ‚˜κ°€κ³  μ‹ΆμŠ΅λ‹ˆλ‹€.

μŠ€ν„°λ””μ™€ λΈ”λ‘œκ·Έ ν™œλ™μ„ ν•˜λ©΄μ„œ λˆ„κ΅°κ°€μ—κ²Œ 배움을 λ‚˜λˆŒ λ•Œ 성취감을 λŠκΌˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ λˆ„κ΅¬λ‚˜ 배울 수 μžˆλŠ” β€˜κ΅μœ‘β€™μ΄λΌλŠ” 도메인에 관심이 μžˆμŠ΅λ‹ˆλ‹€.

Untitled.png

πŸ“§Β  **[email protected]

πŸ“žΒ  010-9201-5487

🐼  Github

🌁  Blog

πŸ“—Β  **Velog** (λˆ„μ  쑰회수 37,000+회, λˆ„μ  μ’‹μ•„μš” 920+개)

🏫  κ΄‘μ£Όμ†Œν”„νŠΈμ›¨μ–΄λ§ˆμ΄μŠ€ν„°κ³ λ“±ν•™κ΅ (μ‘Έμ—…)

κ²½λ ₯

πŸ’Β ν΄λž˜μŠ€νŒ…

ν”„λ‘ νŠΈμ—”λ“œ 개발자(Org Squad) ⏀ 2024. 1. 29 ~ μž¬μ§μ€‘

ν‰μ†Œ κ΅μœ‘μ΄λΌλŠ” 도메인에 관심이 λ§Žμ•„ μ œκ°€ 가진 개발 λŠ₯λ ₯으둜 ꡐ윑 μ„œλΉ„μŠ€λ₯Ό κ°œλ°œν•˜κ³ μž ν•˜λŠ” 생각을 κ°€μ‘ŒμŠ΅λ‹ˆλ‹€.

ν΄λž˜μŠ€νŒ… λ˜ν•œ 기술둜 κ΅μœ‘μ„ μ—°κ²°ν•˜λŠ” κ°€μΉ˜κ΄€μ„ 가지고 μžˆμ–΄ 2024λ…„ μ΄ˆμ— μž…μ‚¬ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈ

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB3UlEQVQ4y71Uu0pDQRDdJGAj6BeIhZWNCAZsBUEQ9T4SJZW9XyBYWFmJ/oFg6weInZWF2IidjSKWfoCFicmsZ3fO5u69UdFCA4fN7p05e2ZmZ4z5l19mFXmA8AyrwboEtGjzY7ICDZPaummDbAP7VBo4q5uW/IDUfUwJ5xRI3X4bSCR8M/6S+OK8SpxHZKrCGY4BO8A5cAvcIOwTrIuwMWaxEs1ImErY8LnKpImzR+ztCDKPQ2+/wty68DftSN6oTBaArjpjzew70Cd6OB+Q9IBCGmbVpSQQJp6sRtJx4JlKet4xtYJVoZcMItJ5iqj7NJRC1YQfkayrDhLIQqj8Lz3aHRepcgrTWJ1MYX2loUTKbAn+XPq0u/TKQtUr6vbp1B2Sfkaol/X5/0qjlJo+fLdpW+2AzN5FlRwwX/IJmfWF0vW0HHLxgJt0eACeKk5xUcRfkkqPuVzTZwbCTpkwB/ZY8TnmKhRnEBXHhfrGbxdeXcIabDnCDb6fDqvdHrZezudhv3jc18Ak1dWKblnGwTqnR+gSVzElnQXOgJehsszew2YX9oGkXm69TMxIkydRkpV4ApgBphGBXpZHZOl3U6c6cUpThT3rh4cUYjryywHrcyQEI0iYppb922H/AbLJF2CSwgf8AAAAAElFTkSuQmCC

Untitled

Official GSM

κ΄‘μ£Όμ†Œν”„νŠΈμ›¨μ–΄λ§ˆμ΄μŠ€ν„°κ³ λ“±ν•™κ΅ 곡식 ν™ˆνŽ˜μ΄μ§€μž…λ‹ˆλ‹€. μž„μ‹œ 운영 κΈ°κ°„λ™μ•ˆ 1,300+λͺ…μ˜ μ‚¬μš©μžκ°€ μ ‘μ†ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

배포 링크 β†’ γ…€γ…€Github β†’

  1. 5 ~ ν˜„μž¬ μž„μ‹œ μš΄μ˜μ€‘

Frontend 5λͺ…, Backend 2λͺ…, DevOps 1λͺ…, Designer 3λͺ…

πŸ‘©πŸ»β€πŸ’»Β λ‚΄κ°€ κΈ°μ—¬ν•œ λΆ€λΆ„

학ꡐ μ†Œκ°œ νŽ˜μ΄μ§€ μ œμž‘

κ΄€λ¦¬μž νŽ˜μ΄μ§€ 헀더 μ œμž‘

πŸ–₯️ μ‚¬μš© 기술

학ꡐ μ†Œκ°œ - Section2

학ꡐ μ†Œκ°œ - Section2

학ꡐ μ†Œκ°œ - Section3

학ꡐ μ†Œκ°œ - Section3

κ΄€λ¦¬μž νŽ˜μ΄μ§€ - 헀더

κ΄€λ¦¬μž νŽ˜μ΄μ§€ - 헀더

학ꡐ μ†Œκ°œ - Section 5

학ꡐ μ†Œκ°œ - Section 5

학ꡐ μ†Œκ°œ - Section6

학ꡐ μ†Œκ°œ - Section6

μ»΄ν¬λ„ŒνŠΈ μŠ€ν† λ¦¬λΆ

μ»΄ν¬λ„ŒνŠΈ μŠ€ν† λ¦¬λΆ


νŠΈλŸ¬λΈ” μŠˆνŒ…

🚨 문제 배경

학ꡐ μ†Œκ°œ section2 슀크둀 μ• λ‹ˆλ©”μ΄μ…˜ κ΅¬ν˜„ 쀑 μ• λ‹ˆλ©”μ΄μ…˜ λ™μž‘μ— λŒ€ν•œ λ¬Έμ œκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. 슀크둀 ν•  λ•Œλ§ˆλ‹€ scrollTop μœ„μΉ˜λ₯Ό μˆ˜μ •ν•΄μ„œ μž¦μ€ λ Œλ”λ§μ΄ λ°œμƒν–ˆκΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

⭐️ ν•΄κ²° 방법

μž¦μ€ ν•¨μˆ˜ 호좜 방지, 이벀트 호좜 쑰절 ν‚€μ›Œλ“œλ₯Ό κ²€μƒ‰ν•΄μ„œ 자료λ₯Ό μ°Ύμ•„λ³΄λ˜ 쀑 throttleμ΄λΌλŠ” κ°œλ…μ„ μ•Œκ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. 저와 같은 문제λ₯Ό 닀룬 λΈ”λ‘œκ·Έλ₯Ό μ°Έκ³ ν•˜μ—¬, 슀크둀 ν•  λ•Œ 0.3μ΄ˆλ§ˆλ‹€ 이벀트 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•΄μ„œ μž¦μ€ λ Œλ”λ§μ„ λ°©μ§€ν–ˆμŠ΅λ‹ˆλ‹€.

μΆ”κ°€λ‘œ 이벀트 λ¦¬μŠ€λ„ˆ ν•¨μˆ˜μ— λŒ€ν•΄ μ°Ύμ•„λ³΄λ˜ 쀑 passive option이 이벀트 μ„±λŠ₯을 ν–₯μƒν•˜λŠ” μ—­ν• μ΄λΌλŠ” 것을 μ•Œκ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

πŸ™ŒΒ μ΄μ „ μ½”λ“œμ™€ 비ꡐ

이전 μ½”λ“œλŠ” 슀크둀 될 λ•Œλ§ˆλ‹€ state 값이 λ³€κ²½λ˜μ–΄ μž¦μ€ λ Œλ”λ§μ΄ λ°œμƒν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ throttle을 μ μš©ν•˜κ³  λ‚˜μ„œλŠ” 슀크둀 ν•  λ•Œ 0.3μ΄ˆλ§ˆλ‹€ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κΈ° λ•Œλ¬Έμ— μž¦μ€ λ Œλ”λ§μ„ 방지할 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

throttle 적용 μ „ - 3μ΄ˆλ™μ•ˆ μ½˜μ†” 메세지 μ•½ 60개

throttle 적용 μ „ - 3μ΄ˆλ™μ•ˆ μ½˜μ†” 메세지 μ•½ 60개

throttle 적용 ν›„ - μ½˜μ†” 메세지 μ•½ 20개

throttle 적용 ν›„ - μ½˜μ†” 메세지 μ•½ 20개

πŸ€©Β ν•΄λ‹Ή κ²½ν—˜μ„ 톡해 μ•Œκ²Œλœ 점

이벀트 λ¦¬μŠ€λ„ˆ μ˜΅μ…˜ 쀑 passive option을 μ•Œκ²Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.

throttleκ³Ό debounce κ°œλ…μ— λŒ€ν•΄ μ•Œκ²Œ λ˜μ—ˆκ³ , μ–΄λ– ν•œ μƒν™©μ—μ„œ μ‚¬μš©ν•΄μ•Όν•˜λŠ”μ§€ μ•Œκ²Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.

Untitled

Hello, GSM

κ΄‘μ£Όμ†Œν”„νŠΈμ›¨μ–΄λ§ˆμ΄μŠ€ν„°κ³ λ“±ν•™κ΅ μž…ν•™ 지원 μ„œλΉ„μŠ€μž…λ‹ˆλ‹€. 2023학년도, 2024학년도 μ‹ μž…μƒ λͺ¨μ§‘ κΈ°κ°„λ™μ•ˆ 4,000+λͺ…μ˜ μ‚¬μš©μžκ°€ μ ‘μ†ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

배포 링크 β†’γ…€γ…€Github β†’γ…€γ…€ν”„λ‘œμ νŠΈ 회고둝 β†’

v1 - 2022. 4 ~ 2022. 10 / v2 - 2023. 8 ~ 2023. 11

Frontend 2λͺ…, Backend 2λͺ…, DevOps 1λͺ…, Designer 1λͺ…

πŸ‘©πŸ»β€πŸ’»Β λ‚΄κ°€ κΈ°μ—¬ν•œ λΆ€λΆ„

**성적 μž…λ ₯ νŽ˜μ΄μ§€ 개발**

μ›μ„œ νŽ˜μ΄μ§€, μˆ˜ν—˜ν‘œ 좜λ ₯ νŽ˜μ΄μ§€ 개발

v1 문제점 κ°œμ„ 

μ• λ‹ˆλ©”μ΄μ…˜ 개발

μ‹€μ œ 2022λ…„ μž…ν•™ 지원 κΈ°κ°„(2022. 10 ~ 2022. 11)에 μ‚¬μš©