잡지식창고

Vuex는 한 어플레케이션의 모든 컴포넌트에 대한 중앙 저장소 역할을 한다.

스토어는 애플리케이션의 상태를 저장/관리하는 역할을 수행한다.

Vuex는 신뢰할 수 있는 유일 정보원 패턴을 사용하는 것을 전제로 구현되었고, 여기서 사용되는 유일 정보원이 스토어다.

스토어를 구성하는 개념으로 스테이트(state),  게터(getter), 뮤테이션(mutation), 액션(action)이 있다.

스테이트(state)

스테이트는 애플리케이션의 상태를 저장하는 객체다. 

애플리케이션의 상태를 스테이트에 저장해 유일 정보원으로서의 역할을 수행할 수 있게 한다.

하지만 애플리케이션의 모든 정보를 스테이트에서 관리할 필요는 없다. 컴포넌트 안에서만 사용되는 데이터는 컴포넌트에 두는 것이 적합하다.

스테이트에 저장하는것이 적합한 데이터로는 서버에서 데이터를 받아오는 중인지 나타내는 플래그, 사용자 정보, 여러 컴포넌트에서 사용될 가능성이 있는 데이터들이 있다.

게터(getter)

게터는 스테이트로부터 다른 값을 계산해 얻어낼 때 사용한다.

컴포넌트의 computed와 같은 기능을 한다.

게터는 계산한 값을 캐싱해두고, 이 값은 해당 값을 계산하는데에 쓰인 스테이트가 바뀌지 않는 한 유지된다.

이를 통해 자주 사용되는 계산 로직을 게터로 생성해두면 퍼포먼스를 향상시킬 수 있다.

뮤테이션(mutation)

뮤테이션은 스테이트를 업데이트 할 때 사용된다.

뮤테이션만이 스테이트를 수정할 수 있기 때문에 스테이트의 상태 수정이 발생했을 때 추적이 쉽다.

뮤테이션은 동기 처리만을 담당해야한다. 만약 비동기 처리를 사용하면 스테이트 수정이 어떤 뮤테이션 호출에서 일어났는지 알기 어려워진다.

액션(action)

액션은 바로 이전에 설명한 뮤테이션과 달리 비동기 처리를 담당한다.

액션은 비동기 처리 이외에도 외부 API 통신 수행과 뮤테이션을 호출하기 위해 사용된다.

store.dispatch('액션 함수명', 전달인자) 형태로 사용한다.

액션의 함수들은 비동기처리이기 때문에 주로 콜백함수로 작성된다.

메뉴얼을 전부 읽어보고 직접 실사용된 예를 보는것이 이해에 도움이 될거란 생각이 들어 평소에 자주 들르던 사이트에 들어가보았다.

https://ko.warcraftlogs.com/

이 사이트는 검색된 플레이어의 던전/레이드 로그와 현재 착용중인 아이템, 아이템레벨 등을 표기해주는 사이트이다.

많은 공대장들이 이 사이트를 공대원 모집시 해당 플레이어의 역량을 확인하는데에 사용한다.

해당 기능을 제공하는 사이트는 여러 개 있고, 제공하는 정보에는 조금씩 차이가 있다.

(참고: 플레이어의 점수를 계산하는데에 사용되는 레이드/던전 로그는 blizzard api에서 제공하는 정보가 아닌 외부 프로그램에 의해 기록 및 업로드 된다.)

생각보다 많은 소스들이 Blizzard API에서 가져온것이 아니라 wowhead에서 지원하는 리소스를 사용하고 있었다.

페이지 소스를 한참 읽은 후에야 일부에서 blizzard api를 이용한 곳을 찾을 수 있었다.

1339번 라인의 스크립트는 현재 검색된 캐릭터의 초상화를 가져오는 부분이다.

이 초상화는 profile api에서 가져올 수 있다.

다른 사이트에서 제공하는 오픈 api도 많이 있는것같다... 한번 훑어봐야지

open api를 이용해서 뭔가 만들어보려고 한다.

일단 뭔가를 만드려면 흥미가 붙어야 하니 요즘 내가 플레이하는 중인 와우의 데이터를 받아와 만들어볼 생각에 블리자드 게임의 API를 제공해주는 개발자 페이지를 가보았다.

https://develop.battle.net페이지에서 GET STARTED NOW를 누르면 다음 페이지가 나온다.

내 클라이언트 관리 탭 오른쪽의 create client탭에서 내 클라이언트를 생성한 후, 내 client-id와 client-secret을 발급받는다.

