[Rule] 브라우저에서 제공하는 전역 변수를 제한 없이 사용하는 규칙

[giwan-dev]

배경

navigator가 없을 때 navigator에 접근하는 이슈를 보다가 의견을 여쭙고 싶은 점이 생겼습니다.
navigator, window, document 등은 브라우저에서 접근할 수 있는 전역 변수입니다. node에서 접근할 수 없습니다. 만약 next.js가 컴포넌트를 렌더링할 때 해당 변수 접근이 있으면 오류가 발생합니다.

eslint-config-triple에서 navigator, window, document를 허용하고 있습니다. 그리고 env로 "browser"와 "node" 모두를 허용하고 있습니다.

엄밀히 따지면 next.js 프레임워크의 코드는 browser와 node 양쪽 모두 가지는 전역 변수 밖에 접근할 수 없고 특수한 상황에서만 한 쪽 환경의 전역 변수를 사용할 수 있습니다.

• getServerSideProps에서 node 환경의 전역 변수 접근
• useEffect나 이벤트 핸들러 함수에서 browser환경의 전역 변수 접근
• NEXT_PUBLIC_ 접두사가 붙은 process.env

AS-IS: Rule of Standard

브라우저나 node 전용 전역 변수를 제한 없이 사용 가능

TO-BE

개발 과정에서 브라우저나 노드 전용 전역 변수를 사용하는 것을 경고할 만한 방법이 두 가지 정도 있는 것 같습니다.

1. env와 globals 설정을 제거
   typeof variable === 'undefined' 타입 체킹을 하는 인터페이스를 추가해 사용합니다.
   개발자는 전역 변수에 접근하면 no-undef 린트 에러를 보게 되고, 감싸진 인터페이스를 사용하도록 압력을 받게 됩니다.
   장점: 수정 내역이 크지 않음
   단점: 인터페이스를 정의하고 불러와야 함

2. env와 globals를 허용해놓고, 특정 조건 안에서만 사용할 수 있도록 lint rule을 만든다.
   장점: 실제 작동 방식에 최대한 가깝게 코딩할 수 있음
   단점: lint rule을 만들려면 eslint-plugin-triple을 만들어야 함.

---

댓글로 이모지 또는 새로운 의견을 남겨주세요~
ex) - 3️⃣ : 나는 요래조래

• 1️⃣ : 기존안 유지
• 2️⃣ : 1번 안이 좋다
• 3️⃣ : 2번 안이 좋다

[inbeom]

서버사이드 프로젝트에서 쓰면 2번 안이 어떻게 풀릴 수 있을지 궁금하네요. 서버사이드용 Preset이 없었는데 만들면 되려나요 ㅎ

일단 간단해보이는 2️⃣ 가 조금 더 끌리는데, 3️⃣ 의 실행방안이 조금 더 구체적이면 생각이 달라질 수도 있을 것 같습니다 ㅋㅋㅋ