왕진 블로그
반응형
Web Development · JavaScript
JavaScript window.location
select에서 선택한 URL을 읽어 현재 탭을 이동시키는 흐름을 정리합니다.
시작 오늘 분석할 코드
이 예제는 window 객체가 제공하는 브라우저 정보 API를 읽고, 그 값을 화면에 출력하는 흐름을 다룹니다. 값 자체를 외우기보다 어느 객체에 어떤 정보가 들어 있는지를 구분하는 것이 핵심입니다.
<select id="site"> <option value="http://www.naver.com" selected>네이버 <option value="http://www.google.com">구글 <option value="http://www.microsoft.com">마이크로소프트 </select> <button onclick="load()">웹 사이트 접속</button> <script> function load() {{ let select = document.getElementById("site"); window.location = select.options[select.selectedIndex].value; }} </script>
window.location현재 창의 URL 정보를 담고 이동도 담당합니다.
hreflocation 객체의 실제 주소 문자열입니다.
select여러 선택지를 담는 폼 요소입니다.
optionselect 안의 개별 선택 항목입니다.
selectedIndex현재 선택된 option의 번호입니다.
value이동할 URL처럼 실제로 사용할 값입니다.
1 window.location의 역할
window.location은 현재 브라우저 창이 보고 있는 URL 정보를 담는 객체입니다. 문자열을 대입하면 그 주소로 이동합니다.
select 선택
→
value 읽기
→
window.location 대입
원본 코드처럼
window.location = url 형태로 쓰면 현재 탭이 해당 URL로 바뀝니다.2 select에서 선택값 읽기
select.options[select.selectedIndex].value는 현재 선택된 option의 value를 가져오는 방식입니다.
| 코드 | 의미 | 예시 |
|---|---|---|
| select | id가 site인 select 요소 | 사이트 목록 |
| selectedIndex | 현재 선택된 option의 번호 | 0, 1, 2 |
| options[index] | 선택된 option 요소 | 구글 option |
| value | 실제로 이동할 URL | http://www.google.com |
3 location 대입과 href 변경
실무에서는 window.location.href = url처럼 속성을 명시하는 방식도 자주 씁니다. 원본처럼 location에 직접 문자열을 대입해도 이동 동작은 이해할 수 있습니다.
window.location = url
짧고 예제용으로 읽기 쉽습니다.
window.location.href = url
어떤 값을 바꾸는지 더 명확합니다.
외부 사이트로 이동시키는 코드는 사용자가 클릭한 뒤 실행되도록 만드는 것이 좋습니다.
반응형
4 http와 https
원본 예제에는 http:// 주소가 들어 있습니다. 현재 환경에서는 대부분 https:// 주소를 사용하는 편이 안전하고 자연스럽습니다.
| 주소 | 특징 | 권장 |
|---|---|---|
| http:// | 암호화되지 않은 연결 | 학습 예제에서만 확인 |
| https:// | 암호화된 연결 | 실제 링크에 권장 |
| 상대 경로 | 같은 사이트 내부 이동 | 메뉴 이동에 적합 |
| 절대 URL | 다른 사이트 이동 | 외부 링크에 적합 |
5 실행 흐름
1
사용자가 사이트 선택select의 선택 위치가 바뀝니다.
2
버튼 클릭onclick이 load 함수를 실행합니다.
3
URL 추출선택된 option의 value를 읽습니다.
4
페이지 이동window.location에 URL을 대입합니다.
6 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| value가 없는 option | 선택해도 이동할 주소가 없습니다. | option value를 명확히 넣습니다. |
| selectedIndex 오타 | undefined 오류가 납니다. | 대소문자를 확인합니다. |
| 사용자 확인 없이 이동 | 갑자기 페이지가 바뀝니다. | 버튼 클릭 흐름으로 실행합니다. |
| http 주소 사용 | 브라우저가 보안 경고를 낼 수 있습니다. | 가능하면 https를 사용합니다. |
| 새 창 이동과 혼동 | 현재 탭이 바뀌어버립니다. | 새 창은 window.open을 검토합니다. |
7 복습 체크리스트
| 체크 | 통과 기준 |
|---|---|
| location | 문자열 대입으로 현재 탭을 이동시킬 수 있습니다. |
| select | 선택된 option의 value를 읽을 수 있습니다. |
| href | location.href 방식도 설명할 수 있습니다. |
| URL | http와 https 차이를 알고 있습니다. |
| UX | 사용자 클릭 뒤 이동시키는 흐름을 구성합니다. |
이 예제는 단순하지만 메뉴, 검색 결과 이동, 외부 링크 이동 같은 기능의 기본 흐름과 연결됩니다.
8 location 관련 속성 확장
window.location은 단순히 이동시키는 값만 있는 것이 아니라 현재 주소를 여러 조각으로 나누어 보여주는 객체이기도 합니다.
| 속성 | 예시 | 의미 |
|---|---|---|
| href | https://example.com/path?a=1#top | 전체 주소입니다. |
| protocol | https: | 통신 방식입니다. |
| host | example.com | 도메인과 포트입니다. |
| hostname | example.com | 도메인 이름입니다. |
| pathname | /path | 경로 부분입니다. |
| search | ?a=1 | 쿼리 문자열입니다. |
| hash | #top | 문서 안 위치 표시입니다. |
이동만 필요하면 href를 바꾸면 되고, 현재 주소를 분석해야 하면 pathname, search, hash처럼 나뉜 값을 읽으면 됩니다.
9 이동 메서드 구분
location은 문자열 대입 외에도 몇 가지 이동 메서드를 제공합니다. 차이는 브라우저 방문 기록에 남는 방식입니다.
| 방식 | 방문 기록 | 설명 |
|---|---|---|
| location.href = url | 남음 | 가장 일반적인 페이지 이동입니다. |
| location.assign(url) | 남음 | href 대입과 비슷하게 새 주소로 이동합니다. |
| location.replace(url) | 대체 | 현재 기록을 새 주소로 바꿉니다. |
| location.reload() | 현재 페이지 | 현재 문서를 다시 불러옵니다. |
A
뒤로 가기 가능사용자가 이전 페이지로 돌아가야 하면 href나 assign을 씁니다.
B
현재 기록 대체로그인 후 이전 페이지로 돌아가면 안 되는 흐름은 replace를 검토합니다.
C
새로고침현재 페이지 데이터를 다시 받을 때 reload를 사용합니다.
10 예제 개선 방향
원본 예제는 핵심을 보여주기 위해 짧게 작성되어 있습니다. 실제 페이지에서는 선택값 검증, 외부 이동 안내, https 주소 사용을 더하면 안정적입니다.
| 개선 | 이유 | 예시 |
|---|---|---|
| 기본 선택지 추가 | 실수 클릭을 줄입니다. | 사이트를 선택하세요 |
| 빈 값 검사 | 의도 없는 이동을 막습니다. | if (!url) return |
| https 주소 사용 | 보안 경고를 줄입니다. | https://www.google.com |
| 외부 이동 안내 | 사용자 경험을 개선합니다. | 새 사이트로 이동합니다 |
| 내부 이동 구분 | 라우팅 방식이 달라질 수 있습니다. | /posts/1 |
const select = document.getElementById("site"); const url = select.value; if (url) { window.location.href = url; }
11 테스트 포인트
| 테스트 | 확인 내용 |
|---|---|
| 첫 화면 | select에 기본 선택값이 들어 있는지 확인합니다. |
| 네이버 선택 | value에 지정된 주소로 이동하는지 봅니다. |
| 구글 선택 | selectedIndex가 바뀐 뒤 value가 바뀌는지 확인합니다. |
| 뒤로 가기 | href 이동 후 이전 페이지로 돌아갈 수 있는지 봅니다. |
| 빈 값 | 선택값이 없을 때 이동하지 않는지 확인합니다. |
12 직접 바꿔보기
예제를 이해했다면 option을 추가하거나 이동 방식을 바꿔보면 좋습니다. 작은 수정으로도 location의 역할이 더 분명해집니다.
1
사이트 하나 추가option을 하나 더 만들고 value에 이동할 주소를 넣습니다.
2
주소 출력 먼저 하기이동 전에 선택된 value를 alert나 console.log로 확인합니다.
3
href 방식으로 변경window.location 대신 window.location.href에 대입해 봅니다.
4
replace 방식 비교뒤로 가기 동작이 어떻게 달라지는지 확인합니다.
5
상대 경로 테스트외부 주소 대신 ./index.html 같은 내부 경로도 넣어봅니다.
6
해시 이동 테스트#top처럼 문서 안 위치로 이동하는 값도 비교합니다.
| 연습 | 목표 |
|---|---|
| 기본값 비우기 | 사용자가 반드시 사이트를 선택하게 만듭니다. |
| 내부 페이지 이동 | 외부 URL이 아니라 같은 사이트 경로로 이동합니다. |
| 확인창 추가 | confirm 결과가 true일 때만 이동합니다. |
| 잘못된 URL 처리 | 빈 문자열이나 이상한 값이면 return합니다. |
| 콘솔 출력 | 선택된 index와 value를 개발자도구에서 확인합니다. |
| 상대 경로 | 같은 사이트 내부 이동과 외부 이동의 차이를 봅니다. |
| 해시 이동 | 주소 뒤 #값이 바뀌는 동작을 확인합니다. |
| replace 이동 | 방문 기록이 대체되어 뒤로 가기 흐름이 달라지는지 확인합니다. |
| reload | 현재 문서를 다시 불러올 때 필요한 상황을 구분합니다. |
function load() { const select = document.getElementById("site"); const url = select.value; console.log(select.selectedIndex, url); if (!url) return; window.location.href = url; }
핵심 한 줄 요약
window.locationlocation에 URL을 대입하면 현재 탭이 이동합니다.
select선택된 option의 value를 읽어 이동 주소로 사용할 수 있습니다.
주의실제 서비스에서는 https 주소와 사용자 클릭 흐름을 우선합니다.
Tags
#JavaScript#window#location#location.href#select#option#URL#페이지이동#DOM#티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, window, location, location.href, select, option, URL, 페이지이동, DOM, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript history · 브라우저 감지 완전 정리 (0) | 2026.07.06 |
|---|---|
| JavaScript navigator · screen 완전 정리 (0) | 2026.07.06 |
| JavaScript window.print · onbeforeprint 완전 정리 (0) | 2026.07.06 |
| JavaScript 스크롤·위치·크기 — scrollBy·moveBy·resizeBy 완전 정리 (1) | 2026.07.05 |
| JavaScript 타이머 — setInterval · setTimeout 완전 정리 (0) | 2026.07.05 |
댓글