[javascript] 엘리스 sw 트랙 > 인스타그램 클론 코딩 메모

 

자바스크립트 한 주 배우고 바로 인스타그램 클론 코딩하는 거 실화?^^...

자스 공부하는 한 주간 느낀 것은 지난 세 달 동안 내 공부 방향이 약간 틀렸다는 점! 나는 알고리즘만 잘하면 자스 잘하게 되는 줄 알았다. 진짜 코알못이다(반성반성반성). 개발자는 항상 눈과 귀를 열고 찾아보고 알아내야 하는 직업인 것 같다. 그런 직업을 가진 사람들이 체크 남방만 입고 다닌다니?!

 

인스타그램 클론 코딩 수업을 들었는데 처음보는 객체와 메서드들이 많이 나왔다. 현업에서 많이 쓰이지는 않는다고 하고 지금 당장 이해가 뽝! 되지는 않지만 나중에 볼지도 몰라서 일단 메모메모>>

 

FileReader

filereader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 file 혹은 blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해주는 객체. 여기서 blob 객체란 파일류의 불변하는 미가공 데이터라고 한다.

 

filereader의 속성

• .error: 파일을 읽는 도중 발생한 에러
• .readyState: filereader의 상태를 나타내는 숫자. 0_empty, 1_loading, 2_done
• .result: 파일의 컨텐츠

 

filereader의 이벤트 핸들러

• .onbort: abort 이벤트의 핸들러이다. abort는 리소스의 로딩이 중단되었을 때 발생한다. 
• .onerror: error 이벤트의 핸들러.
• .onload: load 이벤트의 핸들러. load는 리소스의 로딩이 완료되었을 때 발생한다.

 

filereader의 메서드

• .abort: 읽기 요청을 중단시킨다.
• .readAsArrayBuffer: 지정된 blob이나 파일의 내용을 읽기 시작한다. result 속성에 파일의 데이터를 직접 얻고 싶을 때.
• .readAsDataURL: (파일 읽기 동일) result 속성에 <data: URL>의 형태로 리턴되어, 다른 태그에서 이 데이터를 사용하고 싶을 때.
• .readAsText: (파일 읽기 동일) 파일의 데이터를 문자열로 읽고 싶을 때.

 

 

 

indexedDB

indexedDB는 브라우저에 저장소를 만드는 방법이다. 기본 사용 패턴은 다음과 같다.

 

1. 데이터베이스를 연다.
2. 객체 저장소(Object store)를 생성한다.
3. 트랜잭션(transaction)을 시작하고, 데이터를 추가하거나 읽어 들이는 등의 작업을 요청한다.
4. 이벤트 리스너를 사용하여 요청이 완료될 때까지 기다린다.
5. 결과를 가지고 원하는 동작을 한다.

 

indexDB 관련 객체와 메서드들을 모두 다루기 어려워 과정만 이해하고 넘어가기로 했다. 추후 데이터 수업이 예정되어 있다고 하니 그때 다시 복습해야겠다. 위의 과정에 대해 공식 문서에 잘 정리되어 있는 거 같다.

MDN_indexedDB사용하기 

javascript.info_indexedDB