져니의 개발 정원 가꾸기

목차 배경 현재 개발/운영하고 있는 프로젝트에서 특정 버튼을 클릭하면 다른 도메인 서비스의 팝업을 여는 부분이 있었다. 팝업 사용 후 바로 직전의 부모창으로 다시 데이터를 넘겨줄 때 window.opener라는 객체에 접근하여 부모창의 주소 데이터를 참고하도록 되어 있었는데, 이 때 팝업창에서 부모창의 데이터를 가져오지 못해 opener의 데이터들이 undefined혹은 빈 string 으로 되어 값을 넘겨주지 못하는 상황이 발생했다. 원인은 부모창과 팝업창이 다른 도메인 주소를 가지고 있어 window.open()을 하였을 때 CORS문제로 값을 넘겨주지 못했던 것이었다. 해당 CORS 문제는 경고나 익셉션이 뜨지 않고 실제 데이터를 사용할 때 팝업창에서 undefined exception이 났을뿐더러..

여러 방법이 있겠지만 오늘 기록할 방법은 JSON 객체를 이용하는 방법이다. String -> Object JSON.parse(text) 를 사용한다. Object -> String JSON.stringify(object) 를 사용한다. See the Pen String to Object by jihyunPark (@jihyunhillpark) on CodePen. 참고로 html에 오브젝트로 마크업된 속성 값들을 가져와야하는 경우, JSON.parse()를 통해 객체로 변환해줘야 변경 작업을 수행할 수 있다. var styles = document.getElementById('target').attr('style'); // String var styleObjects = JSON.parse(styles)..

js로 숫자를 체크할 수 있는 방법은 다양하다. isNan() 함수나 Number 객체 혹은 정규식을 사용한 패턴매칭 등 다양한 방법으로 숫자를 체크할 수 있다. 그 중에서 IsNan()과 Number객체를 사용하는 방법과 주의사항에 대해 정리해본다. 1. isNaN() javaScript에서 문자열이 숫자인지 체크하기 위한 내장함수이다. 인자가 숫자가 아닐 경우 true, 숫자인 경우 false를 반환한다. 이를 거꾸로 적용하여 !isNan()을 하면 숫자일 경우 true, 아닐 경우 false를 반환하는 방식으로 숫자를 체크하는 방식이다. 그러나 isNaN()함수가 undefined, {}, [], null, '',' ', true, false, [], new Date()에 대해서는 false를 반환..

1. mustache 파일에서 렌더링 된 data 값을 Js 함수의 인자로 넘기기 .mustache 확장자의 파일 내부에서 js 함수를 호출해야 하는 일이 있었다. js 함수 인자로 렌더링된 데이터 값을 주기 위해서는 인자로 넘기는 녀석을 single quotation으로 감싸주면 된다. 예) // calculator.js let data = { 'tokyo' : '31', 'sydney' : '4', 'seoul' : '30' }; // 렌더링 부분 let rendered = Mustache.render(template, data); documnet.getElementById('nation-thermos-template').html(rendered); function getFahrenheit(value..