JavaScript history · 브라우저 감지 완전 정리

 

 

Web Development · JavaScript

JavaScript history · 브라우저 감지

history 객체의 뒤로/앞으로 이동과 navigator 기반 브라우저 확인 코드를 정리합니다.

시작 오늘 분석할 코드

이 예제는 브라우저가 제공하는 BOM 객체를 사용합니다. DOM 요소 조작과 달리 브라우저 창, 방문 기록, 브라우저 종류, 새 창 같은 실행 환경을 다루는 코드입니다.

<button onclick="history.back()">back()</button> <button onclick="history.forward()">forward()</button> <button onclick="history.go(-1)">go(-1)</button> <script> function detectBrowser() {{ let userAgent = navigator.userAgent.toLowerCase(); if (userAgent.indexOf("chrome") != -1 && navigator.vendor.indexOf("Google Inc") != -1) {{ alert("구글 Chrome 브라우저입니다."); }} else {{ alert("구글 Chrome이 아닙니다."); }} }} </script>

history현재 탭의 방문 기록을 다루는 객체입니다.

back()한 단계 뒤로 이동합니다.

forward()한 단계 앞으로 이동합니다.

go()숫자로 이동 단계를 지정합니다.

navigator브라우저 환경 정보를 담습니다.

userAgent브라우저 식별 문자열입니다.

---

1 history 객체의 역할

history는 현재 탭의 방문 기록을 다루는 객체입니다. 사용자가 브라우저의 뒤로/앞으로 버튼을 누르는 것과 비슷한 흐름을 스크립트로 실행합니다.

방문 기록

→

history 메서드

→

뒤로/앞으로 이동

메서드	동작	예시
back()	이전 기록으로 이동	history.back()
forward()	다음 기록으로 이동	history.forward()
go(-1)	한 단계 뒤로 이동	history.go(-1)
go(1)	한 단계 앞으로 이동	history.go(1)

---

2 back과 go(-1)의 관계

history.back()과 history.go(-1)은 결과가 거의 같습니다. 차이는 go가 숫자를 받아 여러 단계 이동도 표현할 수 있다는 점입니다.

back()

한 단계 뒤로 가는 의미가 직접 드러납니다.

go(-1)

숫자 인자에 따라 앞뒤 이동 수를 조절합니다.

학습용 버튼에서는 세 메서드를 나란히 두고 눌러보면 방문 기록의 방향성이 잘 보입니다.

---

3 방문 기록이 없을 때

history 메서드는 방문 기록이 있어야 눈에 보이는 결과가 납니다. 새 탭에서 바로 예제를 열면 뒤로 갈 페이지가 없어 아무 변화가 없어 보일 수 있습니다.

1

다른 페이지 방문먼저 다른 페이지에서 예제 페이지로 이동합니다.

2

back 실행이전 방문 기록으로 돌아가는지 확인합니다.

3

forward 실행다시 예제 페이지로 돌아오는지 확인합니다.

4

go 숫자 변경-2, 1처럼 숫자를 바꿔 이동 범위를 비교합니다.

---

 

반응형

 

4 브라우저 확인 코드

원본의 브라우저 확인 예제는 navigator.userAgent를 소문자로 바꾸고, Chrome 문자열과 vendor 값을 비교합니다.

코드	의미	주의
navigator.userAgent	브라우저 식별 문자열	여러 브라우저가 비슷한 문자열을 가질 수 있습니다.
toLowerCase()	대소문자 차이를 줄임	검색 비교를 단순하게 만듭니다.
indexOf("chrome")	chrome 포함 여부	Edge도 Chrome 계열 문자열을 포함할 수 있습니다.
navigator.vendor	브라우저 공급자 정보	브라우저마다 다르게 나올 수 있습니다.

---

5 userAgent 판별의 한계

원문 메모처럼 Edge는 Chromium 기반이라 Chrome처럼 감지될 수 있습니다. 그래서 브라우저 이름을 맞추는 것보다 필요한 기능을 직접 확인하는 방식이 더 실용적입니다.

