From b093c0380023d7d952ab0bba27c562e0fbffdba1 Mon Sep 17 00:00:00 2001 From: Kim Da Eun Date: Mon, 22 Jul 2024 13:03:58 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=EC=9A=B0=EB=A6=AC=EB=8A=94=20=ED=94=84?= =?UTF-8?q?=EB=A1=A0=ED=8A=B8=EC=97=94=EB=93=9C=EC=9D=98=20=EA=B8=B0?= =?UTF-8?q?=EC=B4=88=EB=A5=BC=20=EC=9E=8A=EC=96=B4=EB=B2=84=EB=A6=AC?= =?UTF-8?q?=EA=B3=A0=20=EB=A7=90=EC=95=98=EC=8A=B5=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- July/article/We-Forgot-Frontend-Basics.md | 156 ++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 July/article/We-Forgot-Frontend-Basics.md diff --git a/July/article/We-Forgot-Frontend-Basics.md b/July/article/We-Forgot-Frontend-Basics.md new file mode 100644 index 0000000..1b423d3 --- /dev/null +++ b/July/article/We-Forgot-Frontend-Basics.md @@ -0,0 +1,156 @@ +## πŸ”— [We Forgot Frontend Basics](https://blog.stackademic.com/we-forgot-frontend-basics-2f9a1c4dabaa) + +### πŸ—“οΈ λ²ˆμ—­ λ‚ μ§œ: 2024.07.22 + +### 🧚 λ²ˆμ—­ν•œ 크루: λ ›μ„œ(김닀은) + +--- + +## μš°λ¦¬λŠ” ν”„λ‘ νŠΈμ—”λ“œμ˜ 기초λ₯Ό μžŠμ–΄λ²„λ¦¬κ³  λ§μ•˜μŠ΅λ‹ˆλ‹€. + +> λͺ¨λ“  μ΅œμ‹  νŠΈλ Œλ“œμ™€ λμ—†λŠ” νŒ¨λŸ¬λ‹€μž„ μ†μ—μ„œ μš°λ¦¬λŠ” ν”„λ‘ νŠΈμ—”λ“œ 개발의 기본을 μžŠμ–΄λ²„λ¦° 것 κ°™μŠ΅λ‹ˆλ‹€. + +보톡 μ €λŠ” μ΄λ ‡κ²Œ λ§ν•©λ‹ˆλ‹€. "κ·Έλ ‡κ²Œ λ‚˜μ˜μ§€ μ•Šμ•„. λŠ₯μˆ™ν•œ μ‚¬λžŒμ΄λΌλ©΄ 거의 λͺ¨λ“  κ±Έ ν•  수 μžˆμ–΄." ν•˜μ§€λ§Œ 졜근 ν”„λ‘ νŠΈμ—”λ“œ 산업에 λŒ€ν•œ λ‚΄ μ‹œκ°μ„ λ°”κΏ€ λͺ‡ 가지λ₯Ό λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€. λμ—†λŠ” νŠΈλ Œλ“œ, νŒ¨λŸ¬λ‹€μž„, 이 λͺ¨λ“  μ‹ κΈ°ν•œ 것듀 μ†μ—μ„œ μš°λ¦¬λŠ” ν”„λ‘ νŠΈμ—”λ“œ 개발의 근간을 μžŠμ€ 것 κ°™μŠ΅λ‹ˆλ‹€. + +이 κΈ€μ—μ„œλŠ” 졜근 ν”„λ‘œμ νŠΈμ—μ„œ μ‚¬μš©ν•œ λͺ‡ 가지 μ½”λ“œ κ³΅μœ ν•˜κ³ , 이에 λŒ€ν•œ λ‚˜μ˜ 생각을 μ„€λͺ…ν•΄ 보렀고 ν•©λ‹ˆλ‹€. 그럼 λ°”λ‘œ μ‹œμž‘ν•΄ λ³΄κ² μŠ΅λ‹ˆλ‹€! + +
+ +![](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*XYgHgQF-AbS5YVa2-WE8kg.png) + +
+ +### λͺ©μ°¨ + +- 끝없이 λŠ˜μ–΄λ‚˜λŠ” λ³΅μž‘λ„ +- 1993λ…„λΆ€ν„° μ‹œμž‘λœ μ‹€μˆ˜ +- λͺ¨λ“  μ•…μ˜ 근원 +- λͺ‡ 가지 μ€‘μš”ν•œ 팁 + +
+ +## 끝없이 λŠ˜μ–΄λ‚˜λŠ” λ³΅μž‘λ„ + +μ—¬κΈ° κ°€μž₯ 기본적인 Card μ»΄ν¬λ„ŒνŠΈκ°€ μžˆμŠ΅λ‹ˆλ‹€. 이 μ»΄ν¬λ„ŒνŠΈλŠ” 선택적인 헀더 속성을 가지고 μžˆμŠ΅λ‹ˆλ‹€. λ§Œμ•½ 이 속성이 μ‘΄μž¬ν•œλ‹€λ©΄, νŠΉμ • 클래슀λ₯Ό 가진 λž˜ν•‘ div μ•ˆμ— λ Œλ”λ§λ©λ‹ˆλ‹€. + +```jsx +const Card = ({ children, header }) => { + return ( +
+ {header &&
{header}
} + {children} +
+ ); +}; +``` + +κ°„λ‹¨ν•œ κ²½μš°μ—λŠ” λͺ¨λ“  것이 잘 μž‘λ™ν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, ``의 경우 ν—€λ”λŠ” λ Œλ”λ§λ˜μ§€ μ•Šμ§€λ§Œ, ``의 κ²½μš°μ—λŠ” 헀더가 λ Œλ”λ§λ©λ‹ˆλ‹€. λ¬Έμ œλŠ” 헀더가 동적일 λ•Œ λ°œμƒν•©λ‹ˆλ‹€. 헀더가 동적일 경우 μ‹€μ œ μ½˜ν…μΈ  λ˜λŠ” null을 λ°˜ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€ β€” `} />`. 이 경우 쑰건문 `{header &&
}`λŠ” 이λ₯Ό κ°μ§€ν•˜μ§€ λͺ»ν•˜κ³  빈 divλ₯Ό λ Œλ”λ§ν•˜κ²Œ λ©λ‹ˆλ‹€. + +ν•œ κ°œλ°œμžκ°€ κ·Έ 문제λ₯Ό ν•΄κ²°ν•˜λ €κ³  μ‹œλ„ν–ˆμŠ΅λ‹ˆλ‹€. κ·ΈλŠ” "잠깐, div의 λ‚΄μš©μ„ ν™•μΈν•˜κ³  λΉ„μ–΄ 있으면 숨기면 λ˜μž–μ•„!"라고 μƒκ°ν–ˆμŠ΅λ‹ˆλ‹€. κ·Έκ°€ μž‘μ„±ν•œ λŒ€λž΅μ μΈ μ½”λ“œλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€: + +```jsx +const Card = ({ children, header }) => { + const headerRef = useRef(); + + useEffect(() => { + const hasContent = headerRef.current?.childNodes.length > 0; + headerRef.current.style.display = hasContent ? 'block' : 'none'; + }); + + return ( +
+ {header && ( +
+ {header} +
+ )} + {children} +
+ ); +}; +``` + +또 λ‹€λ₯Έ μ‚¬λžŒμ΄ μ½”λ“œ 리뷰 쀑에 이 μ½”λ“œκ°€ 초기 λ Œλ”λ§μ—μ„œλ§Œ μž‘λ™ν•œλ‹€λŠ” 것을 λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€. λ§Œμ•½ Footerκ°€ λΉ„λ™κΈ°μ μœΌλ‘œ μ—…λ°μ΄νŠΈλ˜λ©΄, useEffectλŠ” ν˜ΈμΆœλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. κΈ΄ λ…ΌμŸ 끝에 κ°œλ°œμžλ“€μ€ MutationObserver에 μ£Όλͺ©ν•˜κΈ°λ‘œ κ²°μ •ν–ˆμŠ΅λ‹ˆλ‹€. + +κ·Έλ“€μ˜ λ…Όμ˜ 쀑에 μ €μ—κ²Œλ„ 쑰언을 κ΅¬ν–ˆμŠ΅λ‹ˆλ‹€. μ†”μ§νžˆ 말해, 제 방법을 λ³΄μ—¬μ£ΌλŠ” 것은 정말 μž¬λ―Έμžˆμ—ˆμŠ΅λ‹ˆλ‹€. κ·Έ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ 일반적인 CSS만 μ‚¬μš©ν•˜λ©΄ μΆ©λΆ„ν–ˆμŠ΅λ‹ˆλ‹€. + +```css +.card__header:empty { + display: none; +} +``` + +κ°œλ°œμžλ“€μ€ μžμ‹ μ˜ μž‘μ—…μ„ λ„ˆλ¬΄ λ³΅μž‘ν•˜κ²Œ λ§Œλ“œλŠ” 것에 μ΅μˆ™ν•΄μ Έ μžˆμ–΄μ„œ CSS의 κΈ°λ³Έ κΈ°λŠ₯μ‘°μ°¨ ν™•μΈν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. + +
+ +## 1993λ…„λΆ€ν„° μ‹œμž‘λœ μ‹€μˆ˜ + +이전 ν”„λ‘œμ νŠΈμ—μ„œ μš°λ¦¬λŠ” μ‚¬μ΄λ“œ νŒ¨λ„ μœ„μ ―μ„ λ§Œλ“€μ—ˆλŠ”λ°, 이 μœ„μ ―μ€ 전체 λ†’μ΄λ‘œ ν™•μž₯λ˜μ§€λ§Œ 헀더와 ν‘Έν„°λ₯Ό κ²ΉμΉ˜μ§€ μ•Šμ•„μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€. λŒ€λž΅μ μΈ 곡식은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€: `100% - headerHeight - footerHeight`. + +이 해결책은 λͺ¨λ“  νŽ˜μ΄μ§€μ—μ„œ μ›ν™œν•˜κ²Œ μž‘λ™ν–ˆμ§€λ§Œ, ν•œ νŽ˜μ΄μ§€μ—μ„œλŠ” 그렇지 μ•Šμ•˜μŠ΅λ‹ˆλ‹€. κ·Έ νŽ˜μ΄μ§€μ—μ„œ footerHeightκ°€ 0이 λ˜λŠ” λ¬Έμ œκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. 이 버그λ₯Ό 맑은 κ°œλ°œμžλŠ” 더 깊이 νŒŒκ³ λ“€μ–΄ document.querySelector('footer')κ°€ null을 λ°˜ν™˜ν•˜μ§€λ§Œ, ν‘Έν„°λŠ” μ—¬μ „νžˆ νŽ˜μ΄μ§€μ— λ Œλ”λ§λœλ‹€λŠ” 것을 μ•Œμ•„λƒˆμŠ΅λ‹ˆλ‹€. κ·Έκ°€ 무엇을 ν–ˆμ„κΉŒμš”? κ·Έλ ‡μŠ΅λ‹ˆλ‹€, λ‹€μ‹œ MutationObserverλ₯Ό μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€. + +그것이 μ΄μƒν•˜κ²Œ λ³΄μ˜€κ³ , μ €λŠ” λŒ€μ•ˆμ„ 찾기둜 κ²°μ‹¬ν–ˆμŠ΅λ‹ˆλ‹€. 그리고 κ²°κ΅­ λŒ€μ•ˆμ„ μ°Ύμ•˜μŠ΅λ‹ˆλ‹€. μ œκ°€ ν•΄μ•Ό ν•  일은 μ½”λ“œμ˜ λͺ‡ 쀄을 κ΅μ²΄ν•˜λŠ” κ²ƒλΏμ΄μ—ˆμŠ΅λ‹ˆλ‹€... + +```html + + + +
+
+ +
+ + +``` + +μ–΄λ–»κ²Œ 된 일인지, `