개발을 하던중 실행환경에 따라 기본적으로 사용할 수 있는 모듈이 있고 제약이 있는 모듈이 있다는것을 인지하게 되었다..
사실 생각해보면 당연한건데 이제서야 인지한 나를 반성하며 (?) 정리해보자!!
내 상황
- webpack config 파일을 수정하던중 target을 electron-renderer로 잡으면 fs,os 모듈 실행이 가능한데 , target을 ['web',' electron-renderer'] 로 함께 잡으면 module not found 라는 오류가 떳다!
- 그 이유는 'fs'나 'os' 같은 Node.js에서만 사용 가능한 모듈은 브라우저(web)에서 직접 사용할 수 없기 때문이다.
따라서 해결방안은 2가지였다.
1. webpack.web.config / webpack.electron-renderer.config.js 파일을 분리해서 각각 다른 설정을 적용하기
2. web을 사용안하기 ^^!!
다행히 web을 사용 안해도 되는 환경이여서 2번으로 해결 했다. (물론 바로 해결된 것은 아니고 다른 문제를 직면하긴했다 .. ^^ global is not defined.... Electron 환경과 Node환경에서의 isolation을 설정해줘서 해결했다.. 😂)
🍔 여기서 궁금한점 .. 왜 Node.js의 몇몇 모듈은 브라우저에서 직접 사용할 수 없을까 ?
1. 브라우저의 보안
브라우저 환경에서 JavaScript가 사용자의 로컬 파일 시스템이나 운영체제같은 시스템 레벨 자원에 직접 접근하는것은 사용자의 시스템에 보안 및 개인 정보 보호 측면에서 중요한 제한사항이다. (생각해보면 당연한것 ..)
2. 웹 생태계 제한사항
브라우저에서 실행되는 JavaScript는 웹 생태계에서 동작하도록 설계되었다. 따라서 브라우저 환경에서는 사용자에게 표시되는 웹 페이지와 관련된 작업에 중점을 두고 있고, 파일 시스템이나 운영 체제와 같은 저수준의 시스템 레벨 작업은 일반적으로 브라우저에서는 허용되지 않는다.
브라우저에서는 주로 DOM과 관련된 API가 사용되고 , Node.js에서는 파일시스템,네트워크 관련 API가 주로 사용된다.
🍟 그럼 사용 가능한 Node모듈은 무엇이 있을까 ?
- util: Node.js의 유틸리티 함수들을 제공하는 모듈
- events: 이 모듈은 이벤트 기반 프로그래밍을 지원
- url: URL 관련 유틸리티 함수들을 제공
- querystring: 쿼리 문자열 파싱 및 생성을 제공하는 모듈
- buffer: 이진 데이터를 다루는데 사용되는 모듈
- http, https, fs (브라우저 버전): 브라우저에서도 사용 가능한 버전이 존재하며, 예를 들어, 브라우저에서는 fetch API를 사용하여 HTTP 요청을 수행 가능
또한 브라우저에서와 Node환경에서 API도 차이가 있는것을 알 수있다.
https://developer.mozilla.org/ko/docs/Web/API
(주로 클라이언트 사이드 WebAPI를 지원)
Web API | MDN
웹 코드를 작성한다면 많은 API를 사용할 수 있습니다. 아래 목록은 웹 앱이나 웹 사이트를 만들 때 사용할 수 있는 모든 인터페이스(객체의 유형)입니다.
developer.mozilla.org
https://nodejs.org/docs/latest/api/
(주로 ECMAScript와 Node 고유의 API 지원)
Index | Node.js v21.4.0 Documentation
nodejs.org
결론적으로 이렇게 차이가 나는 이유는 애초에 브라우저와 Node.js는 존재 목적부터 다르기 때문이다!
추가적으로 위에서 언급했던 global is not defined 오류에 대해서도 간략히 정리해보자면 ,
내가 사용하는 환경은 Electron인데, Electron은 Chromium 브라우저와 Node.js를 결합한 환경이기 때문에, 이러한 차이 때문에 오류가 발생했다. 메인 프로세스와 렌더러 프로세스가 각각 isolation을 유지시키는 것이 좋지만 어쩔수 없는 노드모듈을 사용해야하는 상황이므로 conntextIsolation: false로 설정해두고 window.electron = electronAPI 를 사용해서 전역 객체에 속성을 추가하여서 해결하였다. 이렇게 false로 설정하면 메인 프로세스와 렌더러 프로레스가 동일한 컨텍스트를 공유하게 된다. ( 메인 프로세스는 Node.js 환경이고, 렌더러 프로세스는 Chromium 브라우저 환경을 가짐. )
오늘의 트러블 슈팅을 통해
브라우저와 Node 환경에 대해서 확립할 수 있었고... electron 환경은 더 공부해야할 것 같다.
참고문서
https://www.geeksforgeeks.org/nodejs-vs-browser/
'FE' 카테고리의 다른 글
| [Clean Code] React에서의 클린코드 (0) | 2023.10.10 |
|---|---|
| [Electron] 일렉트론이란? (0) | 2022.11.14 |
| 리액트를 사용해보고 느낀점과 Next.js vs Gatsby 알아보기 (2) | 2022.08.04 |
| [디자인패턴] 아토믹패턴이란? (2) | 2022.07.04 |
| SSR , CSR이 무엇일까 ? (0) | 2022.06.22 |