reactjs 와 nodejs 관계

nodejs와 npm 특정버전 설치

 

이전버전 삭제 https://forums.linuxmint.com/viewtopic.php?f=120&t=389621 

sudo dpkg --configure -a
sudo apt purge nodejs nodejs-doc

nodejs

sudo apt-get install curl

curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -

sudo apt-get install -y nodejs     or   apt install nodejs

 

npm

 

https://okky.kr/articles/577576

 

nodejs 와 reactjs의 관계가 궁금합니다.

 

둘다 자바스크립트코드로 작성하는걸로 알고 있는데

각자 사용한 코드를 서로 호환가능한건지

뭐가 다른건지 궁금합니다..

nodejs는 그냥 서버를 위한 프레임워크로 알고 있는데

reactjs도 서버를 위한 프레임워크같은데 뭐가 다른거죠?

 

---

node는 플랫폼이고 react는 프레임워크 입니다.

react는 프론트엔드 프레임워크중 하나로써 DOM을 다루는게 주 목적입니다.

 

node도 어차피 자바스크립트 엔진이기에 react 코드를 해석할 순 있지만.. 조작할 DOM이 없기에 딱히 사용할 일이 없죠.

 

가끔 팬텀js와 연동해서 테스트할때 새용하는거 같긴 합니다.

 

주로 Express 프레임워크로 WAS를 만들고 React로 View 로직을 구현해서 연동시키죠.

 

---

그렇군요 그럼 nodejs에서 html을 jade템플릿처럼 특정 템플릿으로 가져다 쓰는것과

reactjs코드를 둘다 가져다가 페이지마다 사용가능한가요?

---

웹 페이지를 구동하는 방식에 대한 이해가 선행되어야 할것 같습니다.

 

react는 자바스크립트로 만든 프론트엔드 프레임워크고 목적은 DOM 조작입니다.

 

node.js는 구글에서 만든 V8 자바스크립트 엔진을 활용한 플랫폼입니다.

브라우저처럼 HTML, CSS 같은 정작자원은 인식하지 못하고 오직 자바스크립트만 해석합니다. 

 

웹서비스를 하기 위해서는 WAS라는게 필요합니다

웹 어플리케이션 서버의 약자로써 Java의 스프링, 파이썬의 Django, 노드의 Express 같은게 대표적입니다. (정확히는 위 프레임워크를 구동하여 CGI를 처리하는 서버를 의미하지만.. 우선 넘어가겠습니다)

고객이 웹페이지에 접속하면 WAS에서 먼저 HTML을 건네줍니다.

브라우저에서는 HTML을 보고선 어떤 js와 css 파일이 필요한지 파악한다음에 다시 WAS에게

js와 css, 이미지 등을 달라고 요청합니다.

이 많은 정적자원중에 react 코드가 있고, react는 어떤 데이터가 오면 HTML의 어떤 부분을 바꿀것인지에 대한 행위가 구현되어 있습니다.

고객정보가 오면 "어서오세요 xxx님"  팝업을 띄워준다던가 하는 코드가 구현되어 있죠.

 

결론적으로 리액트 view 코드는 서버가 가지고 있습니다

WAS에서 모든 자원을 다 가지고 있는거죠.

브라우저는 단순히 서버에서 html, js, css를 받아서 렌더링해주는 역할만 합니다.

 

node와 react를 연동한다는 말은 

node 플랫폼에서 구동되는 WAS를 구현하고 view 관련 로직은 react를 사용해서 구현한다는 말입니다.

 

호환에 대한 부분은 전혀 별개의 문제입니다.

 

클라이언트에서 서버에 데이터를 요청할 때 어떤 타입으로 달라는 것을 명시하게 되있습니다

HTTP Protocol의 Accept 헤더에 정의하게 되어있죠.

요즘 추세는 JSON으로서 대부분 JSON 타입으로 데이터를 주고 받습니다.

 

예전에는 XML이었죠.

그래서 AJAX란 약자의 X가 XML입니다.

요즘은 AJAJ..라고 부르는게 맞겠네요...

 

이 타입만 맞춰서 데이터 통신하면 됩니다.

JSON 타입으로 데이터를 주고받으면 JSON Serialize를 사용하면 되고

XMS 타입으로 데이터를 주고받으면 XMS Serialize를 사용하면 됩니다.

 

극단적으로 C로 구현한 웹서버에서도 react 연동이 가능합니다.

(C는 텍스트 처리가 극악이라 텍스트 처리가 대부분인 웹에서는 잘 안쓰죠)

---

정말 친절한 설명 감사합니다. was가 웹 애플리케이션 서버 였군요

저는 현재 로컬로만 서버를 사용하고 있습니다.

nodejs 에서 express을 사용하여 (이게 was를 사용하는 거였군요) html코드를 jade템플릿으로 변환하여 웹 페이지를 만들고 있었습니다.

그런데 이번에 반응형 웹때문에 reactjs를 사용하게 됬습니다. 

기존에는 express를 사용하고 html코드를 jade로 변환해서 js코드에서 불러와서 사용했는데

 

님이 말씀해주신 내용은 클라이언트에서 데이터 타입을 달라고 할때 어느 타입으로 데이터를 달라고 얘기하게 되있다고 하셨는데

결국 둘다 javascript 코드인데 

그러면 nodejs 에서 reactjs의 js 코드를 불러오는게 아니라

reactjs 에서 nodejs에 있는 코드를 view로직(아직 리엑트js를 공부안해서 모르겠지만..) 으로 불러 오는건가요?

---

네 맞습니다.

react (정확히는 react 자바스크립트 코드를 해석하고있는 클라이언트 브라우저)에서 Express 서버쪽으로 데이터를 달라고 요청합니다.

예를들면 raek이란 고객의 최근 접속정보를 달라고 요청하는데, 응답은 json 타입으로 달라고 하는거죠.

그러면 서버에서 아래처럼 응답을 줍니다.

{
  "user_id": "reak",
  "phone": "000-000-0000"
}

그냥 텍스트에 불과합니다.

단지 이게 어떤 포맷으로 작성된 텍스트다 라고 정보를 추가해줄 뿐이죠.

 

그럼 브라우저는 이 데이터를 받아서 리엑트 데이터 전송요청 객체에 넘겨주고 리엑트에서는 이 데이터를 DOM에 반영하게 되죠.

 

사실 view를 불러오는건 아니고 controller를 요청하는것입니다만.. 이런 상세한 부분을 짚고 넘어가면 혼란을 가중할거 같아 상세한 설명이나 용어표현은 제외하였습니다.

 

---

https://soonysoon.tistory.com/m/88

react Build 및 실행하기

 

https://ganzicoder.tistory.com/m/109