JavaScript: JS 데이터 실습 Ep.2 (storage, OMDb API)

17 Sep 2022 • TIL

Storage

개발자 도구 → Application (console 옆) → Storage → Local, Session Storage → 도메인 주소

  • Local Storage
    Key Value 형태로 데이터 저장한다.
    저장한 데이터는 브라우저 세션 간에 공유한다.
    로컬 스토리지에 저장되는 데이터는 해당하는 도메인 주소에 종속되어 저장이 된다. (즉, 하나의 사이트에 종속이 됨)
    데이터를 따로 지우지 않는 한, 데이터는 만료되지 않는다. (반영구적)

  • Session Storage
    Key Value 형태로 데이터 저장한다.
    페이지의 세션이 끝날때, 즉 페이지를 닫을 때 데이터도 모두 사라진다.

메소드

  • localStorage.setItem
    setItem 메소드를 사용하여 데이터를 저장한다.
    localStorage라는 전역 객체를 사용해서 setItem이라는 메소드 실행한다.
    첫번째 인수는 Key, 두번째 인수는 Value이다. (하나의 데이터!)
    데이터는 되도록 문자 데이터로 저장하는 것이 좋으며, 문자 데이터가 아닐 경우엔 저장이 되지 않을 수도 있다. 
    localStorage.setItem('myCat', 'Tom');
    • 추가! 객체, 배열 데이터를 문자 데이터로 변환하기! (지난 JSON 글 참고)
      객체, 배열 데이터 같은 경우는 JSON 객체의 stringify를 통해서 문자 데이터화 시켜서 데이터를 저장한다. 이렇게 저장된 문자 데이터를 가져와서 JSON 객체의 parse 메소드를 통해서 분석하여 자바스크립트 파일 내에서 하나의 데이터로 활용할 수 있다.
  • localStorage.getItem
    특정한 데이터를 읽어오는 용도로만 사용할때 getItem 메소드를 사용한다.
    getItem은 해당하는 데이터의 속성값 (key값)만 알면 된다.
    인수는 key값 하나만 적으면 해당 메소드를 통해 데이터를 읽어올 수 있다. 
    const cat = localStorage.getItem('myCat');
  • localStorage.removeItem
    원하는 데이터 값을 지울때 사용한다. 
    localStorage.removeItem('myCat');

실습하기

const user = {
	name: 'Soha',
	age: 45,
	emails: [
		'soha@gmail.com',
		'neo@naver.com'
	]
}

localStorage.setItem('user', user)

// local Storage
// Key: User Value: [object Object]

setItem

  • 원하던 value값이 저장되지 않았다.
    문자 데이터로 변환을 해줘야 한다. 
    localStorage.setItem('user', user)
    
// local Storage
// Key: User Value: [object Object]
  • 문자 데이터화 시키기 
    localStorage.setItem('user', JSON.stringify(user))
    
// local Storage
// Key: User 
// Value: {name: 'Soha',age: 45,emails: ['soha@gmail.com','neo@naver.com']}

getItem

  • 로컬스토리지에서 가져오기 
      console.log(localStorage.getItem('user'))
    
// console 창
// {"name": "Soha","age": 45,"emails": ["soha@gmail.com","neo@naver.com"]}
  • 객체 데이터로 변환하기 
      console.log(JSON.parse(localStorage.getItem('user')))
    
// console 창
// {name: 'Soha',age: 45,emails: ['soha@gmail.com','neo@naver.com']}

removeItem

  • 로컬 스토리지의 데이터 지우기 
      localStorage.removeItem('user')
// local Storage
// Key: <공란> Value: <공란>

로컬 스토리지의 데이터 수정하기
로컬 스토리지에 있는 데이터를 수정하기 위해서는 데이터를 가져와서 수정을 한 후, 다시 해당하는 Key의 이름으로 덮어쓰기를 하면 된다.

일단, 로컬 스토리지에서 해당 데이터를 가져와서 변수에 할당해준다.
parse를 통해 객체 데이터로 변환을 한 것을 obj 변수에 할당한다.
해당 객체 데이터의 age 값을 22로 변경한다.
변경한 변수(obj)를 user에 다시 넣어주면! → 저장이 안된다.
obj는 자바스크립트에서 사용하고 있는 하나의 객체 데이터이기 때문에 문자 데이터로 변환을 한 후, 저장을 해야 한다.

  const str = localStorage.getItem('user')
  const obj = JSON.parse(str)
  obj.age = 22
  
  localStorage.setItem('user',JSON.stringify(obj))
  
  // local Storage
  // Key: User 
  // Value: {name: 'Soha',age: 22,emails: ['soha@gmail.com','neo@naver.com']}

OMDb API

Open Movie Database API
OMDb API 링크

Parameters

parameter는 하나의 명령이라고 보면 된다.

Parameter 중 By Search

  • parameter: s required: yes
    parameter가 s일때, s라는 명령이 Required yes이면 필수라는 것이다.
    s라는 명령은 기본적으로 사용을 해야 하는 것이기에 꼭 사용해야 한다.
    s 명령의 기능은 영화의 제목을 검색해주는 것이다.

Usage

Send all data requests to:

http://www.omdbapi.com/?apikey=[yourkey]&

