[Next.js] 서버 상태와 클라이언트 상태의 차이에 관하여

기술면접질문으로 많이 나오는 질문 중에서 "서버 상태와 클라이언트 상태의 차이에 대해 설명해 주세요." 라는 질문에 대하여서 풀어서 이야기하려고 합니다.

목록

1. 상태 관리
2. 서버 상태
3. 클라이언트 상태
4. 느낀점

상태 관리

상태 관리는 웹 앱에서 매우 중요한 작업입니다. 상태에는 크게 클라이언트 상태와 서버 상태의 두 가지 종류가 있습니다.

서버 상태

▪️ 원격 저장: 클라이언트가 저장 방법이나 내용을 결정하지 않습니다.

▪️ 비동기식: 클라이언트가 서버로부터 데이터를 수신하는 데 시간이 다소 걸립니다.

▪️ 많은 사용자가 소유: 여러 사용자가 데이터를 변경할 수 있습니다.

웹사이트에 액세스하면 서버 상태가 서버에 저장되고 브라우저에 지속적으로 전달됩니다. 브라우저 세션 간에 사용자 프로필, 댓글 및 분석 정보를 유지하기 위해 세부 정보를 저장하는 데 사용됩니다.

많은 클라이언트가 동일한 서버에 연결하여 서버 상태를 변경할 수 있으므로 서버 상태가 클라이언트에 저장되는 방식을 분석하는 것이 중요합니다. 서버 상태는 원격으로 유지되고 사용자에 의해 변경될 수 있기 때문에 신중하게 처리해야 합니다.

클라이언트 상태

▪️ 임시: 브라우저를 닫으면 사라지며 일시적입니다.

▪️ 동기식: 항상 액세스할 수 있습니다.

▪️ 클라이언트 소유: 원래 브라우저로 제한됩니다.

클라이언트 상태는 브라우저에만 유지됩니다. Redux나 MobX와 같은 상태 관리 라이브러리 또는 useState나 useReducer와 같은 훅을 사용하는 경우 fetch API 데이터를 가져와 클라이언트 상태에 반영합니다. 열린 메뉴, 다크 모드 선택 또는 form 입력 태그과 같은 UI 관련 데이터를 서버로 전달하기 전에 보관하는 데 사용 됩니다.

 

	클라이언트 상태	서버 상태
위치	클라이언트(브라우저 또는 기기)에 저장된 데이터	서버나 외부 데이터 소스에 저장된 데이터
접근성	저장한 클라이언트만 접근 가능	접근 권한이 있는 모든 클라이언트 접근 가능
데이터 관리	클라이언트에서 관리(예: Redux와 같은 상태 관리 라이브러리 사용)	서버에서 관리(예: 데이터베이스 사용)
지속성	세션 간에 지속성이 유지되거나 유지되지 않을 수 있음	일반적으로 세션 간에 지속성 유지
네트워크 요청	데이터를 가져오거나 업데이트하려면 네트워크 요청이 필요할 수 있음	데이터 접근 또는 업데이트를 위해 네트워크 요청이 필요할 수 있음
보안	클라이언트가 액세스할 수 있고 변조 또는 가로채기의 대상이 될 수 있으므로 보안 수준이 낮을 수 있음	인증 및 암호화로 보호할 수 있으므로 더 안전할 수 있음
성능	네트워크 요청이 필요하지 않기 때문에 서버 상태에 비해 접근하고 업데이트하는 속도가 빠를 수 있음	네트워크 요청이 필요할 수 있으므로 클라이언트 상태에 비해 접근하고 업데이트하는 속도가 느릴 수 있음
확장성	클라이언트 기기의 용량에 제한을 받을 수 있기 때문에 서버 상태보다 확장성이 떨어질 수 있음	전용 서버나 고용량의 데이터 소스로 관리되기 때문에 클라이언트 상태보다 확장성이 더 높을 수 있음
예시	컴포넌트 상태, Redux 상태, 브라우저 쿠키	데이터베이스 레코드, API 응답, 서버 세션 데이터

느낀점

서버 상태와 클라이언트 차이에 대해서 알아보고 설명을 하는 시간을 가져보았는데 프런트엔드 부트캠프를 했던 경험을 생각하면서 다시 배우고 그걸 설명하므로서 좀 더 서버와 클라이언트에 대한 이해도가 늘어나는 시간을 가졌던 것 같습니다. 단순히 여기서 멈춰있기보다 계속 발전하는 모습을 보이고 싶다고 다짐이 되는 하루인 것 같습니다.