박스여우 - BoxFox

해당 글은 github goldbergyoni 님의 javascript-testing-best-practices 를 번역하여 작성한 글 입니다. 번역 과정중 오류가 있을 수 있으니 댓글을 통해 피드백 주시면 감사하겠습니다. 들어가며 우리는 평소에 소프트웨어 구현만을 위한 코드(Production code)만을 신경쓰고 있습니다. 따라서 기존에 익숙하지 않은 테스트 코드를 작성하는 대에 어려움과 거부감을 느끼게 되고 많은 분들이 포기하게 됩니다. 하지만 익숙하지 않음에도 불구하고 테스트 코드에 대한 작은 투자는 큰 가치를 얻을 수 있습니다. 하지만 과한 테스트보다는 필요한 만큼만 테스트하고, 빠른 테스트를 유지하기 위해 노력해야 합니다. 때로는 민첩성과 단순성을 위해 테스트를 포기하고 신뢰성을 낮추는게 더..

해당 포스트는 Puppeteer 에 대해 학습하기 위해 puppeteer 의 영어 문서를 토대로 부가적인 설명과 간단한 puppeteer의 사용 방법을 소개합니다. Puppeteer Puppeteer는 DevTools Protocol을 통해 Chrome 또는 Chromium을 제어하기 위한 API를 제공하는 node.js 라이브러리 입니다. 다양한 기능이 있지만 가장 큰 특징은 Headless로 실행될 수 있다는 점 입니다. puppeteer 문서에서 소개되는 대표적인 기능들은 아래와 같습니다. 1. SPA(Single-Page Application)를 크롤링하고 미리 렌더링된 컨텐츠 (SSR - Server Side Rendering)를 생성 할 수 있습니다. 2. 최신 자동 테스트 환경을 만듭니다. ..

rx를 사용하며 개발을 하면서 필요한 웬만한 기능들은 rx의 operator로 제공되고 있습니다. 따라서 이 operator 들만 잘 숙지하고 있으면 rx를 사용하며 기능이 부족하다 느끼는 경우는 거의 없을거라 생각합니다. 이번 포스팅에서는 수 많은 rxjs의 operator 중 가장 헷갈리는 map, flatMap, switchMap, concatMap, mergeMap에 대해 정리해보도록 하겠습니다. map map operator는 js의 array나 Java의 Stream과 같은 API를 사용해 보셨다면 이미 알고 있을거라 생각됩니다. map operator는 다른 API들과 동일하게 발생하는 요소들을 다른 값으로 변환해 줍니다. map operator는 아래 예제와 같이 발생하는 값을 다른 값으로..

블록체인을 공부하며 문뜩 든 생각이 있었습니다. 분산컴퓨팅을 활용해 지갑의 주소로부터 privateKey를 얻어올 수 있는가 라는 의문이 들었습니다. 만약 private key를 브루트포싱으로 얻을 수 있다면 몇년간 거래가 없었던(누군가 잃어버린) 주소의 코인을 해변가에서 금속 동전을 찾듯이 회수할 수 있지 않을까 라는 궁금증이 생겼습니다. 지갑 주소의 생성 과정 우선 방법에 대해 알아보기전에 이더리움 주소의 생성 과정에 대해 알아보도록 하겠습니다. 우선 이더리움 주소의 생성과정은 간단하게 privateKey -> public key -> address 순으로 생성됩니다. privateKey 는 HEX 값으로 구성된 64자리의 랜덤값으로 생성한 뒤에 타원곡선 암호화 알고리즘(ECDSA)으로 private..

안녕하세요 박스여우입니다. 최근 블록체인 송금 관련 토이프로젝트를 진행하던중 블록체인에 대한 기본 지식없이 진행하기에 어려움을 느껴 이더리움, 블록체인에 대해 조금씩 더 공부해보려고 합니다. 오늘 소개해드릴 내용은 nonce에 대한 이야기 입니다. nonce - 각 어카운트의 트랜젝션 수 카운터 nonce는 트랜젝션의 수를 카운트 하는 숫자 입니다. 트랜젝션이 발생할 때 마다 nonce의 값은 증가하게 되며 여러 트랜젝션이 같은 nonce값을 가지지 못합니다. 쉽게 말해 database에서 auto increment index라고 생각하면 됩니다. 이더리움 네트워크를 구성하는 노드는 이 nonce 값에 따라 트랜젝션을 순서대로 처리합니다. 예를 들어 하나의 어카운트에서 두개의 트랜젝션을 전송했다고 했을 ..

