[autofix.ci] apply automated fixes

Author: autofix-ci[bot]

fundamentals/code-quality/.vitepress/theme/composables/useGithubApi.ts

@@ -179,7 +179,8 @@ export function useGithubApi(config: GithubApiConfig) {
 }
 
 const fetchGithubDiscussion = async (query: string) => {
-  const isLocalhost = typeof window !== 'undefined' && window.location.hostname === "localhost";
+  const isLocalhost =
+    typeof window !== "undefined" && window.location.hostname === "localhost";
 
   if (isLocalhost) {
     const accessToken = await (import.meta as any).env

fundamentals/debug/index.md

@@ -29,6 +29,3 @@ features:
     title: 같은 실수를 반복하고 싶지 않다면
     details: 디버깅 경험을 문서화하고 팀과 공유해서 재발을 방지해요.
 ---
-
-
-

fundamentals/debug/pages/diagnose/error-message.md

@@ -8,13 +8,15 @@
 코드에 문법적인 문제가 있을 때는 보통 `"SyntaxError: ~"`로 시작하는 에러 메시지가 출력돼요. 이 메시지는 자바스크립트 엔진이 **코드를 실행하기도 전에 문법을 해석하다가 실패했음을 알려주는 신호**예요.
 
 예를 들어, 괄호가 닫히지 않았거나, `export`나 `return` 같은 예약어를 잘못 썼을 때 아래와 같은 메시지를 볼 수 있어요.
+
 ```tsx 5
 function run() {
   const name = 'Hello'
   if (true) {
     console.log(name)
 
 ```
+
 ```
 SyntaxError: Unexpected token '{'
 ```
@@ -25,90 +27,97 @@ SyntaxError: Unexpected token '{'
 ```tsx
 JSON.parse('{ foo: "bar" }");
 ```
+
 ```
 SyntaxError: The string did notmatch
 the expected pattern.
 ```
 
 ### 확인할 것
+
 - 문법에 맞게 작성되었는지 확인해요.
 - 사용자가 코드를 작성하는 동안 IDE가 구문 오류를 실시간으로 감지하고 강조 표시하여 판단해주기 때문에, 문법오류는 코드 작성 시 문제를 파악하고 고칠 수 있어요.
 
 ## 모듈 import 오류
 
-모듈을 import하는 과정에서도 문법 오류(`SyntaxError`)가 발생할 수 있어요. 특히 ES 모듈(ESM)과 CommonJS(CJS) 방식이 혼합된 환경에서는 설정이 어긋나기 쉽고, 이로 인해 문법 오류처럼 보이는 에러가 나타날 수 있어요. 모듈 관련 에러 메시지를 보면 단순 문법 문제가 아니라 **모듈 시스템 설정에 문제가 있을 가능성**을 유추할 수 있어요. 
-
+모듈을 import하는 과정에서도 문법 오류(`SyntaxError`)가 발생할 수 있어요. 특히 ES 모듈(ESM)과 CommonJS(CJS) 방식이 혼합된 환경에서는 설정이 어긋나기 쉽고, 이로 인해 문법 오류처럼 보이는 에러가 나타날 수 있어요. 모듈 관련 에러 메시지를 보면 단순 문법 문제가 아니라 **모듈 시스템 설정에 문제가 있을 가능성**을 유추할 수 있어요.
 
 예를들어, .js 파일에 import 구문을 사용하게 되면 아래와 같은 에러머세지가 나타나요. Node.js는 기본적으로 .js 파일을 CommonJS로 해석하기 때문에, import를 사용할 수 없고 require()를 써야 해요.
 
 ```js
 // example.js
-import fs from 'fs';
+import fs from "fs";
 
-fs.readFile('example.txt', 'utf8', (err, data) => {
+fs.readFile("example.txt", "utf8", (err, data) => {
   if (err) throw err;
   console.log(data);
 });
 ```
+
 ```
 SyntaxError: Cannot use import statement outside a module
 ```
 
-### 확인할 것 
+### 확인할 것
+
 - 프로젝트의 모듈 시스템 설정이 올바른지 확인해요
   - ESM 사용 시: `package.json`에 `"type": "module"` 설정을 확인해요
   - CommonJS 사용 시: `"type"` 필드를 생략하거나, `"type": "commonjs"`로 명시해도 돼요
 - `.mjs`, `.cjs`, `.js` 확장자가 적절히 사용됐는지 확인해요
 - 잘못된 번들 경로로 `esm` 전용 모듈을 가져오지 않았는지 확인해요
 
-
 ## 타입 오류 (`TypeError`)
 
 값의 타입이 예상과 다를 때는 `"TypeError: ~"`로 시작하는 에러 메시지가 출력돼요. 이 에러는 주로 **정의되지 않았거나 잘못된 값에 접근하거나, 함수가 아닌 값을 함수처럼 호출했을 때** 발생해요.
 
 예를 들어 객체가 `null`이나 `undefined`인 상태에서 속성에 접근하려고 하면 이런 메시지를 볼 수 있어요.
+
 ```tsx 2
 const user = null;
 console.log(user.name);
 ```
+
 ```
-TypeError: Cannot read property 'name' of null  
+TypeError: Cannot read property 'name' of null
 ```
 
 <br/>
 
 함수가 아닌 객체를 호출하면 다음과 같은 에러 메세지가 나요
+
 ```tsx 2
 const num = 42;
 num();
-
 ```
+
 ```
 TypeError: num is not a function
 ```
 
 <br/>
 
-`async` 함수 안에서 비동기 작업을 실행할 때 `await`를 빠뜨리면 의도하지 않은 동작이나 `Promise` 타입 관련 오류가 발생할 수 있어요. 예를 들어, 함수가 `Promise`를 반환하는데 이를 `await`하지 않고 그대로 사용하면 타입스크립트는 `Promise<T>`와 `T`를 혼동해서 에러를 발생시켜요. 
+`async` 함수 안에서 비동기 작업을 실행할 때 `await`를 빠뜨리면 의도하지 않은 동작이나 `Promise` 타입 관련 오류가 발생할 수 있어요. 예를 들어, 함수가 `Promise`를 반환하는데 이를 `await`하지 않고 그대로 사용하면 타입스크립트는 `Promise<T>`와 `T`를 혼동해서 에러를 발생시켜요.
 
 ```tsx 2
 async function getUserName() {
   return "Alice";
 }
 
 async function main() {
-  const name: string = getUserName(); 
+  const name: string = getUserName();
 }
 ```
+
 ```
 Type 'Promise<string>' is not assignable to type 'string'
 ```
 
 ### 확인할 것
+
 - 객체가 실제로 존재하는지 확인해요
-- API 응답 데이터 구조가 맞는지 확인해요 
+- API 응답 데이터 구조가 맞는지 확인해요
 - `typeof`, `Array.isArray()` 등으로 미리 검사했는지 확인해요
-- `await` 누락 여부를 확인해요. 
+- `await` 누락 여부를 확인해요.
 
 ## 참조 오류 (`ReferenceError`)
 
@@ -118,29 +127,31 @@ Type 'Promise<string>' is not assignable to type 'string'
 
 ```tsx 1
 console.log(userName);
-let userName = 'Alice';
-
+let userName = "Alice";
 ```
+
 ```
 ReferenceError: userName is not defined
 ```
 
-### 확인할 것 
+### 확인할 것
+
 - 변수가 선언되었는지 확인해요
 - 선언보다 먼저 접근한 건 아닌지 확인해요
 - 외부 스코프 참조가 의도한 것인지 확인해요
 
 ## 리소스 로딩 오류
 
-외부 자원을 가져오는 요청이 네트워크 단계에서 실패하면 브라우저는 `fetch`에서 `TypeError`를 던져요. 브라우저에 따라 `"TypeError: Load failed"` 또는 `"TypeError: Failed to fetch"`로 나타나요. 이 에러는 **HTTP 4xx, 5xx 같은 응답 에러와 다르게** 네트워크 자체가 실패했거나 보안 정책으로 차단됐을 때 발생해요. 이 경우엔 **reject**되어 바로 catch로 넘어가요. 
+외부 자원을 가져오는 요청이 네트워크 단계에서 실패하면 브라우저는 `fetch`에서 `TypeError`를 던져요. 브라우저에 따라 `"TypeError: Load failed"` 또는 `"TypeError: Failed to fetch"`로 나타나요. 이 에러는 **HTTP 4xx, 5xx 같은 응답 에러와 다르게** 네트워크 자체가 실패했거나 보안 정책으로 차단됐을 때 발생해요. 이 경우엔 **reject**되어 바로 catch로 넘어가요.
 
 ```tsx 3
-fetch('https://api.otherdomain.com/data')
+fetch("https://api.otherdomain.com/data")
   .then((res) => res.json())
   .catch((err) => {
-    console.error('네트워크 또는 CORS 오류:', err.message);
+    console.error("네트워크 또는 CORS 오류:", err.message);
   });
 ```
+
 ```
 TypeError: Load failed
 TypeError: Failed to fetch
@@ -151,26 +162,29 @@ TypeError: Failed to fetch
 참고로, **HTTP 4xx, 5xx 같은 응답 에러**가 발생했을 때는 **reject하여 catch로 넘기지 않고** `res.ok`가 `false`인 응답을 돌려줘요.
 
 ```ts
-fetch('/api/data')
+fetch("/api/data")
   .then(async (res) => {
     if (!res.ok) {
       const text = await res.text();
-      throw new Error(`서버 오류: HTTP ${res.status} ${res.statusText} ${text}`);
+      throw new Error(
+        `서버 오류: HTTP ${res.status} ${res.statusText} ${text}`
+      );
     }
     return res.json();
   })
   .catch((err) => console.error(err));
 ```
 
-
 ### 확인할 것
+
 - 콘솔에 `TypeError: Load failed`나 `Failed to fetch`가 보이면 네트워크, CORS, 인증서, CSP(Content Security Policy), 확장 프로그램 차단 가능성을 먼저 의심해요.
 
 ---
 
 ### 📚 더 알아보기
+
 - [MDN: SyntaxError](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError)
 - [MDN: TypeError](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError)
 - [MDN: ReferenceError](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError)
 - [Node.js ESM 가이드](https://nodejs.org/api/esm.html)
-- [CORS 이해하기](https://developer.mozilla.org/ko/docs/Web/HTTP/CORS)
+- [CORS 이해하기](https://developer.mozilla.org/ko/docs/Web/HTTP/CORS)

fundamentals/debug/pages/diagnose/index.md

@@ -1,2 +1,3 @@
 # 진단하기
-에러를 진단할 때는 원인을 구체적으로 좁혀가야 해요. 문제를 체계적으로 분석하고 해결하는 데 도움이 되는 방법이에요.
+
+에러를 진단할 때는 원인을 구체적으로 좁혀가야 해요. 문제를 체계적으로 분석하고 해결하는 데 도움이 되는 방법이에요.

fundamentals/debug/pages/diagnose/map.md

@@ -4,33 +4,34 @@
 
 특히 데이터가 어떻게 흘러가는지를 단계별로 정리하면, 실제 동작한 결과와 기대한 결과를 비교해가며 에러의 원인을 좁혀갈 수 있어요. 이 방식은 비동기 요청, 상태 변화, 복잡한 사용자 입력 처리 흐름을 분석할 때 특히 유용해요.
 
-
-## 예시 
+## 예시
 
 유효성 검사 입력창을 예시로 들어볼게요. 입력값이 어떻게 처리되고 어떤 검증 단계를 거치는지를 살펴볼 수 있는 간단한 예시예요.
 
 ![](../../images/diagnose/map-ex-input-error-message.png){width=200}
 
 ## 동작 순서
+
 1. 사용자가 검색 입력창에 키워드를 입력해요.
 2. 입력이 바뀔 때마다 유효성 검사 함수가 실행돼요.
 3. 검사 결과, 입력에 따라 `true / false`를 반환해요.
 4. 검사 결과가 `false`이면 오류 메시지나 경고 아이콘 같은 에러 UI를 보여줘요.
 5. 검사 결과가 `true`이면 정상 UI를 보여줘요.
 
-
 ## 작업지도
+
 위의 동작 순서에 따라 작업지도를 그려보아요. 코드를 실행했을때 아래의 순서를 모두 통과하면 이 코드는 문제가 없다는 뜻이에요.
 ![](../../images/diagnose/map.png)
 
 ## 코드
+
 아래 코드에는 치명적인 오류가 있는데요, 작업지도를 하나씩 검증하며 어디에 문제가 발생하는지 살펴보아요.
 
 ```tsx 8,15,19,26
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const ValidatedInput = () => {
-  const [input, setInput] = useState('');
+  const [input, setInput] = useState("");
   const [isValid, setIsValid] = useState(true);
 
   const validate = (value) => {
@@ -53,17 +54,17 @@ const ValidatedInput = () => {
     <div>
       <input type="text" value={input} onChange={handleChange} />
       {/* 4. isValid값이 false이면 에러메세지를 출력해요 */}
-      {isValid && (
-        <div style={{ color: 'red' }}>Error message</div>
-      )}
+      {isValid && <div style={{ color: "red" }}>Error message</div>}
     </div>
   );
 };
 export default ValidatedInput;
 ```
+
 ![](../../images/diagnose/map-check.png)
 
 ## 에러 도출
+
 검증 결과, `isValid &&` 조건으로 작성된 에러 UI 렌더링 부분에 **논리 오류**가 있었어요.`isValid === false`로 작성해야 하는데, `isValid &&`로 되어 있어서, **정상적인 UI가 아닌, 잘못된 조건에 의해 오류 메시지가 렌더링**되고 있었어요.
 
 ```tsx 4
@@ -78,5 +79,4 @@ export default ValidatedInput;
 };
 ```
 
-
-이처럼 작업 지도를 그리고 단계별로 동작을 검증해 나가면, 코드 흐름이 머릿속에 명확하게 그려지고 문제를 빠르게 찾아낼 수 있어요. 특히 UI 상태 변화나 비동기 처리처럼 복잡한 로직에서는 작업 지도가 강력한 디버깅 도구가 될 수 있어요.
+이처럼 작업 지도를 그리고 단계별로 동작을 검증해 나가면, 코드 흐름이 머릿속에 명확하게 그려지고 문제를 빠르게 찾아낼 수 있어요. 특히 UI 상태 변화나 비동기 처리처럼 복잡한 로직에서는 작업 지도가 강력한 디버깅 도구가 될 수 있어요.

fundamentals/debug/pages/fix/correct.md

@@ -1,32 +1,40 @@
 # 근본 원인 수정하기
+
 에러를 수정할 때 종종 겉보기에만 문제를 해결한 코드를 작성하는 경우가 있어요. 이는 일시적으로 동작하더라도, 추후에 같은 문제가 다시 발생하거나 다른 곳에서 파급 효과를 일으킬 수 있어요. 진짜 중요한 건 “근본 원인을 찾아 수정하는 것” 이에요.
 
 ## 예시 1
+
 배열에서 값을 찾을 때 undefined 에러가 나는 경우가 있어요. 사용자는 id === 3인 유저를 찾으려 했지만 배열에 해당 유저가 없으므로 undefined를 반환하고, 이후 .name에 접근하면서 에러가 발생해요.
 
 ```tsx
-const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
+const users = [
+  { id: 1, name: "Alice" },
+  { id: 2, name: "Bob" }
+];
 const selectedUser = users.find((user) => user.id === 3);
 
-console.log(selectedUser.name); 
-
+console.log(selectedUser.name);
 ```
 
 ### 겉보기에만 해결된 코드
+
 as로 타입 단언을 해버리거나, assert!를 사용하는 등, 겉으로는 타입에러가 발생하지 않도록 처리할 수 있어요. 하지만, 로직상 undefined.name이 undefined로 처리되어 잘못된 데이터가 조용히 넘어가요. 문제의 원인(해당 유저가 없다는 사실)을 숨기기만 하고, 애초에 find() 결과를 제대로 확인하지 않았다는 잘못된 가정을 그대로 유지한 셈이에요.
+
 ```tsx
 const selectedUser = users.find((user) => user.id === 3) || {};
 const selectedUser = users.find((user) => user.id === 3) as User;
-const selectedUser = users.find((user) => user.id === 3)!
+const selectedUser = users.find((user) => user.id === 3)!;
 ```
 
 ### 근본 원인을 해결한 코드
+
 데이터의 불완전성을 명시적으로 확인하고, 문제가 생기면 명확하게 처리해요. 또는, 타입 단언은 제거하고, 옵셔널 체이닝을 잘 사용하여 의도하지 않은 에러를 방지해요.
+
 ```tsx
 const selectedUser = users.find((user) => user.id === 3);
 
 if (!selectedUser) {
-  throw new Error('User with ID 3 not found');
+  throw new Error("User with ID 3 not found");
 }
 
 console.log(selectedUser.name);
@@ -38,13 +46,14 @@ console.log(selectedUser?.name ?? "사용자 없음");
 ```
 
 ## 예시 2
+
 검색어 자동완성 API 요청 중 이전 요청 결과가 덮어써지는 문제를 예시로 들어볼게요.
 
 검색창에서 빠르게 입력 시, 결과가 엉켜서 표시되는 상황이에요. 사용자가 "app", "apple", "apples"처럼 빠르게 입력하면 fetch 요청이 비동기적으로 여러 번 호출되요. 마지막 요청보다 먼저 끝난 이전 응답이 덮어쓰기 되는 현상 발생하고, 오래된 결과가 화면에 나타나는 현상이 발생해요.
 
 ```tsx
 function SearchBox() {
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
   const [result, setResult] = useState("");
 
   useEffect(() => {
@@ -73,8 +82,10 @@ function SearchBox() {
   );
 }
 ```
-### 겉보기에 해결된 코드: 
-`setTimeout`으로 딜레이를 주고, `clearTimeout`으로 이전 요청을 정리하는 것 같지만 실제로는 문제를 해결하지 못해요. `clearTimeout`은 다음 요청 전 대기 중인 타임아웃만 취소할 뿐, 이미 시작된 `fetch` 요청은 취소하지 않아요. 그래서 불필요한 요청이 계속 서버에 전달될 수 있어요. 근본 원인인 "응답 순서 관리" 를 하지 않았기 때문에 race condition은 그대로 존재해요. 
+
+### 겉보기에 해결된 코드:
+
+`setTimeout`으로 딜레이를 주고, `clearTimeout`으로 이전 요청을 정리하는 것 같지만 실제로는 문제를 해결하지 못해요. `clearTimeout`은 다음 요청 전 대기 중인 타임아웃만 취소할 뿐, 이미 시작된 `fetch` 요청은 취소하지 않아요. 그래서 불필요한 요청이 계속 서버에 전달될 수 있어요. 근본 원인인 "응답 순서 관리" 를 하지 않았기 때문에 race condition은 그대로 존재해요.
 
 ```tsx
 useEffect(() => {
@@ -93,6 +104,7 @@ useEffect(() => {
 ```
 
 ### 근본 원인을 해결한 코드
+
 AbortController 또는 요청 순서 관리하도록 수정했어요. 디바운스로 불필요한 요청 자체를 줄이고, AbortController로 진행 중이던 이전 요청을 취소하여 레이스를 막았어요.
 
 ```tsx 6,7,15,16,22,35,37,38,39,40,41,42,43
@@ -129,7 +141,7 @@ function SearchBox() {
           //Abort Error는 조용히 무시해요
           if (err instanceof DOMException && err.name === "AbortError") return;
           console.error(err);
-        })
+        });
     }, 300);
 
     return () => {
@@ -157,4 +169,4 @@ function SearchBox() {
     </>
   );
 }
-```
+```