일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 라우터
- Transition
- 렌더링 최적화
- vue-router
- 세션
- 예외처리
- 세션스토리지
- 성능 최적화
- 장고
- frontend
- VUE
- cubic-bezier
- jest
- 자바스크립트 #javascript #렌더링 #렌더링순서
- 뷰
- vue #vue.js #font #web-font
- 주니어 개발자
- vue.js
- webpack
- Router
- css
- 프론트엔드
- virtual dom
- 로컬스토리지
- Django
- lazy loading
- NavigationDuplicated
- DOM
- 안드로이드
- vuetify
- Today
- Total
한준호
사용자 브라우저 알아내기 본문
사이트 메인 화면에서 크롬 권장 팝업을 띄우기 위해 사용자의 브라우저 정보를 알아낼 필요가 있었다.
이미 많은 게시글에서 해당 내용을 다루었고 대부분 user agent를 파싱해서 단순 비교하는 코드였다.
checkBrowser() {
const agent = navigator.userAgent.toUpperCase();
if (agent.indexOf("TRIDENT") >= 0) {
return "IE";
} else if (agent.indexOf("FIREFOX") >= 0) {
return "FIREFOX";
} else if (agent.indexOf("EDG") >= 0) {
return "EDGE";
} else if (agent.indexOf("SAFARI") >= 0) {
return "SAFARI";
} else if (agent.indexOf("CHROME") >= 0) {
return "CHROME";
} else {
return "";
}
},
하지만 막상 agent를 각 브라우저에서 출력한 결과는 다음과 같다
■ chrome
MOZILLA/5.0 (MACINTOSH; INTEL MAC OS X 10_15_7) APPLEWEBKIT/537.36 (KHTML, LIKE GECKO) CHROME/98.0.4758.109 SAFARI/537.36
■ firefox
MOZILLA/5.0 (MACINTOSH; INTEL MAC OS X 10.15; RV:97.0) GECKO/20100101 FIREFOX/97.0
■ safari
MOZILLA/5.0 (MACINTOSH; INTEL MAC OS X 10_15_7) APPLEWEBKIT/605.1.15 (KHTML, LIKE GECKO) VERSION/15.3 SAFARI/605.1.15
■ edge
MOZILLA/5.0 (MACINTOSH; INTEL MAC OS X 10_15_7) APPLEWEBKIT/537.36 (KHTML, LIKE GECKO) CHROME/98.0.4758.102 SAFARI/537.36 EDG/98.0.1108.62
때문에 chrome에서 위 코드를 돌리면 user agent가 safari가 떠버리는 문제가 발생했고 다음과 같이 코드를 수정했다.
checkBrowser() {
const agent = navigator.userAgent.toUpperCase();
console.log(agent);
if (agent.indexOf("TRIDENT") >= 0) {
return "IE";
} else if (agent.indexOf("FIREFOX") >= 0) {
return "FIREFOX";
} else if (agent.indexOf("EDG") >= 0) {
return "EDGE";
} else if (agent.indexOf("SAFARI") >= 0) {
if (agent.indexOf("CHROME") >= 0) {
return "CHROME";
} else {
return "SAFARI";
}
} else {
return "";
}
},
왜 chrome에서 user agent에 safari가 있는것이며 다른 브라우저도 마찬가지로 여러 agent가 혼재 되어있는 것일까?
그 이유는 다른 브라우저의 렌더링 엔진 기술을 공유하기 때문이다.
예를 들어 Google의 Chrome 웹 브라우저는 WebKit을 렌더링 엔진으로 사용하지만 다른 JavaScript 엔진(V8)을 사용한다.
마찬가지로 대부분의 브라우저는 표준 mozilla 렌더링을 따르기 때문에 user agent의 시작 부분에 Mozilla가 있다.
아래 링크를 참고하면 브라우저 역사에 따라 어떤 배경으로 user agent가 이렇게 되었는지 이해할 수 있다.
Why chrome sends all agent names as part of user-agent header
Is there any reason why chrome browser (71 probably earlier version too) sends all browser names as part of its user agent parameter ? This is what i see in the console. Is this expected, Will this
stackoverflow.com
https://humanwhocodes.com/blog/2010/01/12/history-of-the-user-agent-string/
History of the user-agent string - Human Who Codes
A couple of weeks ago, I talked about feature detection and browser detection. That post featured a little bit about user-agent sniffing and the comments continued the trend. I maintain that user-agent sniffing is an important technique to keep in your bac
humanwhocodes.com
'Frontend > Vue js' 카테고리의 다른 글
스타트업 주니어 프론트엔드 개발자의 브라우저 렌더링 최적화2 (0) | 2022.02.28 |
---|---|
자바스크립트 파일 다운로드 (0) | 2022.01.29 |
스타트업 주니어 프론트엔드 개발자의 브라우저 렌더링 최적화 (0) | 2021.10.01 |
Vue lazy loading을 활용한 렌더링 최적화 (0) | 2021.09.17 |
prototype을 이용하여 vue router 예외처리 전역으로 하기 (0) | 2021.09.11 |