[Safari] 애플 사파리에서 웹 사이트 접속 시 흰 화면(feat. 정규식 미 지원 문법) SyntaxError: Invalid regular expression: invalid group specifier name

눈누난나 열심히 웹 개발을 마치고 애플 앱 패키징과 애플 로그인 기능 추가만을 앞두고 있었다.

애플 로그인을 추가하기 위해 Mac으로 사파리에 접속해봤는데 웬걸.... 하얀 화면만이 나를 반겨주었다..^^

 

element를 확인해본 결과 noscript라고만 뜨고 아무런 단서가 없었다...

콘솔에도 아무것도 안보였는데 (사실 콘솔창 하단에 에러 메시지가 떠있었는데, 윈도우는 맨위에 뜨니까 있는지 모르고 확인 못했음..ㅎ) 어떻게 해결해야하나 막막했다.

 

일단 열심히 서칭하고 의심되는 항목들을 수정해보았다.

---

1. SSL 인증서

애플이 유효기간이 13개월 이상인 SSL 인증서를 미지원한다는 얘기가 있었다.

하지만 인증서를 확인해본 결과 3개월 단위로 갱신되는 중이라 나에겐 해당되지 않았음...

 

ㅁ 맥에서 웹사이트 SSL 인증서 확인하는 법 (https 사이트만 가능)

1-1. url 옆에 자물쇠 버튼을 왼쪽 마우스로 누르거나 오른쪽 마우스로 해서 인증서 보기를 한다.

1-2. 인증서 보기 클릭

 

1-3. 해당하는 주소의 인증서를 클릭 후 세부사항을 클릭해서 펼쳐본다.

 

1-4. 아래로 내리다보면 유효기간이 뜬다

말을 복잡하게 해놨는데, 지금 인증서는 21년 12월 20일 ~ 22년 3월 20일까지만 유효하다는 것이다.

 

암튼 나의 경우에는 SSL 문제는 아니였다...

---

2. polyfill 문제

OS가 다양하다보니 내가 쓰는 언어의 문법을 각종 OS에서 지원하지 않는 경우가 많다.

react에서 발생하는 문법 미지원 문제는 대표적으로 fetch함수를 이용하는 것이라고 했다.

 

나는 fetch 대신 axios를 사용하고 있었고, 혹시 몰라서 모듈을 설치해서 적용해 보았으나 아무런 효과를 보지 못하였다.

 

사용한 모듈 >> https://www.npmjs.com/package/react-app-polyfill

---

3. 사파리에서 javaScript 허용

 

가끔 본인의 브라우저 내에 javascript를 비허용 해놓은 경우가 있다. 엥간하면 허용 되어있지만 혹시 모르니 확인해봄ㅋㅋ

 

3-1. 좌측 상단의 사파리 탭을 클릭 후 환경설정에 들어간다. (command 와 ,(쉼표) 동시 클릭해도 실행 가능 )

3-2. 보안 탭의 웹 콘텐츠 > JavaScript 활성화 체크박스를 체크한다.

역시나 나는 되어있었다...

---

4. 개발자 모드 -> 콘솔 확인

ㅎㅎ왜 안뜨나 했더니 아까 말했다시피 mac에선 콘솔메시지가 하단에 뜬다.....

SyntaxError: Invalid regular expression: invalid group specifier name

 

찾아보니까 사파리에서 미지원하는 정규식 문법을 사용했던 것이였다....

스택오버플로우를 참고하면

x(?<=y) x(?<!y)

위와 같은 문법은 사파리에서 지원하지 않는다는 것이였다. 뭔 lookbehind 문법이랬나....

 

자세한 내용은 아래 스택오버플로우 참고하시규

https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group

Works in Chrome, but breaks in Safari: Invalid regular expression: invalid group specifier name /(?<=\/)([^#]+)(?=#*)/

---

해결법 (정규식 문법 변경)

// 숫자 3자리 단위로 , 찍기
export const NumberWithComma = (data) => {
  return String(data).replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
};

위의 코드가 내가 작성한 프로젝트에서 사용한 정규식 문법이다. 중간에 " ?>! " 이런 문법이 쓰인 것을 발견할 수 있다....ㅎㅎ

 

// 참고: https://dantechblog.gatsbyjs.io/posts/til-regex/
export function formatNumber(number) {
  const parts = number.toString().split('.');
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return parts.join('.');
}

 그래서 다른 분 블로그에서 사용한 방법을 그대로 사용하였다. (참고: https://dantechblog.gatsbyjs.io/posts/til-regex/)

 

그랬더니 화면이 정상적으로 떴음..ㅎㅎㅎ

이걸로 3시간은 삽질했는데 너무 허무한 느낌이였다.

 

2n년 간 윈도우만 쓰다보니...에러 잡기가 더 어려웠다. mac도 얼른 적응해야지....

암튼 누군가에게 도움이 되길 바라며 끝!