[JS] 동적으로 경로 추가하기 (window.location.pathname.includes('/sub/') ? '../' : ''; - 삼항연산자 활용)

| 문제상황

index.html과 sub/subpage.html 은 같은 JS를 공유해서 사용하는 상황.

같은 mp3파일을 JS를 통해 가져와야 하는데,

경로가 달라서 JS가 sub/subpage.html 에서 동작할경우'. ./ '가 추가되어야 함

 

$(document).ready(function () {
    const basePath = window.location.pathname.includes('/sub/') ? '../' : '';

    const audioPaths = {
        Bgm1_Fireplace: basePath + 'bgm/DC_fire.mp3',
        Bgm2_Rain: basePath + 'bgm/DC_rain.mp3',
        Bgm3_MxRedKeyboard: basePath + 'bgm/DC_hesper_Key_asmr.mp3',
    };
}

[방법]
1. basePath 계산: window.location.pathname.includes('/sub/')를 통해 현재 경로가 sub 폴더 안에 있는지 확인합니다.
만약 sub 폴더 안에 있다면, basePath는 '../'로 설정되고, 그렇지 않으면 빈 문자열('')로 설정됩니다.

2. audioPaths의 경로 수정: 각 경로에 basePath를 추가하여, 현재 경로에 따라 올바른 파일 경로가 설정되도록 합니다.
이렇게 하면, index.html에서나 sub 폴더 내의 HTML 파일에서 모두 공통적인 JavaScript 파일을 사용할 수 있습니다.

 

[자세한 설명]

1. window.location.pathname:현재 웹 페이지의 URL 경로를 반환합니다.예를 들어, 웹 페이지가 https://example.com/sub/page.html에 있다면, window.location.pathname은 '/sub/page.html'을 반환합니다.
만약 페이지가 https://example.com/index.html에 있다면, window.location.pathname은 '/index.html'을 반환합니다.

2.includes('/sub/'):이 메서드는 window.location.pathname에서 특정 문자열('/sub/')이 포함되어 있는지를 확인합니다.예를 들어, 경로가 '/sub/page.html'이면 includes('/sub/')는 true를 반환합니다.반면에 경로가 '/index.html'이면 includes('/sub/')는 false를 반환합니다.

3.삼항 연산자 (? :):이 연산자는 조건 ? 참일 때의 값 : 거짓일 때의 값의 형식으로 사용됩니다.이 경우, window.location.pathname.includes('/sub/')가 true이면 '../'를 반환하고, false이면 ''(빈 문자열)을 반환합니다.


4. '../' 또는 '':../: 상위 디렉토리를 나타냅니다. 예를 들어, sub 폴더 내의 HTML 파일에서 /bgm/DC_fire.mp3를 참조하려면 상대 경로로 ../bgm/DC_fire.mp3를 사용해야 합니다.'': 빈 문자열로, 현재 디렉토리에서 파일을 참조할 때 사용됩니다. 예를 들어, index.html과 같은 최상위 디렉토리에서 bgm/DC_fire.mp3 파일을 참조할 때는 경로를 변경할 필요가 없습니다.

 

위와 같이

경로주소가 '/sub'를 가지고 있으면  (.includes) (삼항연산자 사용하여 판별 ? 참이면'../' 추가 : 아니면 빈문자열' ' 추가

즉, basePath를 추가하여 bgm paths를 가져오도록 동적으로 추가할 수 있음!