Merge pull request #31 from Wannabe-Woowa-Article/llqqssttyy

우리는 프론트엔드의 기초를 잊어버리고 말았습니다.
Wannabe-Woowa-Article · Jul 28, 2024 · c6d7ee3 · c6d7ee3
2 parents 8a3ea14 + b093c03
commit c6d7ee3
Showing 1 changed file with 156 additions and 0 deletions.
diff --git a/July/article/We-Forgot-Frontend-Basics.md 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
+
+### 🧚 번역한 크루: 렛서(김다은)
+
+---
+
+## 우리는 프론트엔드의 기초를 잊어버리고 말았습니다.
+
+> 모든 최신 트렌드와 끝없는 패러다임 속에서 우리는 프론트엔드 개발의 기본을 잊어버린 것 같습니다.
+
+보통 저는 이렇게 말합니다. "그렇게 나쁘지 않아. 능숙한 사람이라면 거의 모든 걸 할 수 있어." 하지만 최근 프론트엔드 산업에 대한 내 시각을 바꿀 몇 가지를 발견했습니다. 끝없는 트렌드, 패러다임, 이 모든 신기한 것들 속에서 우리는 프론트엔드 개발의 근간을 잊은 것 같습니다.
+
+이 글에서는 최근 프로젝트에서 사용한 몇 가지 코드 공유하고, 이에 대한 나의 생각을 설명해 보려고 합니다. 그럼 바로 시작해 보겠습니다!
+
+<br/>
+
+![](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*XYgHgQF-AbS5YVa2-WE8kg.png)
+
+<br/>
+
+### 목차
+
+- 끝없이 늘어나는 복잡도
+- 1993년부터 시작된 실수
+- 모든 악의 근원
+- 몇 가지 중요한 팁
+
+<br/>
+
+## 끝없이 늘어나는 복잡도
+
+여기 가장 기본적인 Card 컴포넌트가 있습니다. 이 컴포넌트는 선택적인 헤더 속성을 가지고 있습니다. 만약 이 속성이 존재한다면, 특정 클래스를 가진 래핑 div 안에 렌더링됩니다.
+
+```jsx
+const Card = ({ children, header }) => {
+  return (
+    <div className="card">
+      {header && <div className="card__header">{header}</div>}
+      {children}
+    </div>
+  );
+};
+```
+
+간단한 경우에는 모든 것이 잘 작동합니다. 예를 들어, `<Card />`의 경우 헤더는 렌더링되지 않지만, `<Card header={"I am header"} />`의 경우에는 헤더가 렌더링됩니다. 문제는 헤더가 동적일 때 발생합니다. 헤더가 동적일 경우 실제 콘텐츠 또는 null을 반환할 수 있습니다 — `<Card header={<CardHeader />} />`. 이 경우 조건문 `{header && <div />}`는 이를 감지하지 못하고 빈 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 (
+    <div className="card">
+      {header && (
+        <div ref={headerRef} className="card__header">
+          {header}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+```
+
+또 다른 사람이 코드 리뷰 중에 이 코드가 초기 렌더링에서만 작동한다는 것을 발견했습니다. 만약 Footer가 비동기적으로 업데이트되면, useEffect는 호출되지 않습니다. 긴 논쟁 끝에 개발자들은 MutationObserver에 주목하기로 결정했습니다.
+
+그들의 논의 중에 저에게도 조언을 구했습니다. 솔직히 말해, 제 방법을 보여주는 것은 정말 재미있었습니다. 그 문제를 해결하기 위해 일반적인 CSS만 사용하면 충분했습니다.
+
+```css
+.card__header:empty {
+  display: none;
+}
+```
+
+개발자들은 자신의 작업을 너무 복잡하게 만드는 것에 익숙해져 있어서 CSS의 기본 기능조차 확인하지 않았습니다.
+
+<br/>
+
+## 1993년부터 시작된 실수
+
+이전 프로젝트에서 우리는 사이드 패널 위젯을 만들었는데, 이 위젯은 전체 높이로 확장되지만 헤더와 푸터를 겹치지 않아야 했습니다. 대략적인 공식은 다음과 같습니다: `100% - headerHeight - footerHeight`.
+
+이 해결책은 모든 페이지에서 원활하게 작동했지만, 한 페이지에서는 그렇지 않았습니다. 그 페이지에서 footerHeight가 0이 되는 문제가 발생했습니다. 이 버그를 맡은 개발자는 더 깊이 파고들어 document.querySelector('footer')가 null을 반환하지만, 푸터는 여전히 페이지에 렌더링된다는 것을 알아냈습니다. 그가 무엇을 했을까요? 그렇습니다, 다시 MutationObserver를 사용했습니다.
+
+그것이 이상하게 보였고, 저는 대안을 찾기로 결심했습니다. 그리고 결국 대안을 찾았습니다. 제가 해야 할 일은 코드의 몇 줄을 교체하는 것뿐이었습니다...
+
+```html
+<html>
+  <head></head>
+  <body>
+    <header></header>
+    <main id="root"></main>
+    <script src="index.js"></script>
+    <footer></footer>
+  </body>
+</html>
+```
+
+어떻게 된 일인지, `<script />`가 푸터보다 페이지에 먼저 로드되었습니다. `<script />`는 동기적으로 실행되며, 그 순간 푸터는 존재하지 않기 때문에 푸터의 높이를 측정할 수 없었습니다.
+
+단순히 이 코드를 교체했더니 모든 것이 제대로 작동하기 시작했습니다.
+
+요즘 개발자들은 webpack-plugin 같은 현대적인 도구에 크게 의존합니다. 그래서 직접 HTML을 작성해야 할 때는 바로 피합니다. 하지만 그것이 그렇게 어려운 일일까요?
+
+<br/>
+
+## 모든 악의 근원
+
+리액트 훅은 동시에 리액트에서 최고의 도구임과 동시의 최악의 도구입니다. 상태를 처리하는 유연하고 우아한 방법을 제공하지만, 다른 한편으로는 코드 복잡성을 크게 증가시키고 실수를 저지르기 쉽게 만듭니다.
+
+문서를 주의 깊게 읽고 올바르게 사용하는 방법을 이해하는 것이 어려워 보이지는 않습니다. 그러나 일부 개발자들은 이 명백한 단계를 건너뛰고 훅을 완전히 이해하지 못한 채 사용하기 시작합니다. 특히, 최적화와 악명 높은 useMemo 및 useCallback에 대해서 그렇습니다. 이제 모든 개발자가 명확한 이유 없이 전체 앱을 최적화하려고 합니다.
+
+이 "중요한" 최적화를 함께 살펴봅시다. 이 코드는 이 글을 위해 상상으로 작성한 것이 아닙니다. 실제로 제 프로젝트 중 하나에서 가져온 코드 조각입니다.
+
+```jsx
+const loaded = useMemo(() => {
+    return submitted && !loading && !error;
+  }, [submitted, error, loading]);
+}
+```
+
+이 최적화 이후로 앱 성능이 "급상승"했죠! 이해하실 수 있듯이, 이는 완전히 쓸모없고 오히려 앱의 첫 로딩에 약간의 영향을 줍니다. 솔직히 말해서, 이 코드를 작성한 진짜 의도를 아직도 이해하지 못하겠습니다.
+
+무엇이든 당연하게 받아들이고 다른 것을 생각하지 않는 것이 항상 훨씬 더 쉽습니다. 하지만 스스로 조금만 연구해 보는 것도 그렇게 어렵지는 않습니다.
+
+<br/>
+
+## 몇 가지 중요한 팁
+
+이 상황은 정말 안타깝습니다. 개발자들이 기본 기술을 잊기 시작하고, 새로운 기술과 접근 방식 속에서 비판적 사고를 잃어가는 것 같습니다.
+
+그러나 제 생각에는 이 문제를 해결하는 것이 그리 어렵지 않습니다. 위에서 언급한 모든 내용을 결론짓기 위해, 이 간단한 요점들을 보여드리고자 합니다. (피드백을 부탁드립니다!)
+
+- **시간을 내어 바닐라 자바스크립트를 이해하세요.** 기초가 튼튼하면 버그의 실제 원인을 더 쉽게 찾아내고 그에 맞게 수정할 수 있습니다.
+- **HTML과 CSS를 깊이 있게 배우세요.** 많은 유용한 속성, 선택자 등을 발견할 수 있으며, 이를 통해 많은 자바스크립트 코드를 대체할 수 있습니다. 예를 들어,
+  선택자를 사용한 예시를 기억해 보세요.
+- **비판적 사고 능력을 개발하세요.** 물론 팀 리더가 좋은 실천 방법과 원칙을 가르쳐주었지만, 무작정 따라가기만 하면 잘못된 방향으로 갈 수 있습니다. 대신, 왜 무언가가 그렇게 되어 있는지 이해하려고 노력하세요.
+- **SOLID, YAGNI, KISS 등의 원칙을 기억하세요.** 간단한 작업이 혼란스러운 해결책으로 악몽이 될 경우, 잠시 멈추고 다른 관점에서 다시 생각해 보세요. 아마도 한 가지 해결책에 너무 깊이 빠져서 명백한 무언가를 잊어버렸을 가능성이 큽니다.
+
+이 요점들에 대한 피드백을 부탁드립니다!
+
+---
+
+읽어주셔서 감사합니다!
+
+이 글이 유용하셨기를 바랍니다. 질문이나 제안이 있으시면 댓글로 남겨주세요. 여러분의 피드백은 제가 더 나아지는 데 도움이 됩니다.
+
+구독하는 것도 잊지 마세요⭐️