[코드잇 스프린트] 0415 데일리 퀴즈

1. JSON.parse(), response.json() 차이점을 설명해주세요

---

JSON.parse()와 response.json()은 둘 다 JSON 데이터를 다루는 데 사용되지만, 사용 환경과 역할에 차이가 있다.

 

 1. JSON.parse()

• 주로 문자열 형태의 JSON 데이터를 파싱하는 데 사용된다.
• 입력으로 문자열을 받아 JavaScript 객체로 변환한다.
• 클라이언트 측 코드에서 JSON 데이터의 문자열 표현을 JavaScript 객체로 변환하는 데 사용된다.
• 예를 들어, API에서 가져온 문자열 데이터나 로컬 스토리지에서 가져온 JSON 문자열을 파싱할 때 사용한다.

const jsonString = '{"name": "Alice", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject); // { name: 'Alice', age: 30 }

 

 

2. response.json()

• response.json()은 Fetch API의 Response 객체에 포함된 메서드이다.
• HTTP 요청을 통해 응답받은 데이터를 JSON 형식으로 파싱하여 JavaScript 객체로 변환한다.
• response는 fetch() 함수의 반환값으로, HTTP 응답을 나타내며, response.json()을 호출하여 응답 본문을 JSON 형식의 JavaScript 객체로 파싱할 수 있다.
• response.json()은 비동기 함수로, Promise를 반환한다. 따라서 .then() 또는 async/await를 사용하여 결과를 처리해야 한다.

fetch('https://api.example.com/data')
    .then(response => response.json())  // JSON 파싱
    .then(data => {
        console.log(data); // 파싱된 데이터 출력
    })
    .catch(error => {
        console.error('Fetch failed:', error);
    });

 

정리하자면 JSON.parse()는 문자열을 JSON 형식의 JavaScript 객체로 파싱할 때 사용되고, response.json()은 Fetch API를 통해 HTTP 응답을 JSON 형식의 문자열을 JavaScript 객체로 파싱할 때 사용된다.

 

 

2. useEffect 함수와 디펜던시 리스트가 있고 없고 차이를 설명해주세요

---

useEffect는 React의 함수 컴포넌트에서 사이드 이펙트를 처리하는 데 사용되는 훅이다.

useEffect는 두 번째 매개변수로 디펜던시(의존성) 리스트를 가질 수 있는데, 이 리스트가 있고 없고에 따라 효과의 실행 방식에 차이가 있다.

 

1, 디펜던시 리스트가 없는 useEffect

• useEffect의 두 번째 매개변수가 없는 경우, 코드는 컴포넌트가 마운트될 때와 컴포넌트가 언마운트될 때 호출된다.
• 즉, 컴포넌트의 수명 주기에서 처음 렌더링될 때와 언마운트될 때 사이드 이펙트가 실행된다.
• 이런 경우, 코드에서 상태나 다른 값의 변화에 반응하지 않고 항상 컴포넌트가 마운트 및 언마운트될 때 실행해야 하는 로직(예: API 요청, 이벤트 리스너 등록/해제)을 처리할 때 유용하다.

useEffect(() => {
    console.log('컴포넌트가 마운트되었습니다.');
    return () => {
        console.log('컴포넌트가 언마운트되었습니다.');
    };
}, []);

 

mount와 unmount

1. mount 는 어디에 쓰일까?
- 받아온 props를 객체의 state로 설정해줄때
- REST API로 작업을 처리할 때
- d3 video 같은 라이브러리를 사용할 때
- setInteval, setTimeout을 사용할 때

2 Unmount는 어디에 쓰일까?
- 뒷정리 함수라고 생각하면 된다.
- clearInterval, clearTimeout 라이브러리 인스턴스 제거

 

 

2.  디펜던시 리스트가 있는 useEffect

• 디펜던시 리스트는 이펙트가 실행될 조건이 되는 값이나 상태를 지정한다.
• 이를 통해 특정 상태나 값이 변경될 때 실행해야 하는 로직을 제어할 수 있다.
• 디펜던시 리스트에 있는 값이나 상태가 변경될 때마다 이펙트가 실행된다.

const [count, setCount] = useState(0);

useEffect(() => {
    console.log(`count가 ${count}로 변경되었습니다.`);
}, [count]); // count가 변경될 때마다 이펙트가 실행된다.

 

 

 

3. 오프셋 기반 페이지네이션, 커서 기반 페이지네이션에 대해 설명해주세요

---

페이지네이션(pagination)은 큰 데이터를 사용자가 보기 편하도록 작은 부분으로 나누어 여러 페이지로 표시하는 것을 뜻한다. 여러 개의 게시물을 보여주는 웹사이트에서 보통 화면 하단에서 흔히 볼 수 있는 UI입니다. 

 

주요한 페이지네이션 방식은 오프셋 기반 페이지네이션과 커서 기반 페이지네이션이다.

 

1. 오프셋 기반 페이지네이션 (Offset-Based Pagination)

