경로에 ' / ' 슬래시를 생략하면 예상치 못한 에러가 난다

생활코딩으로 공부하던 중 리팩토링 과정에서 리스트 내의 li 태그를 아래와 같이 만들게 되었다

function templateList(filelist) {  var list = "<ul>";
for (let i = 0; i < filelist.length; i++) {
    list += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
} 
list += "</ul>"; 
return list;
}

a 태그의 href 주소로 쿼리로 된 경로를 만들어 주는 코드인데

쿼리 앞에  /  슬래시를 못보고 못쳤더니 create를 누르고 목록을 누르면

새 페이지의 pathname 인 / 가 아닌 이전 페이지의 pathname 인 /create 를 가진채로

쿼리가 붙게 되고 create 폼이 사라지지 않게 되었다

 URL 을 부분별로 해석하면 아래와 같다

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

pathname : / + (임의의 path) !!   슬래시가 꼭 필요하다

포트앞에는 : 가 반드시 필요하고, 쿼리 앞에는 ? 가 반드시 필요하다 마찬가지로 경로앞에는 /를 넣어야 한다

/  슬래시는 url 에서 꼭 필요한 것이고, 조건문을 사용 시 더더욱 경로를 확실히 하지 않으면

문제가 생길 수 있으니 경로에 / 가 빠지지 않도록 조심하자

url 에서 기본적으로 루트로 쓰이는 /는 경로 설정시 항상 적어줘야 문제가 생기지 않는다

/ 는 비처럼 생겼네