다른 회사로 이직을 하게 되고 업무에 적응해 나가던중 현재 회사에서 신규로 만든 홈페이지에서 사용자가 겪은 에러에 대해 듣게 되었다.
해당 에러는 사용자가 홈페이지에 접속했을때 필요한 목록이 노출되지않는 문제 였는데, 처음에는 해당 문제를 듣고 내가 얼마전에 했던 데이터 이관작업에 문제가 생겼나 싶어 테이블들을 뒤지는 작업부터 시작했었다.
그런데 신규 홈페이지가 크롬, 엣지 등을 기반으로 표준을 잡은 것을 알 수 있었고 해당 사용자에게 확인해보니 인터넷 익스플로러로 접속한 것을 확인할 수 있었다. 그래서 내가 처리한 코드와 그에 대한 설명을 진행해 보려 한다.
최종 코드
당장 처리가 급하다면 해당 코드를 보고 참조하여 처리하여도 좋다.
아래에는 코드에 대한 간단한 설명을 쓸 예정이니 자세히 이해하고 싶다면 같이 보면 좋을것 같다.
//사용자 인터넷 환경 체크
function browserChk() {
const agent = window.navigator.userAgent.toLowerCase(); // 사용자 브라우저 체크
if(agent.indexOf("trident") > -1 ){ //익스플로러 일 경우
browserPass = true; //익스플로러
alert("해당 브라우저는 시스템에서 지원하는 브라우저가 아닙니다. 크롬이나 엣지 환경으로 접속바랍니다.");
//엣지로 홈페이지 연결
location.href = "microsoft-edge:" + location.href;
return;
}
}
위의 최종 코드에는 익스플로러일 경우에만을 예시로 들어 코드를 작성해 놓았다.
그 이유는 한 가지의 예시로 사용방법을 알 수 있고 개발을 하는 사람이라면 한 가지의 블로그 글이 아닌 여러가지의 글을 참조하여 고민 후 내 방식으로 코드에 적용 시키는 것을 추천하고 싶기 때문이다.
- 다른 웹브라우저를 걸러내고 싶다면 구글링을 해보자
이제 코드를 한줄 한줄 분석해보자.
코드분석
▶ 사용자 브라우저 체크
const agent = window.navigator.userAgent.toLowerCase(); // 사용자 브라우저 체크window.navigator.userAgent.toLowerCase();
그냥 가져다가 써도 좋다.
하지만 객체와 함수들을 이해한다면 남들보다 좀 더 나은 개발 경쟁력이 생기지 않을까 싶어 정리한다.
window 객체
- window 객체는 javascript에서는 최상위 객체이다.
- 다양한 함수들을 담은 바구니라고 생각하면 좋을것 같다.
- 내가 자주 사용한 함수는 window.open으로 팝업창을 호출 할 때이다.
- 해당 함수의 자세한 사용법도 여러 글들을 참고하여 내 것으로 만들기를 바란다.
그럼 이제 브라우저 체크에 사용한 각각의 함수를 살펴보자
window.navigator
- 방문자의 브라우저 정보에 대한 것들을 담고있다.
- 위의 사진과 같이 navigator안에는 다양한 옵션을 보여주고 있다.
- 사진의 appCodeName은 'Mozilla' 라는 결과를 보여주고 있는데 브라우저의 코드명을 보여주는 것이다.
그렇다면 여기서 우리는 window.navigator.userAgent.toLowerCase(); 에서
userAgent라는 놈이 navigator의 옵션이라는 것을 눈치챌 수 있다.
우리의 목적은 현재 사용자의 브라우저를 체크하는 것이니까 userAgent라는 놈은
사용자의 브라우저 정보를 반환하겠구나? 라는 것도 생각해볼 수 있다.
그래서 한번 실행해 보았다.
나는 크롬을 쓰고있는데.. 무슨 이상한 정보들이 가득 나온다.
여기서 내가 필요한 정보만 찾으려면 어떻게 해야할까?
내가 필요한건 저 긴 정보들 중에 Chrome이라는 놈만 필요할 것 같다.
그렇다면 그냥 우리는 Chrome이 포함되어있는지 체크해보면 된다.
하지만 우리가 생각하는것과는 다르게 그냥 검색을 하면 원하는 결과를 도출하지 않을 때가 있다.
js에서 == 와 같은 것을 사용할때 타입변환을 자동으로해서 비교가 잘못되거나 하는 경우가 발생한다.
그렇기 때문에 우리는 toLowerCase() 를 사용하여서 모든 문자를 소문자로 통일 시켜줄 것이다.
자 이제 사용자의 브라우저 검색을 위한 준비를 끝냈다.
모든 문자를 소문자로 변환해준 상태의 정보를 우리는 agent라는 변수에 담았다.
const agent = window.navigator.userAgent.toLowerCase();여담이지만 const를 쓰는 이유는 const는 재선언, 재할당을 불가능 하기 때문이다.
자세한 부분이 궁금하면 검색해서 찾아보자.
이제 해당 변수를 활용해서 내가 원하는 브라우저의 정보를 검색해보자
최종코드에서 나는 내 브라우저가 익스플로러인 경우만 걸러내고 싶기 때문에 한가지의 경우의 수만 검색되도록
설정했다는 점을 다시 상기했으면 좋겠다.
최종코드랑 다르게 크롬을 사용하는 유저만 엣지로 전환해주는 홈페이지를 만든다고 치자
그렇다면 어떻게 검색할 수 있을까?
우리는 소문자로 모든 정보를 변환해 놓았고 그 정보안에 chrome이라는 놈이 숨어있다는 점도 알고 있다.
그렇다면 문자열 검색을 통해 해당 정보에 chrome이라는 놈이 있는지 찾으면 되는 것이다.
우리가 여기서 사용할 것은
indexOf 라는 친구이다.
indexOf는 indexOf("chrome") 이라고 선언했을때 특정문자의 위치를 찾아준다.
시작점은 0부터 시작하며 만약 검색시 해당 정보가 없다면 -1을 반환한다.
그렇단말은 우리가 검색했을때 chrome이 있다면 0 이상의 결과값을 반환한다는 뜻이다.
if(agent.indexOf("chrome") > -1){
...
}이렇게 검색을 하면 chrome이 있다면 0이상의 값을 반환 할 것이니 체크가 가능할것 같다.
마지막으로 익스플로러는 엣지로의 전환을 지원해준다.
방법은 매우 간단하다.
현재 내 주소 앞에 microsoft-edge: 를 붙이는 것
location.href = "microsoft-edge:" + location.href;최종코드를 참조하면 해당 방식을 활용한것을 볼 수 있다.
location.href는 현재 접속중인 내 정보를 가지고 있으며, 페이지 이동시에는 아래의 방식을 활용한다.
location.href = "이동할 주소";location.href에 내 정보를 가지고 있다고 하였으니 개발자 도구에 검색을 해보면 아래와 같이 나온다.
요약
그러면 이제 모든 퍼즐이 맞춰졌다고 생각이 들어야한다.
1. location.href는 내 주소를 담고 있다.
2. 내 주소앞에 microsoft-edge: 를 붙이면 edge로 전환이 된다.
3. location.href = "이동할 주소"의 방식에 1, 2번을 대입하면 자동 전환을 가능케 한다.
//사용자 인터넷 환경 체크
function browserChk() {
const agent = window.navigator.userAgent.toLowerCase(); // 사용자 브라우저 체크
if(agent.indexOf("chrome") > -1 ){ //크롬 일 경우
alert("크롬입니다.");
//엣지로 홈페이지 연결
location.href = "microsoft-edge:" + location.href;
return;
}
}크롬일경우 엣지로 전환 최종 코드이다.
해당 방식은 그냥 구글 검색으로 간단하게 복붙해서 쓰면 되는 구조이다.
하지만 이렇게 한번쯤은 자세히 파고 들어간다면 나중에도 쉽게 기억이 나고 내 자신의 것으로 만들 수 있지않을까싶다.