오늘은 리액트에서 브라우저가 자동실행되지 않도록 설정하는 방법에 관해 알아보겠습니다. 몇 가지 방법을 소개해 드릴 예정입니다.
모두 어려운 내용은 아닌데, 관련 한글 자료가 별로 없어서 가볍게 설명해 드리고자 포스팅하게 되었습니다.
리액트 브라우저 자동실행
리액트로 개발을 진행하다 보면 일반적으로, npm start 또는 yarn start 명령어를 통해 코드를 실행하게 됩니다. 이때, 브라우저가 자동실행되면서, 리액트 개발 서버가 연결된 3000포트를 경로로 열어줍니다.
매번 브라우저가 실행되는 것이 보기 싫어 자동실행을 막고 싶으신 분들이 있을 것 같습니다. 지금부터 방법을 알아보도록 하겠습니다.
create-react-app 환경변수
일반적으로 create-react-app을 통해 리액트 프로젝트를 생성하므로, 여기에서도 create-react-app으로 만들어진 앱이라는 가정하에 설명드리겠습니다.
공식 문서를 잘 살펴보면 create-react-app에서 사용되는 환경변수 내용을 확인하실 수 있습니다.
여러 가지 환경 변수가 있지만, 그중에서 오늘 살펴볼 부분은 BROWSER입니다.
설명을 잘 읽어보면, 기본 상태에서는 시스템 기본 브라우저를 실행한다고 적혀 있습니다. 저 같은 경우는 크롬을 기본 브라우저로 사용 중이므로, 앞서 살펴봤듯이 크롬 브라우저가 실행되었습니다.
특정 브라우저를 사용하기 위해서는 해당 브라우저 명을 명시하면 되고 (관련 문서 참고: https://github.com/sindresorhus/open#app), 브라우저가 실행되지 않도록 하려면 none이라는 값을 설정하면 됩니다.
글로만 읽어서는 알기 어려우니 직접 하나하나 살펴보도록 하겠습니다.
브라우저 자동실행 방지 방법
1. .env 파일 작성
가장 쉬운 방법은 .env 파일을 만들고, BROWSER 환경변수를 NONE으로 설정해주는 것입니다.
아래와 같이 BROWSER=none으로 내용을 작성하고 실행하면, 브라우저 없이 리액트 앱 실행이 가능합니다.
리액트에서 환경변수를 설정할 때는 이름에 REACT_APP_ 을 붙여주어야 한다고 알고 계실 텐데요. 커스텀 환경변수의 경우에는 붙여주는 것이 맞지만, 지금처럼 기본 설정에서 지원하는 환경변수의 경우 그대로 적어주시면 됩니다.
2. cross-env 설치 및 설정
.env 파일을 만들고 설정하는 것이 번거롭다면 명령행에서 BROWSER=none을 설정하여 브라우저 실행을 막을 수도 있습니다.
다만, 명령행에서 환경변수를 설정하는 것은 OS마다 방법이 다르므로, 별도의 npm 모율을 설치해야 합니다. cross-env를 설치해줍시다. (참고: https://www.npmjs.com/package/cross-env)
그리고 아래와 같이 npm start 커맨드에 cross-env를 추가해주면 됩니다.
이제 npm start로 명령어를 실행해도 브라우저가 나타나지 않습니다.
3. OS별 명령행 설정
cross-env를 설치하고 싶지 않다면 OS에 따라 환경변수를 설정해주면 됩니다. 아래 글을 참고하였습니다.
How to disable open browser in CRA?
I've created a React app using create-react-app but whenever I start the dev server (using npm start), it opens up my browser. I want to make it so that it doesn't open my browser whenever I start ...
stackoverflow.com
1) Windows
윈도우즈에서는 set 환경변수명=값 형태로 환경변수 설정이 가능합니다. 따라서 아래와 같이 작성해주시면 됩니다.
2) Linux
리눅스에서는 환경변수명=값 형태로 환경변수 설정이 가능합니다. 따라서 아래와 같이 작성해주시면 됩니다.
위와 같이 OS별로 명령어를 달리하여 환경변수를 설정해줄 수도 있습니다. 다만, 번거로운 부분이 많아 .env 파일을 작성하거나, cross-env를 사용하는 것이 개인적으로는 더 나은 방법이라고 생각합니다.
리액트 브라우저 자동실행 방지 방법에 관해 알아보았습니다. 여러 가지 방법이 있었는데, 모두 어렵지 않아서 자유롭게 편한 방법 선택하여 작업하시면 될 것 같습니다.
직접 조사해서 작성하는 글이다 보니 일부 정확하지 않은 정보가 포함되어 있을 수 있습니다.
궁금한 사항이나 잘못된 내용이 있으면 댓글로 알려주세요~
구독과 좋아요, 환영합니다!
'웹 > React' 카테고리의 다른 글
| [React] 리액트 버전 낮추기(변경/다운그레이드) + 오류 해결 (8) | 2022.05.07 |
|---|