[TIL] 9월 29일: 세션, 로컬 스토리지

오늘 하루 있었던 일에 대해서 적어보려고 한다.

한국관광공사 Open Api 사용 중 에러

방금 전까지만 해도 잘 되던 코드가 어느 순간 갑자기 작동이 안 됐다. 기능을 새로 추가해서 그 코드에서 문제가 발생한 건가 싶어서 해당 코드를 만져보고 수정해봤다. 아무리 봐도 잘못된 부분이 없는데 오류가 나는 것 같아
api를 불러온 결과를 print로 출력해보니 응답으로 내려온 api에 에러 메세지가 포함되어 있었다.

LIMITED NUMBER OF SERVICE REQUESTS EXCEEDS ERROR

라는 에러가 떠서 구글에 검색해보았다.

한국관광공사 API 담당 사이트의 Q&A에 내가 원하는 답이 있었다.

개발 계정에서는 오퍼레이션 별 일일 트래픽이 1,000건으로 제한 되어 있습니다.일일트래픽 1,000건이 모두 사용 된 경우 "LIMITED NUMBER OF SERVICE REQUESTS EXCEEDS ERROR" 가 발생합니다. 일일트래픽은 매일 자정에 초기화 됩니다. 개발 공부나 테스트만 하기에 개발계정 1,000건은 적당하다고 보이며 트래픽의 제한이 완화되는 운영 계정은 실제 대중에게 서비스 되는 웹이나 앱에서 api 가 실시간 적용 된 부분을 확인 후 에 승인 처리 되오니 혹시 계획이 있으시다면 개발이 완료 된 후 신청해주시기 바랍니다.

인덱스 페이지에 해당 api가 사용되는데, 다른 기능을 구현하더라도 호출이 되어서 1000번 이상 요청된 것 같다...

일일트래픽이 1000건이라는 것을 알 수 있었기 때문에 앞으로 이를 참고하며 개발할 수 잇을 것 같다.

로컬 스토리지, 세션 스토리지

오늘 한 페이지에 있는 데이터를 다른 페이지로 서버를 거치지 않고 넘기기 위해 방법을 찾던 도중 세션 스토리지라는 것을 발견했다. 개발을 하면서 혹은 개발 관련 이슈들을 살펴 보면서 세션스토리지에 관해 들어봤지만 자세히 알아보진 않았다. 그래서 오늘 검색해보면서 알 수 있었는데 유용한 기능을 발견해서 아주 좋았다. 이걸 이제 사용해보다니...

로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성과 관련이 있다.

로컬 스토리지

로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다.
지속적으로 필요한 데이터(자동 로그인, 장바구니 등)를 저장한다.

• 로컬 스토리지에 저장

localStorage.setItem(키, 값)

• 로컬 스토리지에 저장된 키로 해당 값 조회

localStorage.getItem(키)

• 로컬 스토리지에 저장된 키로 해당 값 삭제

localStorage.removeItem(키)

• 로컬 스토리지 비우기

localStorage.clear()

• 예시

localStorage.setItem('name', 'kj');
localStorage.setItem('age', 25);
localStorage.getItem('name'); // kj
localStorage.getItem('age'); // 25 (문자열)
localStorage.removeItem('age');
localStorage.getItem('age'); // null (삭제됨)
localStorage.clear(); // 전체 삭제

객체는 제대로 저장되지 않고 toString 메소드가 호출된 형태로, 즉 [object 생성자]형으로 저장된다. 객체를 저장하려면 두 가지 방법이 있다. 키-값 형식으로 풀어서 여러 개를 저장할 수 있고, 한 번에 한 객체를 통째로 저장하기 위해 JSON.stringify를 사용한다. 객체 형식 그대로 문자열로 변환하는 방식이다. 받아 올 때는 JSON.parse을 사용한다.

localStorage.setItem('object', { a: 'b' });
localStorage.getItem('object'); // [object Object]

localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object')); // { a: 'b' }

세션 스토리지

세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 삭제된다.
잠깐 동안 필요한 정보(일회성 로그인 정보 등)를 저장한다.
단, 비밀번호처럼 중요한 정보를 저장하게 되면 클라이언트에 저장하는 것이기 때문에 보안에 있어서 위험하다.

세션 스토리지는 window.sessionStorage에 위치한다. 메소드는 로컬 스토리지와 같으므로 위를 참고하면 된다. 단지 로컬 스토리지와 다른 점은 데이터가 영구적으로 보관되지 않는다는 점이다.

로컬 스토리지와 세션 스토리지가 나오기 전에도 브라우저에서 저장소 역할을 하는 게 있었는데 이게 바로 쿠키다. 쿠키는 만료 기한이 있는 키-값 저장소다.

현재 위치 정보 데이터 geolocation api

보안 상에 이슈가 발생할 수 있어 HTTP에서의 geolocation api를 지원 중단했다고 한다.
http:// localhost에서는 작동이 잘 되어서 이것을 배포했을 때도 아무 문제가 없을 것이라고 생각했다.
하지만 테스트 해보기 위해 aws ec2 인스턴스에 올려 실행을 해보았는데 geolocation api가 무용지물이었다. 그래서 HTTPS로 변경하기 위해 SSL 인증서에 대한 정보를 얻을 수 있었다.
SSL 인증서를 발급 받기 위해 유료 버전도 있고, 무료 버전도 있다고 한다. 아직은 무료 버전을 사용해봐도 될 것 같다고 판단이 되어서 내일 SSL 인증서를 발급 받고 진행해보려고 한다!!

더 적고 싶지만 시간이 벌써 새벽 3시가 다 되어 간다.... 내일을 위해 이만 마무리 해야겠다.

아! 그리고 내일은 api key 값(토큰)을 .env 파일로 관리해 외부에 노출을 방지하는 것을 포스팅 하고자 한다.

참고
“Geolocation API - Web API: MDN.” Web API | MDN, https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API.