게임 전적검색 사이트 개발 - 3

안녕하세요! 무초입니다. 이번 일지에도 원래는 백엔드로 찾아뵈려고 했으나.. 

 

https://github.com/RiotGames/developer-relations/issues/860

[BUG] Developer Keys Return 403 on all endpoints · Issue #860 · RiotGames/developer-relations

보시다시피 개발자 키를 쓰는 전체에 오류가 발생한 상황이라 오늘은 프런트엔드 작업, React 코드를 작성해 보도록 하겠습니다.

(개발 일지기에 여러 기초 세팅은 넘어갑니다.)

현재는 해결된 상태이며 이 글의 내용은 2023년 12월 8일을 기준으로 함을 말씀드립니다.

 

// SearchPage.js

import {useState} from "react";


function SearchPage() {
    const [search, setSearch] = useState([]);

    const usernameLoaded = (username) => {
        username = username.replace(/[#]/, "-");
        fetch("/api/v1/account/"+ encodeURI(username))
            .then((response) => response.json())
            .then((data) => setSearch(data));
    };

    const nickSearch = (e) => {
        if(e.key === "Enter") usernameLoaded(e.target.value);
    }

    return (
        <div className="App">
            <header className="App-header">
                <input
                    id="playername"
                    name="playername"
                    placeholder="닉네임을 입력해주세요"
                    onKeyPress={nickSearch}
                />
                <ul>
                    {search.id}
                </ul>
            </header>
        </div>
    );
}

export default SearchPage;

 

기존에 구성했었던 코드입니다.

근데 자료를 더 찾아보니 fetch가 아닌 더 좋은 라이브러리인 axios가 존재해 코드를 수정하기로 했습니다.

 

간단히 말하자면 axios는 fetch보다 많은 브라우저를 지원하고, 에러 핸들링이 조금 더 간편하다는 장점이 있습니다.

 

// ...

    const usernameLoaded = (username) => {
    	username = username.replace(/[#]/, "-");
       	let reg = /[`~!@$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gim;
        username = username.replace(reg, "").replace(/[#]/, "-");
        setNick(username);

        const options = {
           url: '/api/v1/account/' + encodeURI(username),
           method:'GET'
        }

        axios(options)
            .then((response) => response.json())
            .then((data) => setSearch(data));
            
    };

// ...

 

그 과정에서 특수문자를 없애주는 정규식을 추가했으며, #을 하이픈(-)으로 바꿔서 서버에 전달해주는 역할을 했습니다.

 

#을 바꿔주는 이유는 이 뒤의 값이 서버로 전달되지 않았기 때문인데,

전달이 안된다는 것은 알고 있었지만 문득 이유가 궁금해져서 자료를 찾아봤습니다.

 

URI 프래그먼트(#)은 리소스 자체의 다른 부분을 가리키는 앵커라고 합니다.

한마디로 페이지 내의 요소를 가리키는 역할을 한다는 것인데,

이 앵커는 꽤 많은 역할을 합니다. 대표적으로 mdn 사이트의 이것!

 

 

같은 사이트 내에서 정보를 쉽게 찾을 수 있는 역할을 해주는 

In this article 을 예시로 들 수 있을 것 같습니다.

 

여기서도 mdn을 사용해 보신 분들이라면 URL이 바뀌는데 왜 사이트는 새로고침이 되지 않는지 궁금하신 분들도 있을 수 있습니다. 이게 URI Pragement, #의 특징입니다.

 

#은 다른 페이지가 아닌 현재 페이지 요소를 찾아주는 역할이기에 URL이 바뀌어도 새로고침이 되지 않고,

history 관리(이전, 다음 페이지)가 가능해져서 좋은 사용자 경험을 제공해 주는 역할을 한다고 합니다.

 

 

이렇게나 좋은 기능이지만, 특징 탓에 독이 됐다는 것이 아이러니하네요.

어쨋든 이러한 이유로 인해서 위의 정규식을 사용했으며, fetch를 axios로 대체한 모습을 볼 수 있습니다.

 

그리고 encodeURI는

제대로 전달되지 않을 수 있는 일본어나 한자 같은 문자를

UTF-8 16진수로 변환하여 값을 보내주는 역할을 합니다.

 

여기까지 정보를 받아오기 위한 기본적인 준비였습니다.

다음 포스팅에서는 유저 이름만으로

유저의 레벨, 프로필 사진 등의 정보를 가져오는 포스팅으로 찾아뵙겠습니다!