React를 처음 배우기 시작할때는 React의 State 관리 도구가 Redux뿐인줄 알고 있었습니다. 그래서 reducer와 action 정의 등 번거로운 redux가 당연한 줄 알고 사용하고 있었습니다. 하지만 mobx라는 다른 state 관리 도구가 있다는 사실을 알게되었고 이 역시 사용해보면서 두 도구의 장단점과 써보면서 느낀점들을 정리해보고자 합니다. ■ Reduxredux의 컨셉은 flux로부터 시작되었습니다. 기존에 UI와 데이터를 관리하기 위해 많이 사용됐던 MVC 패턴은 View와 모델이 많아질수록 구조와 데이터의 흐름이 복잡해져서 추적하기가 어려워진다는 문제점이 있었습니다. 이러한 문제를 해결하기 위해 페이스북에서 Flux 아키텍처를 고안하였습니다. MVC의 데이터흐름 Flux의 구조..

2017년에 암호화폐에 관심이 생겨서 막 투자를 해보기 시작했다. 한창 상승장일때는 당연히 어느정도 수익을 봤지만 거품이 가라않는 시기인 2018년에는 나 역시도 많은 손해를 보게 되었다. 가장 큰 원인이 암호화폐에 대한 믿음을 가지고있었기 때문이다. 아직까지도 그때 사두었던 암호화폐들을 팔지 않은 상태이다... 처음에는 아무것도 모르고 그저 투자만 하다 암호화폐, 블록체인에 관심을 가지고 공부를 하기 시작했다. 블록체인이 무엇이고, 특징이 어떻고 원리가 어떤지에 대해 블록체인을 전공한 대학생 형 누나들에게 논문과 자료와 도움들을 받아가며 공부를 했었다. 하지만 단순히 공부만 하는것에는 흥미가 잘 붙지 않는 필자는 블록체인 시장에 있어서 필자가 기여할 수 있는게 무엇인지 찾아보기 시작했다. 달 토지를 판..

■ Introducing the Web Share API안드로이드용 Chrome 61에서 웹 사이트에서 호스트 플랫폼의 기본 공유 기능을 호출 할 수있게 해주는 navigator.share() 메소드가 출시되었습니다. 해당 메소드는 Web Share API의 일부이며 공유 할 URL이나 텍스트를 전달하여 기본 Android 공유 Dialog를 쉽게 사용할 수 있습니다. Web Share API는 Promise 기반 단일 메소드입니다. share 메소드 호출시에 공유할 데이터의 속성은 title, text, url등이 있으며 text, url 두 속성중중 하나 이상을 필수로 넣어주어야 합니다. 123456789if (navigator.share) { navigator.share({ title: 'Web F..

React를 처음으로 배우게 만들었고 지금까지도 진행중인 CC-Show라는 프로젝트를 진행하면서 좀더 코드를 고도화 시킬 수 있는 방법은 없을까 하고 여러 오픈소스들을 많이 찾아보았다. React-Router이 Plain Router를 사용하려다 보니 require.ensure라는 함수를 통해 라우터에 컴포넌트를 넘겨주는 코드를 보았다. 처음보는 코드라 찾아봤는데 꽤 재미있는 내용이 나왔다. ■ Single Page ApplicationSingle Page Application - SPA는 말 그대로 페이지가 하나인 웹사이트이다. Single Page Application이면 진짜 페이지가 한개인가? 라는 생각이 들 것이다. 대부분의 어플리케이션의 경우 페이지 하나로는 절대적으로 구현을 못하는것이 대부분..

■ GDG Daejeon - DevFest 2018대전에서 GDG Daejeon DevFest 2018이 진행되었다. 행사를 진행하면서도 각각의 세션내용에 관심을 가지고 나도 무언가를 배워가고자 열심히 필기를 했다. 가장 와 닿았던 세션들은 조은님의 Progressive Web Apps와 장인수님의 Flutter 세션이였다. Flutter는 최근에 React Native를 새롭게 시작해서 경쟁 플랫폼인 Flutter에 대해 관심을 가지고 있었고, PWA는 기존에 알고있던 개념이기도 하고 한번 시도는 해보고 싶은데 기회가 없어서 못해봤고, 무엇보다 조은님께서 세션을 쉽고 재미있게 진행해주셔서 기억에 많이 남았다. 그래서 이번 포스팅에선 PWA에 대해서 간단하게 정리를 해보고자 한다. ■ Progressiv..