브라우저 감지는 통계나 안내 표시에는 쓸 수 있지만, 핵심 기능 분기를 전부 userAgent에 맡기면 유지보수가 어려워집니다.

목적	권장 방식	이유
기능 지원 확인	API 존재 여부 검사	브라우저 이름보다 정확합니다.
통계 표시	userAgent 수집	대략적인 환경 파악에 적합합니다.
스타일 분기	CSS 미디어쿼리	화면 조건에 맞게 동작합니다.
오류 안내	기능 테스트 후 메시지	사용자에게 실제 문제를 알려줍니다.

---

6 BOM과 DOM의 차이

DOM은 문서 안의 태그를 다루고, BOM은 브라우저 창과 환경을 다룹니다. 이 장의 history와 navigator는 대표적인 BOM 객체입니다.

DOM

document, element, innerHTML처럼 페이지 구조를 조작합니다.

BOM

window, history, navigator처럼 브라우저 환경을 다룹니다.

---

7 자주 하는 실수

실수	증상	해결
기록이 없는데 back 테스트	버튼을 눌러도 변화가 없습니다.	이전 페이지에서 예제로 이동한 뒤 테스트합니다.
go 숫자 방향 혼동	예상과 반대로 이동합니다.	음수는 뒤로, 양수는 앞으로라고 외웁니다.
userAgent만 믿음	Edge가 Chrome처럼 감지됩니다.	기능 감지를 우선합니다.
onload alert 남발	페이지 진입마다 알림이 뜹니다.	학습용 외에는 조심해서 씁니다.
BOM과 DOM 혼동	document와 navigator 역할을 섞어 생각합니다.	문서 조작인지 브라우저 환경인지 구분합니다.

---

8 복습 체크리스트

체크	통과 기준
history	방문 기록을 이동시키는 객체임을 설명합니다.
back	한 단계 뒤로 이동하는 메서드임을 압니다.
go	숫자로 이동 방향과 단계를 지정할 수 있습니다.
navigator	브라우저 환경 정보를 담는 객체임을 설명합니다.
userAgent	브라우저 감지에는 한계가 있음을 압니다.
BOM	브라우저 환경 객체와 DOM 조작을 구분합니다.

history와 navigator는 사용자가 보고 있는 문서보다 브라우저 자체의 상태를 다룬다는 공통점이 있습니다.

---

9 직접 바꿔보기

예제 버튼과 감지 코드를 조금씩 바꾸면 객체의 성격이 더 선명해집니다.

A

go(-2) 추가방문 기록이 충분할 때 두 단계 뒤로 이동하는지 확인합니다.

B

console.log 사용alert 대신 userAgent 값을 콘솔에 출력합니다.

C

vendor 비교 제거Chrome 판별 결과가 어떻게 달라지는지 봅니다.

D

기능 감지 추가필요한 API가 있는지 if문으로 확인합니다.

---

10 디버깅 순서

history와 navigator 예제는 코드가 짧아서 오히려 결과가 안 보일 때 원인을 놓치기 쉽습니다. 아래 순서대로 확인하면 문제를 빠르게 좁힐 수 있습니다.

순서	확인	이유
1	콘솔 오류 확인	함수명 오타나 괄호 오류를 먼저 찾습니다.
2	버튼 onclick 확인	클릭이 실제 history 메서드로 연결되는지 봅니다.
3	방문 기록 확인	뒤로 갈 페이지가 없으면 변화가 없습니다.
4	userAgent 출력	감지 조건에 들어가는 실제 문자열을 확인합니다.
5	vendor 출력	Chrome 조건 두 번째 비교값을 확인합니다.
6	다른 브라우저 테스트	같은 조건이 브라우저마다 어떻게 달라지는지 봅니다.

console.log(navigator.userAgent); console.log(navigator.vendor); console.log(history.length);

---

11 기능 감지 예시