http로 시작하는 omdb 닷컴에 api를 요청할 수 있다.
정보를 요청할 때, 옵션으로 apikey라는 것을 입력해 줘야 한다. (부분에 yourkey)

주소를 온전하게 사용하기 위해서는 query string(?, & 등)을 정확히 알아야 한다.

Query String

Query → 검색
String → 문자 데이터
문자를 가지고서 무언갈 검색한다는 것으로 알면 된다.

주소?속성=값&속성=값&속성=값

  • 첫번째 주소
    요청이 가능한 특정한 주소이다.
    브라우저에서 볼 수 있는 기본적인 웹사이트 혹은 어떤 데이터를 취급하는 웹의 서버 주소 일 수도 있다.
  • ?
    첫번째 주소 뒤의 ? 뒤에 속성과 값의 형태로 특정한 옵션을 작성할 수 있다.
    대표적인 것이 속성으로는 apikey 값은 발급받은 특정한 key값 해당 속성을 통해서 주소에 요청을 날리게 되면 값을 활용해서 사용자를 인증하게 된다.
    위의 사용자 인증뿐만이 아닌, 원하는 영화정보도 가져오고 싶다! 그럴때 &를 사용한다.
  • &
    앞선 ? 뒤의 옵션과 영화정보를 가져오기 위한 옵션 작성을 구분하기 위해서 &를 사용한다.
    원하는 영화 정보를 가져오기 위해서 속성에는 파라미터 s를 입력, 값에는 검색하고 싶은 영화의 제목을 입력한다.

정리
Query String은 특정한 주소로 접근을 할때 해당 페이지의 기본적인 옵션을 명시하는 용도로 사용되는 문자이다. 기본적인 형태(주소?속성=값&속성=값&속성=값)를 잘 알고 있자!

axios

promise라는 자바스크립트에서 사용할 수 있는 특정한 객체이다.
axios는 promise 기반으로 만들어졌으며, 브라우저, node.js 사용할 수 있는 HTTP 요청을 처리해주는 자바스크립트 패키지이다.
axios Github 링크

설치

npm을 통해 axios를 설치하면 된다.
http 요청을 처리할 수 있어야 하기 때문에 개발 의존성(-D)이 아닌 일반 의존성으로 설치해야 한다.

$npm i axios

axios 실습하기

import axios from 'axios'

fuction fetchMovies() {
	axios
		.get('https://www.omdbapi.com/?apikey=[yourkey]&s=frozen')
		.then((response) => {
			console.log(response)
		})  
}
fetchMovies()
  • fetchMovies라는 함수 만들어 준다. 영화들을 가져오는 함수이다.
  • 함수 내에서 axios를 실행한다.
  • 메소드로 get을 사용하는데 get 부분에 omdb 페이지에서 사용했었던 주소를 넣어준다. get 메소드를 설명하자면, axios 패키지를 통해서 해당하는 주소를 get(얻는) 하는 것이다.
  • 뒤에 then 메소드 추가하기 (메소드 체이닝, 체인처럼 연결해서 사용하는 것)
  • get 메소드에서 얻은 것을 then 메소드에서 처리할 것이다.
  • then 안에 익명의 함수를 만들고 인수로는 response를 넣는다. response는 응답이라는 뜻을 가지며 서버(주소)에 요청이 들어가고 나온 결과가 응답이라는 개념으로 반환이 돼서 then이라는 메소드의 콜백 함수 내에서 활용할 수 있다.
  • 하단에 함수를 작성하여 실행한다.
  • npm run dev를 입력하여 개발 서버를 열어 console창에 잘 뜨는지 확인한다.

영화 포스터와 제목 출력하기

<body>
	<h1>Hello World!</h1>
	<img src="" alt="" width="200">
</body>

import axios from 'axios'

fuction fetchMovies() {
	axios
		.get('https://www.omdbapi.com/?apikey=[yourkey]&s=frozen')
		.then(res => {
			console.log(res)
			const h1El = document.querySelector('h1')
			const imgEl = document.querySelector('img')
			h1El.textContent = res.data.Search[0].Title
			imgEl.src = res.data.Search[0].Poster
		})  
}
fetchMovies()
  • 변수를 생성하여 html 파일의 h1과 img태그를 찾아서 변수에 할당한다.
  • 영화의 포스터와 제목이 들어있는 곳을 확인해 보면 data 속성 → Search 속성 안의 배열에 0번째 배열의 Title을 textContent에 할당한다. 그러면 Hello World!가 없어지고 그 자리에 Frozen이 나오게 된다.
  • 영화 포스터 출력또한 제목 출력과 마찬가지이다.

axios 정리

axios 패키지의 도움을 받아서 특정한 주소로 사용자를 인증하고 검색하고 싶은 내용을 정리해서 데이터를 요청한다.
요청된 데이터를 서버에서 처리해서 기본적인 인증과정을 거치고 응답을 하게 된다.
해당 응답을 axios라는 패키지가 내부적으로 처리해서 then이라는 메소드의 콜백 함수에서 처리할 수 있도록 우리가 지정한 res라는 변수에 내용을 담아준다. 이 로직이 axios 패키지 내부에 담아져 있는 것이다.

 TIL  JS

Comments

Related Posts