아래는 챗gpt에 질문하고 얻은 대답을 기록한 글입니다.
(아래 링크에 직접 구현해보고 비교해본 글이 있으니 확인.)
https://elecch.tistory.com/571
React의 상태관리(데이터 변경)[csr ,ssr 코드 비교를 통한 이해]
결론. csr [ 클라이언트에서 부모 컴포넌트가 상태관리(db관리) / 바뀌는상태 값만 관리 대상이고, html 요소 즉 jsx 들은 안바뀌고 가상돔이 차이나는 상태만 새로 렌더링] ssr[ 서버에서 db관리 , db값
elecch.tistory.com
나의 질문
지금 내가 공부하면서 느낀게 node.js에서 필요해서 react가 나온것 같은데..
이렇게 느낀이유가 기존에 ssr로 화면딴을 구성하다가 뭔가 html에 js를 끼워넣기가 모종의 이유로 좀 그래서 react를 만들어서 csr을 사용하는 것 같은데...
내 추측에 대한 js 프레임워크의 전반적인 개발사를 알려주고 내 의문이 타당한 것인지 뭐가 옳고 그른지 알려주면 좋을 것 같네
Node.js와 React는 서로 다른 문제를 해결하기 위해 개발된 기술들입니다. 그들의 개발 역사와 목적을 이해하면 이 기술들이 왜 그리고 어떻게 널리 채택되었는지 이해하는 데 도움이 됩니다.
Node.js
Node.js는 2009년 Ryan Dahl에 의해 개발되었습니다. 주요 목표는 비동기, 이벤트 주도 방식을 사용하여 더 효율적인 서버를 만드는 것이었습니다. 이는 서버가 동시에 많은 연결을 처리할 수 있도록 하여 I/O 중심의 작업에 유용합니다. Node.js는 JavaScript를 서버 사이드에서 실행할 수 있게 함으로써, 전통적으로 브라우저에서만 실행되던 JavaScript의 영역을 확장시켰습니다.
React
React는 2013년 페이스북의 소프트웨어 엔지니어 Jordan Walke에 의해 개발되었습니다. React가 나오게 된 주된 이유는 대규모 어플리케이션의 UI를 효율적으로 구축하고 관리하기 위해서였습니다. React는 컴포넌트 기반 아키텍처를 사용하여, 개발자가 재사용 가능한 UI 조각들을 만들 수 있게 해줍니다. 이는 대규모 어플리케이션의 복잡성을 줄이고, 개발 속도를 높이며, 유지보수를 용이하게 합니다.
SSR과 CSR의 관계
전통적인 SSR(Server-Side Rendering) 방식은 서버에서 전체 페이지의 HTML을 생성하여 브라우저로 전송합니다. 이 방식은 SEO에 유리하고 초기 로딩 속도가 빠르지만, 페이지의 상호작용이 많아질수록 서버의 부하가 증가하고 사용자 경험이 저하될 수 있습니다.
반면, CSR(Client-Side Rendering) 방식은 브라우저가 서버로부터 데이터만 받고, 페이지의 렌더링은 클라이언트 측에서 수행합니다. 이 방식은 동적인 상호작용이 많은 싱글 페이지 어플리케이션(SPA)에 적합합니다. React와 같은 라이브러리/프레임워크는 CSR을 사용하여 빠르고 반응적인 사용자 경험을 제공합니다.
React는 Node.js와 같은 서버 사이드 플랫폼이 필요해서 만들어진 것이 아니라, 웹 어플리케이션의 사용자 인터페이스를 더 효율적으로 구축하기 위해 만들어졌습니다. 실제로, React는 Node.js 없이도 사용될 수 있으며, 다양한 백엔드 기술과 함께 사용할 수 있습니다.
Node.js와 React 둘 다 자바스크립트 생태계의 발전에 중요한 역할을 했으며, 현재 웹 개발의 주요 트렌드 중 하나입니다. 그러나 이들은 서로 다른 문제를 해결하며 서로 독립적으로 혹은 함께 사용될 수 있습니다.
귀하의 추측이 부분적으로 타당한 측면이 있습니다. 브라우저에서 JavaScript를 사용하여 동적인 UI를 구현하는 것은 복잡할 수 있으며, 이러한 복잡성을 관리하기 위해 React와 같은 라이브러리가 개발되었습니다. 하지만 React는 CSR에 국한되지 않고, 서버 사이드에서도 렌더링할 수 있는 기능을 제공합니다(예: Next.js). 이는 SSR과 CSR의 장점을 결합하여 SEO와 초기 로딩 성능을 향상시키는 서버 사이드 렌더링을 가능하게 합니다.
따라서 귀하의 의문은 웹 개발의 다양한 측면을 감안할 때 타당하며, 현대 웹 개발에서 다루어야 할 다양한 고려사항을 반영하고 있습니다.
그러니까 둘은 크게는 상관은 없는데 react의 ssr 측면을 보완하고자 next.js가 나온거네?
'🪢node > node 이론 정리' 카테고리의 다른 글
| nodemon을 통해 서버 변경사항 바로 적용가능 (0) | 2024.02.20 |
|---|---|
| bodyParser 정리하기 (0) | 2023.11.01 |
| express.js (get, post, nunjuck 이해해보기) (0) | 2023.10.30 |
| 라우팅(Routing) (0) | 2023.10.30 |
| request (0) | 2023.10.27 |