개발 블로그

[React native] expo로 만들 때 안드로이드 가상화까지 돌려보기 (windows 10) 서문 짧은 직장생활 후에 퇴사하고, 담금질이 필요할 듯 하여 예전에 생각해둔 것들을 만드는 과정 중에 있다. 지금은 스마트폰 어플리케이션을 작업하고 있는데 예전에는 안드로이드 스튜디오로 끄적여봤지만 전 직장에서 쓰던 Vue와 비슷한 VDOM형태의 라이브러리인 React로 Native app 및 iOS와 안드로이드 앱까지 커버할 수 있는 React Native에 관심이 생겨 공부 중이다. 애초에 React를 조금 했었고, 전 회사에서 Vue를 본격적으로 다뤘기 때문에 다시 React를 공부한다는 마음으로 React Native를 하면 되겠다는 마음으로 작업 중이다. 남는게 시간이기도 하고. 아무튼 그 시작이..

작업하다가 웃긴 점을 발견해서 기록해두려 한다. 바로 "data-이름" 이런식으로 특정 element에 커스텀 데이터를 넣고 조회할 때 변경이 있으면 .data함수로 조회하는 건 변경을 감지하지 못하고 .attr("data-이름") 이런 식으로 조회해야지만 변경이 적용된 값을 조회할 수 있다. 코드샌드박스에 예제를 작성해놓았다. 이런식으로 진행해보면 이상하다는 점을 알 수 있다. 첫번째 방법data를 조회하는 버튼과 attr을 조회하는 버튼을 눌러보자. 아래와 같이 둘 다 3이 뜰 것이다. 그리고 data-index를 attr을 통해 1로 바꾸는 버튼을 눌러본 뒤에 다시 아래 두 개의 버튼을 눌러보자. 띠용이다. 특정 element를 .data로 조회하는 함수는 그대로 3을 출력하고 있고 attr로 조회..

