규도자 개발 블로그

[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 = ..

[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..

[JavaScript/자바스크립트] 숫자를 만, 억, 조, 경 등 만 단위 한글로 찍기 + 자바스크립트 연산의 한계값 간단한 함수이다. 어떠한 숫자가 주어졌을 때 해당 숫자를 만, 억, 조, 경 등 만 단위 한글로 찍는 자바스크립트 함수이다. 사실 이 함수를 만들기 전에 항상 그래왔듯이 다른 사람들이 만들어놓은 걸 찾아봤지만 만족스러운 것이 없었다. 함수 자체가 30~40줄을 넘어버린다던가 의미를 알 수 없는 부분이 많이 있다던가 혹은 출력이 3억 0305만 0050 이런식으로 중간중간 0에 대한 예외처리가 안돼있다던가... 만족스러운 게 없어서 직접 만들었다. 코드샌드박스에서도 확인할 수 있다. : https://codesandbox.io/s/wopm3v546w ※간단하게 뒤에 '원'만 붙이면 숫자를 ..

react js 시작하기 시작하기에 앞서 일단 시작하기에 앞서 나는 웹 백엔드 개발자이다. 하지만 개인프로젝트를 진행하려는 과정에서 불가피하게 다른 js라이브러리를 사용해야했고 그 과정에서 react js에 흥미가 생겨 검색해보던 찰나 다른 언어나 라이브러리들과는 다르게 react는 시작하려는 사람들에게 친절한 가이드가 좀 모자란 느낌이었다. 그래서 나도 react에 대해 완전 모르는 생초짜인 상태에서 개인 프로젝트에 react js를 적용하며 다른 react를 적용하는 사람들에게 이정표가 되고자 글을 남긴다. 그래서 angular js는 어떻고 vue js는 어떻고 왈가왈부할 생각은 없다. 그렇다면 시작하겠다. 1. node.js 설치 react js를 하려고 했는데 웬 node.js냐 하겠지만 pyt..

function stringNumberToInt(stringNumber){ return parseInt(stringNumber.replace(/,/g , '')); } 실제로 웹 작업이나 서핑을 하다보면 숫자는 보통 100,000,000 이런 식으로 값을 파악하기 쉽게 1,000단위마다 콤마가 찍혀있는 것을 흔하게 접할 수 있다. 만약에 해당 숫자를 계산에 사용할 필요가 있을 때 해당 숫자가 들어있는 태그에 따로 value값으로 순수한 정수값이 지정돼있지 않으면 태그 내의 글자를 그대로 불러와서 연산에 사용하게 된다. 하지만 그렇게 하면 위 숫자는 100000000이라는 값을 가진 정수형으로 취급되는 게 아니라 '100,000,000'이라는 문자열로 취급되어 연산을 수행할 수 없다. (문자열을 붙이는 의..

function numberFormat(inputNumber) { return inputNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } 보이는 그대로 정규식을 이용해 해당 함수로 들어온 숫자를 천 단위마다 콤마를 찍어 리턴해주는 함수이다. 숫자를 다루는 일이 잦은 웹 플랫폼이라면, 어느 페이지에서든 불러오는 정적 js파일에 해당 함수를 추가하여 필요할 때마다 쓰기 유용하다. 대신 소수점에 대한 처리는 안 돼있어 소수를 넣으면 아래와 같이 출력된다. 위의 코드부에 마우스를 올리면 우측 상단에 copy라는 박스가 뜬다. 해당 버튼을 누르면 소스가 복사된다. 물론 드래그와 우클릭도 허용돼있다. 위 사진은 해당 함수가 불러와진 페이지에서(크롬) 콘솔창을 ..