사이드 프로젝트 Dockwho 🐥 (오류 해결 기록)

문제 1

아무리해도 500에러가 발생 .. 단지 params로 감싸서 생긴 문제

URL Parameters (params)

 

• 목적: URL Parameters는 주로 간단한 값이나 쿼리 스트링을 전달할 때 사용됩니다. 보통 검색, 필터링, 정렬 등의 용도로 사용됩니다.
• 위치: URL의 끝에 포함되며, ? 뒤에 key=value 형태로 추가됩니다. 여러 개의 파라미터는 &로 구분됩니다.
  • 예: /search?name=John&age=30
• 전송 방법: 주로 GET 요청에서 사용되며, 요청하는 리소스를 명시하거나 필터링하는 데 사용됩니다.
• 데이터 크기: URL 길이에 제한이 있어, 데이터를 많이 담을 수 없습니다. 웹 브라우저에서는 URL 길이에 제한이 있기 때문에 긴 데이터를 전달하는 데 적합하지 않습니다.
• 보안: URL에 노출되기 때문에 민감한 데이터나 중요한 정보는 포함하지 않아야 합니다.

 

 

Request Body

 

• 목적: Request Body는 주로 대량의 데이터나 복잡한 구조를 서버로 전송할 때 사용됩니다. 예를 들어, 사용자 입력 폼의 데이터, 파일 업로드, JSON 객체 등.
• 위치: 요청 본문(Body)에 데이터를 포함합니다. HTTP 요청 헤더의 Content-Type에 따라 데이터 형식이 결정됩니다.
  • 예: application/json, application/x-www-form-urlencoded, multipart/form-data 등
• 전송 방법: POST, PUT, PATCH 요청에서 주로 사용됩니다.
• 데이터 크기: 데이터 크기 제한이 상대적으로 크며, 요청 본문에 많은 양의 데이터를 담을 수 있습니다.
• 보안: URL에 노출되지 않아서 민감한 데이터를 전송할 때 사용됩니다.

 

 

문제 2

스웨거에서는 문제가 없었는데 브라우저에서는 계속 500에러가 발생했다.

이것 또한 API 요청 방식의 문제였다. 500에러는 백엔드 서버에서만 문제가 있을 때 발생하는 줄 알았다 😨

내가 잘못 보내고 있었던 것 ..

https://api-duckwho.xyz/api/chat/rooms?articleId=50211 라는 URL로 서버와 통신해야한다. (URL Parameters)

변경 전

변경 후

쿼리 파라미터로 수정 후 성공적으로 통신 !!

 

문제 3

마주한 에러

Uncaught Error: Rendered more hooks than during the previous render 에러는 React에서 발생하는 에러로, 컴포넌트가 렌더링될 때마다 사용하는 훅(Hook)의 개수나 순서가 변경될 때 발생한다. React의 훅은 컴포넌트의 렌더링마다 항상 같은 순서로 호출되어야 하기 때문에, 이를 어기면 이 에러가 발생하게된다.

훅을 다음과 같이 사용하진 않았는지 확인해보자.

 

1️⃣ 조건부 렌더링 내에서 훅 사용

React의 훅은 조건부로 호출하면 안 된다. 예를 들어, if 문 안에서 훅을 사용하면 컴포넌트가 재렌더링 될 때마다 훅의 호출 순서가 달라져서 에러가 발생할 수 있다.

// 잘못된 예
if (someCondition) {
  const [state, setState] = useState(0); // 조건부로 훅 호출
}

// 해결방법
//조건부 렌더링을 통해 컴포넌트를 다르게 렌더링하는 대신, 훅을 컴포넌트 최상위에서 항상 동일하게 호출해야 합니다.
const [state, setState] = useState(0); // 항상 호출되도록 최상위에서 사용

if (someCondition) {
  return <div>Condition is true</div>;
} else {
  return <div>Condition is false</div>;
}

 

2️⃣ 리스트 렌더링 중 훅 사용

리스트를 렌더링하면서 훅을 조건에 따라 다르게 사용하는 경우도 에러를 일으킬 수 있다

// 잘못된 예
{items.map(item => {
  if (item.someCondition) {
    const [state, setState] = useState(0); // 훅을 리스트 내부에서 호출
  }
  return <div>{item.name}</div>;
})}

// 해결방법
// 리스트 안에서 훅을 사용하지 말고, 리스트 항목들을 분리해서 렌더링하거나 훅은 컴포넌트 최상위에서만 사용해야 합니다.
const [state, setState] = useState(0);

return items.map(item => (
  <div key={item.id}>{item.name}</div>
));

내가 접했던 문제

 

3️⃣ 훅을 조건부로 설정하는 다른 로직

컴포넌트 내에서 훅의 개수나 호출 순서를 동적으로 변경하는 로직을 작성하는 경우에도 이 에러가 발생할 수 있다.

// 잘못된 예
const [state, setState] = useState(0);

if (someCondition) {
  const [anotherState, setAnotherState] = useState(0); // 조건에 따라 훅이 다르게 호출됨
}

// 해결방법
// 훅은 항상 동일한 순서로 호출되어야 하므로, 훅 호출을 조건문 밖으로 이동시켜야 합니다.
const [state, setState] = useState(0);
const [anotherState, setAnotherState] = useState(0); // 항상 동일하게 호출

if (someCondition) {
  // 조건에 따른 렌더링만 처리
}

 

4️⃣ React 버전 문제

React의 훅 기능은 React 16.8 버전 이상에서 도입되었기 때문에, 구 버전의 React를 사용하고 있다면 훅 관련 오류가 발생할 수 있다. 최신 버전의 React로 업데이트 권장.

 

5️⃣ useEffect나 useCallback 안에서 훅 사용

useEffect, useCallback, useMemo와 같은 훅 안에서 또 다른 훅을 호출하면 안 된다. 훅은 컴포넌트 최상위에서만 호출되어야 하기 때문이다.

// 잘못된 예
useEffect(() => {
  const [state, setState] = useState(0); // useEffect 안에서 훅 호출
}, []);

// 해결방법
// useEffect 안에서는 상태나 다른 훅을 호출할 수 없으며, 대신 외부에서 훅을 먼저 호출하고, 그 후에 useEffect 내에서 필요한 작업을 하도록 해야 합니다.
const [state, setState] = useState(0);

useEffect(() => {
  // side effect 처리
}, [state]);