[Javascript/자바스크립트] 프론트단에서 클라이언트에 정보 저장하기 (localStorage와 sessionStorage) 백단에서 흔하게 쓰는 쿠키와 세션이 아닌 자바스크립트로 사용하는 방법이 있다. 바로 localStorage와 sessionStorage이다. 브라우저에서 지원하는 API 만큼 각 브라우저에 따라 사양이 조금씩 다른데 일단 지원여부는 전부 확인된다. [출처 : https://developer.mozilla.org/] localStorage와 sessionStorage 모두 호환성에 큰 문제는 없되 각 브라우저에 따라 용량차이를 보인다. [출처 : https://www.html5rocks.com/en/tutorials/offline/quota-research/] localStor..

[JavaScript/자바스크립트] InternetExplore에서 Promise쓰기 자바스크립트 해석기는 브라우저에 귀속돼있다. 그러니까 같은 코드라고 하더라도 IE에서 쓰는 해석기와 Chrome에서 쓰는 해석기가 달라 다르게 실행될 여지가 있다는 말이다. 이것을 크로스 브라우징 이슈라고 하는데 다르게 실행될 여지는 고사하더라도 아예 특정 함수는 Chrome에선 되지만 IE에선 실행조차 되지 않는 경우가 왕왕 있다. 그 중 하나가 바로 비동기처리를 깔끔하게 해주는 Promise이다. 비동기처리는 요즘 웹서비스에 있어서 굉장히 흔하고 자주 일어나는 동작이기 때문에 가히 필수라고 할 수 있다. 그 비동기처리를 위한 코드를 깔끔하게 유지시켜주는 Promise객체를 IE에서는 사용하지 못한다. IE의 자바스크..

[JavaScript/자바스크립트] 1과 0, 혹은 '1'과 '0'을 boolean으로 전환하는 쉬운 방법 지금 여기에 쓰는 예제는 바로 개발자모드의 console창에서 입력해보며 실험해볼 수 있다. 물론 정수형인 0과 1은 별다른 작업 없이 true와 false의 역할을 수행할 수 있다. if(1) console.log("if passed");//if passed if(0) console.log("if passed");//undefined 이런식으로 말이다. 위 코드를 개발자모드 console창에 써보면 오른쪽의 주석과 같은 결과가 출력되는 것을 확인할 수 있다. 하지만 같은 역할을 수행할 수 있다 하더라도 굳이 0과 1이 아닌, boolean으로 표현해야할 때가 있다. 그럴 때 쓰기 좋은 방법이다. ..

크롬 자바스크립트 버그 발견 후 리포트 완료 오늘 작업 도중 크롬에서만 발견되는 이상한 현상이 있어서 리포트를 했다. 예전에 자바스크립트의 버그를 발견한 줄 알고 설쳤던 그때와는 달리 명백하게 크롬에만 있는 버그였다. 무슨 버그인가 하면 크롬에서 자바스크립트로 작동시키는 정규식에 오류가 있다. 라이브로 내 깃허브 스태틱 페이지에서 확인할 수 있는데 이곳을 클릭하면 이동한다. 자세한 내용은 깃허브 페이지에서 확인할 수 있다. 스크린샷을 첨부하자면 이렇다. 같은 케이스임에도 불구하고 명백하게 크롬에서만 오류가 난다. 사파리, 파폭, IE, IE EDGE, 그리고 정규식 테스트 사이트 https://regex101.com/에서도 정상적인 작동이 된다. 그러니까 문제는 아래 정규식let emailRegex = ..

jQuery와 input text value의 함정 글의 요지를 먼저 말하자면, jQuery로 선택자.val();을 했을 때 값이 반환되기 마련인데 input text태그는 실제 텍스트박스에 입력된 값이 value 속성보다 우선순위를 갖는다. 이점을 모르고 혼동했던 경험(오늘 일)을 잊지 않기 위해서 이 글을 남긴다. 일단 테스트 소스코드는 다음과 같다. This is jQuery Test convert to A console.log testinput change attr change attr console.log testinput2 https://jujumilk3.github.io/htmlinputtest/ 이곳에서 실제 실행되는 모습을 확인할 수 있다. 혹은 아래 코드샌드박스를 이용해도 된다. ifr..

규칙없는(Not Iterable) 자바스크립트 객체 순회하기 무작위하게 적혀있는 자바스크립트 객체 안의 모든 값이 필요할 때가 있다. 그럴 때 쓰기 좋은 함수이다. 아래 소스들은 전부 관리자모드의 console창을 켜서 입력하면 바로바로 실행해볼 수 있다. var testObj = { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz", "address": { "street": "Kulas Light", "suite": "Apt. 556", "city": "Gwenborough", "zipcode": "92998-3874", "geo": { "lat": "-37.3159", "lng": "81.1496" } ..

[JavaScript/자바스크립트] 프로토타입(Prototype)에 대한 이해 자바스크립트의 모든 객체는 자신을 생성한 객체 원형에 대한 숨겨진 연결을 갖는다. (__proto__) 이때 자기 자신을 생성하기 위해 사용된 객체원형을 프로토타입이란 한다. 자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장 되었기때문에 이 연결의 끝은 Object 객체의 프로토타입 Object다. function CreatePrototype(){}; let createObj = new CreatePrototype(); console.log(createObj); 당장에 위의 코드를 브라우저 콘솔창에 치면 __proto__의 constructor안에 해당 변수에 할당된 Prototype의 원형인 funct..

[JavaScript/자바스크립트] 숫자 천 단위마다 콤마 찍는 내장 함수(toLocaleString) 나는 예전에 이런 글을 쓴 적이 있다. [JavaScript/자바스크립트] 숫자 천 단위마다 콤마 찍는 함수 정규식을 통해서 3자리마다 콤마를 찍고 반환하는 아주 간단한 함수인데 얼마 전에 다른 입출력값이 필요했다. 그러니까 위 게시물에 있는 함수인 function numberFormat(inputNumber) { return inputNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } 은 소수자리까지도 콤마처리해버려서 쓰기 곤란했다. 그래서 더 찾아보니 자바스크립트 안에는 위 함수를 대체할만 한 아주 훌륭한 함수가 있었다. 바로 제목에도 써있는 t..