규도자 개발 블로그

크롬 자바스크립트 버그 발견 후 리포트 완료 오늘 작업 도중 크롬에서만 발견되는 이상한 현상이 있어서 리포트를 했다. 예전에 자바스크립트의 버그를 발견한 줄 알고 설쳤던 그때와는 달리 명백하게 크롬에만 있는 버그였다. 무슨 버그인가 하면 크롬에서 자바스크립트로 작동시키는 정규식에 오류가 있다. 라이브로 내 깃허브 스태틱 페이지에서 확인할 수 있는데 이곳을 클릭하면 이동한다. 자세한 내용은 깃허브 페이지에서 확인할 수 있다. 스크린샷을 첨부하자면 이렇다. 같은 케이스임에도 불구하고 명백하게 크롬에서만 오류가 난다. 사파리, 파폭, 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..

로또 시뮬레이터, 로또 확률 계산기를 심심해서 만들어봤다. 사실 심심해서라기보단 좋은 꿈을 꿔서 10만원어치의 로또를 사봤는데 5등 하나 돼서 짜증나서 만들었다. 이곳에서 플레이할 수 있다. 이렇게 생겼다. 기본적인 html, js, css에 jQuery, bootstrap을 더하고 댓글시스템인 disqus까지 추가했다. bootstap이 어디들어갔나 했겠지만 룰렛을 돌리다보면 뜨는 이벤트들이 있는데 그 경고창을 추가하기 위해 부트스트랩을 추가하였다. github page를 이용한 것이라 소스는 이 레포지토리를 참고하면 될 것이긴 하지만 즉흥적으로 막 만든 만큼 코드는 다른사람에게 보여줄만큼 깔끔하지가 않다. 거두절미하고 만든 의도는 로또에 대한 경각심을 위해서였지만 실험으로 돌리는 와중에 내가 2등에 ..

JSON을 테스트하는 가장 좋은 방법. POSTMAN과 JSON Placeholder JSON(JavaScript Object Notation). 웹프로그래머라면 뗄레야 뗄 수 없는 만능 자료형이라고 할 수 있다. 가끔씩 파싱 중 골머리를 썩게 하는 거 빼곤 플랫폼 언어 가릴 것 없이 거의 모든 곳에서 통용되어 ajax를 통한 동일 사이트 안에서의 갱신도, restful API를 이용한 데이터 교환에서도 거의 정석이라고 할 수 있을 정도로 고착화돼있다. 자료형이 JSON이 아니면 왜 이렇게 만들었는지 의문이 들 정도로 말이다. 이 JSON을 테스트하기 좋은 방법이 있다. 송신 및 수신 값을 확인할 때는 POSTMAN, 코드 내에서 정형화된 JSON데이터가 필요할 땐 JSON Placeholder. POS..

next.js에서 sass사용하기 react에서 썼던 것처럼 당연히 될 줄 알았는데 이게 웬걸 오류가 뜬다. 해서 찾아보니 방법이 다 있더라. $ npm install --save @zeit/next-sass node-sass //npm $ yarn add @zeit/next-sass node-sass //yarn 그리고 프로젝트 루트디렉토리에 next.config.js를 생성한다. package.json과 같은 위치라고 보면 된다. 그 안에 다음 내용을 입력한다. // next.config.js const withSass = require('@zeit/next-sass'); module.exports = withSass(); sass뿐만 아니라 css도 같이 사용할 거라면 아래와 같이 입력하면 된다. ..

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