갤러리에 저장된 이미지와 앨범을 DB에 넣고 관리

<개요> 

지금까지는 이미지 리스트와 앨범 리스트를 상태변수에만 저장하고 사용했다. 

그래서 앱을 껐다 키면 상태 변수에 저장해놓은 리스트들이 다 날아갔다. 

상태변수에 넣은 값은 앱을 종료할 시 전부 삭제되어 초기화 됨으로, 

앱을 종료해도 삭제되지 않는 DB에 해당 값들을 넣어놓고, 앱을 시작할 때 전처리기를 통해 해당 값들을 불러오는 작업이 필요하다. 

1. 로직

2. 코드리뷰

DB에서 원하는 데이터를 찾는데 필요한 키 값은 따로 관리한다. 

물론 "images", "albums"로 쓸 수도 있지만, 오타 쳐서 setItem을 다른 걸로 해버리는 순간 내가 원하는 데이터가 엉뚱한데 들어가서 못 찾을 수 있다. 해당 경우처럼 객체로 처리하면 호출 시 점 표기법이 원하는 Key 값을 자동완성으로 써주기 때문에, 오타 내는 경우의 수가 줄어들어 훨씬 안전하다. 

앞서 Key 값이 String 형태인 것을 보았다. AsyncStroage에 저장되는 값들은 key, Value 둘 다 String 값이어야 한다. 엑셀에 저장되는 값들이 항상 모두 String인 것을 떠올리자. 

AsyncStroage에 저장된 값의 형태를 콘솔로 찍어보면 다음과 같다. 

해당 배열은 Async_Storage에 "images"란 key값에 대응하는 Value 이다. 여기에 이미지 객체를 하나 저장했고, 그걸 getItem으로 불러와서 콘솔로 찍어보았다.

보면, 객체 전체가 통짜로 "" 처리 된 것이 아니라, 그 안의 Key, Value 하나하나가 String 처리된 것을 볼 수 있다. 이렇게 처리하는 것을 stringify라고 한다. 

AsyncStorage에 setItem으로 넣을 때는 (무슨key에 넣을래?. 넣을 value 값이 뭔데?) 라는 2가지 인자를 충족시켜서 기입해줘야 한다. 

이때 넣는 Value 값은 위와 같이 stringify 형태로 되어있어야 하고, 이렇게 변환해주는 JSON의 함수를 stringify라고 한다. 

JSON은 JavaScriptObjecyNotation의 약자로서 자바스크립트 객체를 표기하는 방법에 관한 라이브러리이다. 

 

우리는 위의 함수들로 pickImage,deleteImage, addAlbum, deleteAlbum을 수정한다. 

해당 4가지 함수는 원래 상태변수 값만 새로운 배열로 초기화 시켜주는 로직이지만, 위의 _setImages 혹은 _setAlbums를 추가함으로서 데이터베이스도 새 배열로 초기화 시켜주는 기능도 할 수 있게 된다. 

위의 코드는 저장고에 저장된 내용을 가져오는 코드이다. 

async와 await에 대한 설명은 3번에서 하겠다. 여기서는 

어떤 변수에 getItem을 통해 특정 key 저장된 데이터 배열을 가져온다. 

근데 해당 데이터 배열은 stringify화 되어 있으니까, 다시 원래 객체 형태로 바꾸는 작업을 진행한다. 

이것이 parse 이다. 

(parse에 stringify된 값 이외의 값을 넣으면 에러가 난다.)

parse가 끝나면 해당 데이터는 완전히 JS에서 쓸 수 있는 형태로 다시 바뀐다. 

 parse가 끝난 데이터 배열로 이미지나 앨범의 상태변수를 최신화 한다. 

3. 새롭게 알게 된 것 

async와 await에 대해 설명하려면 먼저 동기/ 비동기의 뜻에 대해서 알아야 한다. 

(1) 동기/ 비동기 

<참조>

자바스크립트 - 동작 원리 :: 태기의 개발 Blog (tistory.com)

자바스크립트 - 동작 원리

a. 동기

동기란 한번에 한 가지 일만 처리하는 것을 말한다. 

만약 A => B => C로 일을 처리하기로 하였는데, B에서 일이 진전이 없다하더라도, C는 B가 끝날 때까지 무한정으로 기다린다. 

맥도날드 키오스크 앞에 사람들이 길게 늘어선 줄을 생각하면 될 것이다. 어떤 사람이 키오스크 이용이 서툴러 주문이 길어지면, 뒤에 있는 사람들은 주문을 하지 못한 채 기다려야한다. 

 

자바 스크립트는 기본적으로 동기 언어이다. 

 

동기적으로 코드가 실행되는 과정은 다음과 같다. 

 

b. 비동기

비동기란, 하나의 일이 처리되고 있는 와중에 다른 일이 처리되는 것을 말한다. (동시성)

비동기는 코드 실행에 있어서 필수적이다.  웹페이지가 어떤 동작을 실행하는데 시간이 꽤 걸린다고 생각해보자. 그 과정 동안 웹 페이지가 로딩 표시만 뜨고 어떠한 일도 하지 못한다면? 사용자들이 다 떠나갈 것이다. 

어떤 동작을 실행하는 와중에도 웹 페이지 내 다른 이들을 할 수 있게 만들어야 한다. 

 

비동기 함수가 코드 내에 끼어 있을 때 코드가 실행되는 과정은 다음과 같다. 

(2) async , await란? 

async란 keyword는 함수 맨 앞에 붙고, 해당 함수가 비동기 실행이 필요한 부분을 가지고 있다는 표현이다.

await란 async 함수 내에서 비동기적으로 실행되는 부분 앞에 붙이는 keyword 이다. 

await는 뒤에 비동기 실행의 결과를 기다렸다가 해당 실행 결과가 fullfield (성공)이면, 해당 실행의 결과를 return 하는 keyword이다. 

await를 만나면 해당 비동기 실행이 끝날 때 까지 함수 실행이 중단된다. 그리고 await 뒤의 비동기 실행이 끝나서 결과가 반환된 다음에야 함수 실행이 다시 진행된다. 

함수 실행이 중단된 사이에 엔진은 다른 일을 할 수 있다.