장치 의존성과 CSR

Question

안녕하세요! 6번 강의의 24:15 부분 즈음부터 설명하시는 장치 의존성에 대해 궁금한 점이 있어서 질문드리려고 합니다. 강의를 들으면 마치 "장치 의존성을 해결하기 위해 React.js와 같은 CSR 방식이 등장하였다."라고 이해하게 되는데, 그런 의도로 말씀하신게 맞는지 궁금합니다. 만약 그러한 의도로 말씀하신 것이 맞다면, 제가 알고 있는 내용과 많이 다른 것 같아 혼란스러워 질문을 작성하게 되었습니다. 제가 기존에 알고 있던 지식으로는, 다양한 화면의 장치에 대응하기 위해(즉, 장치 의존성을 해결하기 위해) "반응형 웹 디자인"이 등장한 것으로 알고 있는데요. HTML은 어떤 장치에서 받든 해당 파일을 구동하는 장치(구체적으로는 프로그램)에서 사용할 수 있게 결국 파싱이 되니까(Ex. DOM 생성) 장치에 의존하지 않는 것 아닌가요? 화면의 크기마다 달라지는 UI를 제어하기 위한 방법으로는 CSS에서의 반응형 웹 디자인으로 알고 있었는데요.. React.js와 같은 CSR이 등장하게 된 배경은 다양한 화면에 맞게 알맞은 UI를 보여주려고 한다기보다는, 웹 서버로 보내는 요청을 획기적으로 줄여(클라이언트의 브라우저에서 JS를 이용해 직접 index.html에서 필요한 요소(컴포넌트)를 리렌더링하므로) 웹 서버가 SSR 방식으로 설계되었을 때보다 더 적은 부하를 맡게 되고, 클라이언트 입장에서는 부드러운 화면전환을 경험할 수 있게 하기 위함으로 알고 있는데요. CSR 방식 자체가 장치 의존성을 해결할 수 있는 것이라면 그 이유가 무엇인지 궁금합니다!

널널한 개발자 · Answer

네. 그런 의도를 담은 것이 맞습니다. 한 가지 생각해야 할 부분이 여기 '장치'가 화면 해상도만 생각한 것이 아니라 iOS, Android 기반 전용 장치를 생각하시면 좋겠습니다. 화면 크기에 대응하는 문제는 반응형 웹 디자인의 영역이라 하겠으나 강의에서 말한 수준의 장치 의존성은 그 이상의 의미가 있습니다. 모바일 환경 네이티브 앱이 필요해지면서, HTML을 쓰지 않는 클라이언트도 같은 서비스를 받아야 하는 상황이 됐고 결국 서버는 데이터(JSON API)만 제공하고 화면 구성은 각 클라이언트가 책임지는 구조로 분리됐습니다. 이를 가능하게 해준 기술이 React 같은 CSR입니다. CSR 덕에 하나의 백엔드가 웹·iOS·Android 어떤 장치의 클라이언트든 동일하게 서비스할 수 있게 된 것입니다. 그러므로 '장치'를 논함에 있어 화면 해상도만 생각하지 말고 브라우저 및 운영환경까지 고려한 결과라는 점 모두를 '장치 의존성'으로 이해하면 좋을 것 같습니다. 참고하시기 바랍니다. :)