Node.js와 React의 개념

자바와 비교하는 관점.

 

Node.js란?

Node.js = Javascript 실행 환경 (즉, 백엔드에서 JS를 실행할 수 있도록 해주는 것)

=> java로 따지면? node.js = java의 JVM, Express는 Java의 Spring boot (백엔드 웹 프레임워크)

 

React란?

React = 프론트엔드 라이브러리

=> java로 따지면? React = JSP, Thymeleaf

 

Express(서버)와 React(클라이언트)를 따로 실행하는 이유

Java로 웹 개발할 때 SpringBoot + Thymeleaf를 사용하면 백엔드와 프론트엔드가 같은 서버에서 실행된다.

=> Java 방식

1. 브라우저가 http://localhost:8080/home 요청

2. Spring Boot가 Thymeleaf를 서버에서 렌더링

3. HTML을 브라우저에 보내서 화면 표시

-> 백엔드가 프론트엔드도 함께 담당

-> 백엔드가 직접 HTML을 생성하여 클라이언트에게 줌

 

=> Express + React 방식 (서버와 클라이언트 분리)

React를 사용하면 백엔드와 프론트엔드가 완전히 분리됨.

1. 브라우저가 http:/localhost:3000/ 요청

2. React에서 화면을 렌더링

3. React가 필요할 때만 Express API 요청

4. Express가 JSON 데이터를 응답하면 React가 화면에 표시

-> 프론트엔드와 백엔드가 별도의 서버에서 동작

-> 프론트엔드는 React가 클라이언트에서 HTML을 조작

-> 백엔드는 Express가 API만 제공

 

Express와 React를 같이 실행해야 하는 이유

둘이 포트가 다르면 어떻게 연결할까?

현재 React(http://localhost:3000)와 Express(http://localhost:5000)가 다른 포트에서 실행되는데,

React에서 Express 서버에 API 요청을 보내도록 하면 연결됨

fetch("http://localhost:5000/api/data")
  .then(response => response.json())
  .then(data => console.log(data));

이렇게 하면 React가 Express 서버의 데이터를 가져와서 사용할 수 있음.

 

왜 React와 Express를 분리할까?

Java에서는 Thymeleaf(프론트엔드)와 백엔드(Spring)을 같은 서버에서 실행하지만, React는 완전히 독립적인 프론트엔드 기술이기 때문에 서버와 분리하는 게 더 좋음

 

장점: 확장성, 빠른 로딩, 유연성, 팀 협업

 

 

더 찾아봐야 할 것

✅ spring 과 springboot 차이점 : 단순히 springboot가 spring의 발전된 프레임 워크인 줄 알았음.

✅ 클라이언트와 서버에서 혼동이 오는 것 같음.