QueryString - Semantic URL

Semantic URL

이번에는 Semantic URL이란 것을 알아보자.

일단 검색엔진에서 Semantic URL을 검색하면 위키피디아 글이 검색될 것이다.

이 글을 통해 Semantic URL이 무엇인지 알아보자.

https://ko.wikipedia.org/wiki/%EA%B0%84%ED%8E%B8_URL

Semantic URL 혹은 Pretty URL, Clean URL, fancy URL등 다양한 이름을 가지고 있고 한국어로는 간편 URL이라고 불리는 것 같다.

사용자 친화적, 검색엔진 친화적 URL이라고 하는데 깔끔하지 않은 형식의 URL에 비해 기억하기 쉽고 입력하기가 쉽다는 장점이 있다고 한다.

그 아래에는 예시를 보여주고 있는데 깔끔하지 않은 URL이 기존 방식이고 깔끔 URL이 Semantic URL이다.

확실히 보기에는 Semantic URL형식이 훨씬 가독성이 좋은 것 같다.

그 아래 내려보면 사용 목적이 나오는데 검색 엔진에 최적화하기 위해서 사용한다고 한다. 

동시에 사용성과 접근성도 높아지고 불필요한 부분이 제거되어 URL을 기억하기 쉽다라는 장점이 있다고 한다.

다른 이유로는 웹 프로그램의 서버 사이드 스크립트 파일 이름이 포함되지 않도록 변형할 수 있다고 한다.

 예제 작성

Semantic URL이 무엇이고 어떠한 효과를 가져오는지 알아보았으니 이제 예제를 통해 어떻게 사용하는지를 알아보자.

기존의 URL 방식의 예제를 그대로 이용하여 Semantic URL로 변경할 것이다.

// Semantic URL or Pretty URL 예제
app.get('/topic2/:id', (req, res) => {
    var topics = [
        'JavaScript is ....',
        'Node.js is ....',
        'Express is ....'
    ];
    // path방식으로 들어오는 semantic URL을 사용하는 경우 query속성 대신 params를 사용한다.
    var output = `
        <a href='/topic2/0'>JavaScript</a><br>
        <a href='/topic2/1'>Node.js</a><br>
        <a href='/topic2/2'>Exrpess</a><br>
        ${topics[req.params.id]}
    `;
    res.send(output);
});

바뀐 부분은 다음과 같다.

2번 줄 - 

기존 '/topic'이란 경로로 설정했던 것을 '/topic/:id'로 변경했다. 

라우트 경로에 사용자로부터 어떠한 데이터를 전달받을 것인지 선언해놓는 것이다.

예를 들어 기존 URL 방식은 사용자가 어떠한 데이터든 서버에 전달해도 사용자는 문제없이 웹 페이지를 사용할 수 있게 된다.

하지만 Semantic URL 방식의 경우 서버에서 지정한 데이터만을 사용자가 전달해야하므로 만약 상호 약속되지 않은 데이터를 전달할 경우 사용자는 웹 페이지를 이용할 수가 없게 된다.

위의 경우엔 서버에서 id라는 데이터만을 전달받도록 설정하였다.

그러나 사용자 측에서 id에 해당하는 데이터인 '/1'외에도 '/5'라는 서버에서 판단할 수 없는 데이터를 전달하여 에러를 발생시키는 모습이다.

13번 줄 - 

표현식 "${}"에서 사용하는 속성이 변경되었다.

기존 URL 방식에서는 데이터에 접근하기 위해서 req객체의 query속성을 사용했는데 Semantic URL 방식의 경우 데이터에 접근하기 위해 query속성이 아닌 params속성을 사용해야한다.

 실행

코드를 작성했으니 서버를 실행하고 확인해보자.

"localhost:9000/topic2/0"로 접속하고 메뉴들을 클릭해보자.

Semantic URL의 데이터값이 바뀌며 화면  또한 전환되는 것을 알 수가 있다.

확실히 URL을 보는 직관성에 있어서는 좋아졌다는게 느껴진다.

하지만 Semantic URL을 사용하면서 주의할 점이 있다.

Semantic URL을 사용할 경우 무조건 지정한 데이터를 전달받아야 페이지로 이동시켜주기 때문에 데이터 없이 들어오는 경우 에러를 발생시킨다.

따라서 서버에서 처리할 때 Default 값을 지정해줘야하는 것을 잊지 말자.