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
+
+
+
+
+
+
+
+
+
+```
+
+μ΄λ»κ² λ μΌμΈμ§, ``κ° νΈν°λ³΄λ€ νμ΄μ§μ λ¨Όμ λ‘λλμμ΅λλ€. ``λ λκΈ°μ μΌλ‘ μ€νλλ©°, κ·Έ μκ° νΈν°λ μ‘΄μ¬νμ§ μκΈ° λλ¬Έμ νΈν°μ λμ΄λ₯Ό μΈ‘μ ν μ μμμ΅λλ€.
+
+λ¨μν μ΄ μ½λλ₯Ό κ΅μ²΄νλλ λͺ¨λ κ²μ΄ μ λλ‘ μλνκΈ° μμνμ΅λλ€.
+
+μμ¦ κ°λ°μλ€μ webpack-plugin κ°μ νλμ μΈ λꡬμ ν¬κ² μμ‘΄ν©λλ€. κ·Έλμ μ§μ HTMLμ μμ±ν΄μΌ ν λλ λ°λ‘ νΌν©λλ€. νμ§λ§ κ·Έκ²μ΄ κ·Έλ κ² μ΄λ €μ΄ μΌμΌκΉμ?
+
+
+
+## λͺ¨λ μ
μ κ·Όμ
+
+리μ‘νΈ ν
μ λμμ 리μ‘νΈμμ μ΅κ³ μ λꡬμκ³Ό λμμ μ΅μ
μ λꡬμ
λλ€. μνλ₯Ό μ²λ¦¬νλ μ μ°νκ³ μ°μν λ°©λ²μ μ 곡νμ§λ§, λ€λ₯Έ ννΈμΌλ‘λ μ½λ 볡μ‘μ±μ ν¬κ² μ¦κ°μν€κ³ μ€μλ₯Ό μ μ§λ₯΄κΈ° μ½κ² λ§λλλ€.
+
+λ¬Έμλ₯Ό μ£Όμ κΉκ² μ½κ³ μ¬λ°λ₯΄κ² μ¬μ©νλ λ°©λ²μ μ΄ν΄νλ κ²μ΄ μ΄λ €μ 보μ΄μ§λ μμ΅λλ€. κ·Έλ¬λ μΌλΆ κ°λ°μλ€μ μ΄ λͺ
λ°±ν λ¨κ³λ₯Ό 건λλ°κ³ ν
μ μμ ν μ΄ν΄νμ§ λͺ»ν μ± μ¬μ©νκΈ° μμν©λλ€. νΉν, μ΅μ νμ μ
λͺ
λμ useMemo λ° useCallbackμ λν΄μ κ·Έλ μ΅λλ€. μ΄μ λͺ¨λ κ°λ°μκ° λͺ
νν μ΄μ μμ΄ μ 체 μ±μ μ΅μ ννλ €κ³ ν©λλ€.
+
+μ΄ "μ€μν" μ΅μ νλ₯Ό ν¨κ» μ΄ν΄λ΄
μλ€. μ΄ μ½λλ μ΄ κΈμ μν΄ μμμΌλ‘ μμ±ν κ²μ΄ μλλλ€. μ€μ λ‘ μ νλ‘μ νΈ μ€ νλμμ κ°μ Έμ¨ μ½λ μ‘°κ°μ
λλ€.
+
+```jsx
+const loaded = useMemo(() => {
+ return submitted && !loading && !error;
+ }, [submitted, error, loading]);
+}
+```
+
+μ΄ μ΅μ ν μ΄νλ‘ μ± μ±λ₯μ΄ "κΈμμΉ"νμ£ ! μ΄ν΄νμ€ μ μλ―μ΄, μ΄λ μμ ν μΈλͺ¨μκ³ μ€νλ € μ±μ 첫 λ‘λ©μ μ½κ°μ μν₯μ μ€λλ€. μμ§ν λ§ν΄μ, μ΄ μ½λλ₯Ό μμ±ν μ§μ§ μλλ₯Ό μμ§λ μ΄ν΄νμ§ λͺ»νκ² μ΅λλ€.
+
+무μμ΄λ λΉμ°νκ² λ°μλ€μ΄κ³ λ€λ₯Έ κ²μ μκ°νμ§ μλ κ²μ΄ νμ ν¨μ¬ λ μ½μ΅λλ€. νμ§λ§ μ€μ€λ‘ μ‘°κΈλ§ μ°κ΅¬ν΄ 보λ κ²λ κ·Έλ κ² μ΄λ ΅μ§λ μμ΅λλ€.
+
+
+
+## λͺ κ°μ§ μ€μν ν
+
+μ΄ μν©μ μ λ§ μνκΉμ΅λλ€. κ°λ°μλ€μ΄ κΈ°λ³Έ κΈ°μ μ μκΈ° μμνκ³ , μλ‘μ΄ κΈ°μ κ³Ό μ κ·Ό λ°©μ μμμ λΉνμ μ¬κ³ λ₯Ό μμ΄κ°λ κ² κ°μ΅λλ€.
+
+κ·Έλ¬λ μ μκ°μλ μ΄ λ¬Έμ λ₯Ό ν΄κ²°νλ κ²μ΄ 그리 μ΄λ ΅μ§ μμ΅λλ€. μμμ μΈκΈν λͺ¨λ λ΄μ©μ κ²°λ‘ μ§κΈ° μν΄, μ΄ κ°λ¨ν μμ λ€μ 보μ¬λλ¦¬κ³ μ ν©λλ€. (νΌλλ°±μ λΆνλ립λλ€!)
+
+- **μκ°μ λ΄μ΄ λ°λλΌ μλ°μ€ν¬λ¦½νΈλ₯Ό μ΄ν΄νμΈμ.** κΈ°μ΄κ° νΌνΌνλ©΄ λ²κ·Έμ μ€μ μμΈμ λ μ½κ² μ°Ύμλ΄κ³ κ·Έμ λ§κ² μμ ν μ μμ΅λλ€.
+- **HTMLκ³Ό CSSλ₯Ό κΉμ΄ μκ² λ°°μ°μΈμ.** λ§μ μ μ©ν μμ±, μ νμ λ±μ λ°κ²¬ν μ μμΌλ©°, μ΄λ₯Ό ν΅ν΄ λ§μ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό λ체ν μ μμ΅λλ€. μλ₯Ό λ€μ΄,
+ μ νμλ₯Ό μ¬μ©ν μμλ₯Ό κΈ°μ΅ν΄ 보μΈμ.
+- **λΉνμ μ¬κ³ λ₯λ ₯μ κ°λ°νμΈμ.** λ¬Όλ‘ ν 리λκ° μ’μ μ€μ² λ°©λ²κ³Ό μμΉμ κ°λ₯΄μ³μ£Όμμ§λ§, 무μμ λ°λΌκ°κΈ°λ§ νλ©΄ μλͺ»λ λ°©ν₯μΌλ‘ κ° μ μμ΅λλ€. λμ , μ 무μΈκ°κ° κ·Έλ κ² λμ΄ μλμ§ μ΄ν΄νλ €κ³ λ
Έλ ₯νμΈμ.
+- **SOLID, YAGNI, KISS λ±μ μμΉμ κΈ°μ΅νμΈμ.** κ°λ¨ν μμ
μ΄ νΌλμ€λ¬μ΄ ν΄κ²°μ±
μΌλ‘ μ
λͺ½μ΄ λ κ²½μ°, μ μ λ©μΆκ³ λ€λ₯Έ κ΄μ μμ λ€μ μκ°ν΄ 보μΈμ. μλ§λ ν κ°μ§ ν΄κ²°μ±
μ λ무 κΉμ΄ λΉ μ Έμ λͺ
λ°±ν 무μΈκ°λ₯Ό μμ΄λ²λ Έμ κ°λ₯μ±μ΄ ν½λλ€.
+
+μ΄ μμ λ€μ λν νΌλλ°±μ λΆνλ립λλ€!
+
+---
+
+μ½μ΄μ£Όμ
μ κ°μ¬ν©λλ€!
+
+μ΄ κΈμ΄ μ μ©νμ
¨κΈ°λ₯Ό λ°λλλ€. μ§λ¬Έμ΄λ μ μμ΄ μμΌμλ©΄ λκΈλ‘ λ¨κ²¨μ£ΌμΈμ. μ¬λ¬λΆμ νΌλλ°±μ μ κ° λ λμμ§λ λ° λμμ΄ λ©λλ€.
+
+ꡬλ
νλ κ²λ μμ§ λ§μΈμβοΈ