• 개념: 오프셋 기반 페이지네이션은 요청할 페이지의 시작 지점을 지정하고, 원하는 크기만큼 데이터를 가져오는 방식이다.
• 요청 방법: 요청 시 시작할 위치(오프셋)과 페이지 크기를 지정한다. 예를 들어 ?offset=20&limit=10은 20번째 항목부터 10개의 항목을 요청한다.
• 장점:
  • 구현이 비교적 간단하고 이해하기 쉽다.
• 단점:
  • 페이지가 멀어질수록 응답 시간이 길어질 수 있다. 데이터베이스는 높은 오프셋을 가진 요청의 경우 많은 데이터를 건너뛰어야 하기 때문이다.
  • 데이터의 양이 많을 경우 성능 저하가 발생할 수 있다.
  • 데이터가 동적으로 변할 경우, 페이징의 데이터가 불일치할 수 있다.

2. 커서 기반 페이지네이션 (Cursor-Based Pagination)

• 개념: 커서 기반 페이지네이션은 데이터의 특정 지점을 나타내는 커서를 사용하여 페이지네이션을 수행한다. 요청 시 이전 페이지의 마지막 항목 또는 다음 페이지의 첫 번째 항목을 나타내는 커서를 포함한다.
• 요청 방법: 요청 시 커서와 페이지 크기를 지정한다. 예를 들어, ?cursor=abc123&limit=10은 abc123 커서부터 10개의 항목을 요청한다.
• 장점:
  • 데이터베이스는 특정 커서에서부터 데이터를 가져올 수 있기 때문에 오프셋 기반 페이지 네이션보다 대량의 데이터에 대해 더 나은 성능을 제공한다.
  • 데이터의 동적인 변경에도 안정적으로 작동한다.따라서 데이터 일관성을 유지할 수 있다.
• 단점:
  • 구현이 비교적 복잡하다. 커서를 사용하여 다음 페이지를 요청해야 하므로 데이터베이스 쿼리와 로직이 더 복잡할 수 있다.
  • 데이터의 순서가 중요하기 때문에, 정렬이 일관되지 않으면 문제가 발생할 수 있다.

비교

• 오프셋 기반 페이지네이션은 구현이 간단하지만 대량의 데이터와 동적인 데이터 환경에서 성능 저하와 데이터 불일치 문제가 발생할 수 있다.
• 커서 기반 페이지네이션은 성능과 데이터 일관성이 우수하지만 구현이 비교적 복잡하다.

 

 

4. 비동기 상황에서 state값을 변경할때 주의 해야하는 이유와 해결법 설명해주세요.

---

const [state,setState] = useState(initalState)

 

useState hook을 사용할 때, 배열의 첫번째 순서는 상태(state) 이고, 두번째는 상태를 업데이트하는 상태 업데이트함수(setState)이다. useState 내부에는 initalState, 즉 상태의 초기값을 나타낸다.

 

setState를 사용하는 방법은 두가지가 존재한다.

 

1. 값을 기반한 업데이트

• 이전 state를 사용하지않고 setState내부에서 업데이트할 값을 인자로 받는다.
• 이 방법은 아마 익숙할것이고, 또 많이 써왔을 일반적인 useState에서 state 상태값 변경 로직이다.

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    // 기본적인 setState 사용
    setCount(count + 1); // 새로운 값을 설정
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

 

 

2. 콜백함수를 사용한 setState

• 해당 setState는 React 엔진 내부에서 어떤 조건처리로 인하여, 콜백함수를 인자로 전달받을 수 있다. 해당 콜백함수는 이전 상태값(prevState)를 인자로 받아 새로운 값을 반환할 수 있다.
• 해당 콜백함수를 사용한 setState는 이전 상태 값에 기반한 업데이트라고 부르며, 객체나 배열같은 복잡한 상태를 변경해야할 때 주로 쓰인다.

function ComplexStateExample() {
  const [user, setUser] = useState({
    name: 'Seju',
    age: 26,
    email: 'seju@gmail.com'
  });

  const handleUpdateAge = () => {
    // 이전 상태 값을 기반으로 새로운 값을 계산하여 업데이트
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
      <button onClick={handleUpdateAge}>Increase Age</button>
    </div>
  );
}

• 위 코드에선 user 상태가 객체로 관리되고 있으며, setUser에서 콜백함수를 이용해 이전 상태 값(prevUser)을 기반으로 새로운 객체를 생성하여 업데이트하고 있다.
• 여기서 setUser 내부의 콜백함수에 인자로 전달한 prevUser는 useState로 관리되는 user상태의 이전 값을 나타낸다.
• useState로 호출할때 초기값으로 지정한 값인 user가 초기값이 되고, 이후 setUser를 호출해 user의 상태가 업데이트되면, React에서는 user의 상태를 자동으로 관리하며, 그 이전 값을 prevUser로 제공하는 형태이다.

따라서 이전 상태에 기반해 값을 업데이트 하고 싶다면 setState 함수에 콜백함수를 써야한다.