[SeSAC] React - 실행 환경

 

 

React를 어느 환경에서 사용해야 할까요?

 

 

React를 사용할 때, 어느 환경을 선택해야 하는지에 대한 고민 : 

  실습때 npm으로 React를 설치했는데 왜 프론트엔드에서 라이브러리를 추가해서 쓰질 않고 이렇게 하는지 궁금증이 생겼습니다.

 

1. React 설치 가능한 환경

 - React 라이브러리는 브라우저 환경과 Node.js 환경에서 모두 사용 가능합니다.
 - 두 환경에서 React 라이브러리와 JSX 문법을 사용할 수 있습니다.

 

결론: React 코드 자체는 Node.js와 브라우저에서 동일하게 작동하지만, 어느 환경에서 사용할지에 따라 차이점이 있습니다.

 

2. 차이점

 - 모듈 시스템: Node.js는 CommonJS 모듈 시스템을 사용하며, 브라우저에서는 ES6 모듈을 사용하는 것이 일반적입니다. 이로 인해 모듈 가져오기(import) 및 내보내기(export) 구문이 조금 다를 수 있습니다.

 - 패키지 관리: Node.js 환경에서는 npm을 사용하여 패키지를 관리하고, 패키지 의존성을 package.json 파일에 명시할 수 있습니다. 개발 편의성과 의존성 관리에 도움이 됩니다.

 - 번들링: 브라우저 환경에서 React를 사용하려면 번들링 도구(예: 웹팩)를 사용하여 여러 파일을 하나로 묶어야 합니다. 이렇게 번들링하면 브라우저에서 로딩 시간을 절약하고 성능을 향상시킬 수 있지만 번들링 과정이 추가되므로 할일이 많습니다. 그리고 HTML 파일에서 번들링된 JavaScript 파일을 로드해야 합니다. 이를 위해 HTML 파일에 스크립트 태그를 추가해야 합니다.

 - 개발 환경 vs. 프로덕션 환경: 개발 환경에서는 웹팩 디버그 서버와 같은 도구를 사용하여 개발을 편리하게 할 수 있으며, 프로덕션 환경에서는 미리 빌드된 파일을 사용하여 성능을 향상시킬 수 있습니다. (하지만 결국 Nodejs든 브라우저든 환경자체는 성능에는 크게 영향 없고 코드의 품질이 더 중요하다고 합니다.)

 

 

3. 어느 환경에서 React를 설치해야 할까 

 - 개발 편의성을 고려 : Node.js 환경에서 React를 설치하고 사용

    >> Node.js에서 npm을 사용하여 React를 설치하면 package.json 파일에서 패키지 의존성을 쉽게 관리할 수 있음

    >> 브라우저 환경에서 React를 사용하려면 번들링 과정이 필요해서 번거로움

 

 - 그외에는 상황에 맞춰서 

 

4. 마무리

React는 어느 환경에서든 사용 가능하지만, 개발 및 배포 프로세스에 따라 선택해야 한다.

개발 편의성을 고려하여 Node.js 환경에서 설치하고, 프로덕션 환경에서는 최적화된 파일을 사용하여 React 애플리케이션을 제작하는 것이 좋다.