나는 open api를 사용해보는것이 처음이니, 매뉴얼부터 차근차근 읽는다. (한글지원이 안돼서 천천---히 읽을 수 밖에...)

블리자드 battle.net에서 서비스하는 게임들은 모두 글로벌 서비스를 제공하기 때문에 api를 받아올 때 각 국가 코드와 서버명을 알고 있어야 한다.

생각보다 정리가 잘 되어있어서 순서대로 차근차근 따라하면 된다.

위 예제는 'WoW Token'이라는 아이템의 현재 경매장 가격을 요쳥하는 법에 대해 설명되어있다.

 요약하자면

1. 아이템 가격 요청을 보내기 전, 엑세스 토큰을 받아오는 요청을 한다.

2. 엑세스 토큰을 받아왔다면, 아이템 가격 요청을 보낸다.

한번 따라해보자.

postman 프로그램을 이용해서 요청을 보내보자.

key와 value에 각각 위 curl에 적혀있는 대로 넣는다.

client_id : (내가 발급받은 id)
client_secret : (내가 발급받은 secret)
grant_type : curl에 적혀있는 대로 client_credentials

요청을 보내면!

응답이 온다.

access_token이 내가 지금 발급받은 엑세스 토큰이고

token_type은 bearer token

expires_in은 만료 기한이다. 86399는 아마 86399초(하루) 후 만료 된다는 뜻인듯.

첫번째 단계가 완료됐다. 이제 두번째 단계인 아이템 가격 요청을 보내보자.

내가 알고싶은건 'kr'서버의 아이템 가격이기 때문에 요청을 넣을때 us를 모두 kr로 바꿔주면 된다.

type은 토큰을 받아올 때 bearer타입이었으니 맞게 설정해주고, token을 붙여넣어주면 아래와 같이 응답이 온다.

price : 1976810000이면 현재 한국 서버 경매장의 와우 토큰 가격은 197681골드라는 뜻이다.

쿠키(cookie)

쿠키는 클라이언트가 서버에게 자신이 누구인지 알리는 신분증의 역할을 한다.

서버는 요청을 받을 때 이 요청만으로는 누구에게서 왔는지 알 수 없기 때문에 매 요청마다 클라이언트에 대한 정보가 담긴 쿠키를 함께 보낸다. 쿠키는 4kb의 용량 제한이 있다. 그런데, 요청을 보낼 때 마다 쿠키가 함께 전송되는데, 이 안에는 서버가 당장 필요하지 않은 정보도 함께 보내지기 때문에 그만큼의 낭비가 발생하게 된다. 그런 데이터들을 이제 로컬/세션 스토리지에 저장할 수 있게 되었고, 스토리지에 저장된 데이터는 매번 서버로 전송되지 않는다.

로컬 스토리지(local storage)와 세션 스토리지(session storage)

로컬 스토리지와 세션 스토리지는 HTML5부터 추가된 저장소이다. 용량은 기기/브라우저 별로 상이하지만, 모바일은 2.5mb, 데스크탑은 5~10mb정도의 용량을 가진다. 둘 모두 키와 밸류를 저장할 수 있다. 둘의 차이점은 로컬 스토리지는 사용자가 직접 지우지 않는 이상 브라우저에 계속 남아있게 된다. 하지만 세션 스토리지는 인터넷 브라우저의 탭을 닫는 순간 데이터가 삭제된다. 이 특성 때문에 지속적으로 필요한 정보는 로컬 스토리지에, 지속적으로 저장되어서는 안되고 일시적으로만 사용 될 정보는 세션 스토리지에 저장된다.

둘 모두 같은 메소드를 사용하며, 앞에서 설명했듯이 데이터의 유지 여부에 차이가 있다.

사용 예)

fs는 파일 시스템을 조작하는 다양한 메서드를 제공한다. 파일을 생성, 삭제하거나 폴더를 생성, 삭제할 수 있다.

util

util 모듈은 문자열 가공, 객체 형식 확인, 등 각종 편의 기능을 모아둔 모듈이다.

util.deprecate(function, message): 함수가 deprecated 되었음을 알린다. 첫 번째 인자는 해당 함수를, 두 번째 인자에는 경곡 메세지 내용이 들어간다. 함수가 사라지거나 변경될 때 알리는 기능이다.

util.promisify(callback): 콜백 패턴을 프로미스 패턴으로 바꾼다. 바꿀 함수를 인자로 제공하면 된다. 반대로 프로미스를 콜백으로 바꾸는 util.callbackify가 있다.