과거의 내가 미래의 나에게

Blob 객체를 사용하는 경우가 꽤 되는데 대충 큰 데이터를 다룰 때 쓴다! 정도는 알지만 명확하게 파악하진 못하고 있어서 이번 기회에 학습해본다. Blob이란?Blob은 Binary Large Object의 약자로, 문자 그대도 커다란 바이너리 객체라는 의미이다. blob이라는 영어 단어는 덩어리라는 뜻을 가지고 있기도 해서 텍스트나 정수같이 특정 포맷을 가진 데이터 유형과 달리 덩어리 자체를 저장한다라는 느낌으로도 볼 수 있을 것 같다.과거에는 정수나 텍스트같이 특성이 뚜렷한 데이터만 저장하면 되었지만 이미지, 비디오 등 텍스트로만 처리할 수 없는 크고 다양한 데이터들이 등장하기 시작하였고 이를 처리하기 위해서 Blob 타입이 도입되었다.Blob은 이러한 대용량의 이진 데이터를 웹브라우저나 JS에서 ..

통으로 짜는 코드보다는 모듈화를 통해 쪼개쪼개어 부품을 준비해두고 이를 조립하는 코드는 보기도 편하고 유지보수하기도 편하다. 하지만 코드는 분해되어도 이벤트와 데이터는 공유되어야하기 마련인데, 보통은 컴포넌트끼리 결합시켜서 이를 사용하고 관리하게 된다. 컴포넌트가 이렇게 결합된 형태가 되어버리면 결국 컴포넌트를 쪼갠 의미가 없게 된다.그래서 컴포넌트가 모듈화의 장점을 유지하면서도 이벤트와 데이터는 컴포넌트들이 공유하고 전달할 수 있는 수단이 여러가지가 나오는데 그 중에 오늘 이야기할 것은 상태 관리 라이브러리와 이벤트 버스이다.프로젝트를 하면서 위와 같은 경우가 자주 나오는데, 그 때 그 때 생각나는 것을 사용하는 수준이었다. 그러다 둘의 특징을 명확히하여 구분해서 일관적이게 사용할 수 있으면 좋겠다라는..

오늘은 간단하게 openLayers(이하 ol) 지도를 생성해보고 마무리할 것이다. 사실 투영도 변경하는 작업까지 서술하고 싶었는데 난황이라 아직 정리하고 자시고다ㅠ 좀 더 완벽히 이해한 다음 작성해보겠다.  ol 생성하기quick start를 따라서 생성할 것이다. 14버젼 이상의 node와 git이 필요하다.// 설치npm create ol-app 폴더명// 실행npm start 위와 같이 npm으로 실행하는 것이 가장 간단한 방법이다. ol과 실행할 개발 서버를 설치하고 index.html, main.js, style.css파일이 기본적으로 세팅된다. npm start로 웹 서버를 실행하여 바로 화면에서 볼 수 있다. main.js의 구성import './style.css';import {Map, ..

플랫폼에는 지도가 존재하는데 이 지도 소스가 아주 기깔나다. 그 때 그 때 필요할때마다 쓰다가 어쩔 때는 범용적으로 쓰겠다며 뭔가 엄청 복잡하게 분리해놓았지만 그에 대한 문서는 하나도 없어서 그 누구도 원리를 알 수 없고 또 그 소스 위에다가 당장 기능은 구현해야하니 또 덕지덕지 붙이는 등... 너덜너덜한 지도 컴포넌트가 바로 우리의 것이다. 지도가 내게 있어서 어려운 파트다보니 항상 있는 기능만 어찌어찌 쓰고만 있었는데 이제 더이상 외면 할 수는 없을 것 같아 공부를 시작해보려 한다. 우리는 오픈레이어즈를 기반으로 사용하고 있으며, 오픈레이어즈의 기본 지도인 OSM과 카카오지도를 사용하고 있다. 타일만 외부 지도를 사용하며 기능 구현은 전부 오픈레이어즈를 활용하고 있는 상태이다.본 글은 학습한 것을 정..

오늘부터 본격적으로 테스트코드를 짜보면서 익혀가는 과정을 서술할 것이다. 책에서는 JEST라는 테스트러너를 메인으로 사용하고 필요에 따라 추가로 라이브러리를 이용해 볼 것이다.학습 목차는 함수 단위 테스트-UI컴포넌트 별 단위테스트-UI컴포넌트 통합테스트-시각적회귀테스트-E2E테스트 순으로 진행될 것이고 중간에 스토리북을 통한 UI 컴포넌트 탐색기를 공부할 것 같다.오늘은 함수 단위 테스트를 작성해보면서 JEST의 사용법을 천천히 익혀보자  1. 테스트 작성법과 테스트 그룹 작성 그리고 실행하기 ■ test 함수test 함수는 2개의 인자를 가지는데, 첫 번째는 테스트명을 작성하고 두 번째는 단언문을 작성한다. 검증값이 기댓값과 일치하는지 검증하는 문이다. 일반적으로 디버깅이나 테스트 과정에서 사용된다...