브라우저 이름을 맞추는 것보다 필요한 기능이 있는지 보는 방식이 더 오래 갑니다. 예를 들어 특정 API가 있는지 먼저 확인하고, 없을 때 대체 흐름을 제공합니다.

확인 대상	예시 조건	활용
history API	if (window.history)	방문 기록 조작 가능 여부 확인
pushState	if (history.pushState)	SPA 라우팅 지원 확인
navigator	if (window.navigator)	브라우저 정보 접근 확인
online	if ("onLine" in navigator)	온라인 상태 값 존재 확인
language	if (navigator.language)	언어 표시 가능 여부 확인

1

필요 기능 정하기브라우저 이름보다 실제로 필요한 API를 먼저 정합니다.

2

존재 여부 확인if문으로 API가 있는지 확인합니다.

3

대체 흐름 준비지원하지 않을 때 안내 메시지나 기본 동작을 둡니다.

4

브라우저별 테스트Chrome, Edge, 모바일에서 결과를 비교합니다.

---

12 실무 적용 메모

history는 단순 뒤로 가기 버튼에도 쓰이지만, 화면 전환이 많은 웹앱에서는 주소와 화면 상태를 맞추는 데도 사용됩니다. 다만 이 예제는 입문 단계이므로 back, forward, go의 방향성부터 정확히 잡으면 충분합니다.

상황	사용 가능성	메모
뒤로 가기 버튼	높음	사용자 기대와 잘 맞습니다.
강제 이동	주의	사용자가 예상하지 못하면 불편합니다.
브라우저 안내	낮음	가능하면 기능 감지를 사용합니다.
학습용 alert	가능	실무 화면에서는 과하게 쓰지 않습니다.

---

13 테스트 케이스

방문 기록과 브라우저 감지는 환경 영향을 받으므로, 한 번 실행하고 끝내기보다 여러 조건에서 확인하는 편이 좋습니다.

케이스	준비	예상 결과
기록 없음	새 탭에서 바로 열기	back 버튼 변화가 거의 없습니다.
기록 있음	다른 페이지에서 예제로 이동	back 버튼으로 이전 페이지로 갑니다.
앞으로 이동	back 후 forward 클릭	다시 예제 페이지로 돌아옵니다.
Chrome	Chrome에서 열기	Chrome 판별 alert가 뜰 수 있습니다.
Edge	Edge에서 열기	Chrome 계열 문자열 때문에 판별이 애매할 수 있습니다.
모바일	모바일 브라우저에서 열기	userAgent 문자열 형식이 달라집니다.
새로고침	같은 페이지에서 F5	방문 기록 길이와 현재 위치를 다시 확인합니다.
직접 URL 입력	주소창에 예제 주소 입력	이전 기록과 이동 흐름이 달라질 수 있습니다.
콘솔 실행	history.back() 직접 입력	버튼 없이도 같은 메서드가 실행됩니다.
vendor 출력	console.log(navigator.vendor)	감지 조건의 두 번째 값을 확인합니다.
언어 출력	console.log(navigator.language)	navigator의 다른 속성도 같은 방식으로 읽습니다.
온라인 출력	console.log(navigator.onLine)	브라우저 환경 값이 boolean으로 나오는지 봅니다.

결과가 브라우저마다 다르게 보이면 코드가 틀렸다기보다 BOM 객체가 실행 환경의 영향을 받는다고 이해하면 됩니다.

마무리

판단 기준history는 기록 상태, navigator는 브라우저 환경에 따라 결과가 달라집니다.

---

핵심 한 줄 요약

history방문 기록 이동은 history 객체가 담당합니다.

navigator브라우저 정보는 navigator에서 읽습니다.

주의userAgent 판별은 한계가 있어 기능 감지가 더 안정적입니다.

Tags

#JavaScript#history#navigator#userAgent#browser#BOM#back#forward#go#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, history, navigator, userAgent, browser, BOM, back, forward, go, 티스토리