☕️ JAVASCRIPT

HTML Entities 치환 라이브러리, html-entities

크로스 사이트 스크립팅(Cross Site Scripting, XSS)을 방지하기 위해 대부분 요청/응답 본문의 HTML Entities를 escape합니다. 이 때, 사용자에게 노출되는 데이터는 unescape된 데이터이어야 사용자가 입력한 그대로 보여질 것입니다. 어떤 방식이 주로 사용되는지는 모르지만, 제 경험상으로는 백엔드에서 HTML Entities를 escape 하고 프론트엔드에서 unescape 했기 때문에 위 방식으로 예를 들도록 하겠습니다. HTML Entities란? HTML에 미리 예약된 몇몇 문자를 의미하며, HTML에서 해당 문자를 사용하면 웹 브라우저는 그 문자를 다른 문자와는 다른 의미로 해석합니다. 대표적인 예로는 각각 를 의미하는 가 있습니다. 만약 아래와 같은 텍스..

도로명주소 API 연동하기

솔직히... 소스나 연동 방법이 매우 쉬운편이라 포스팅할만한 내용은 아니지만 지금 딱히 쓸게 없어서 써본다. 1. 도로명주소 개발자센터 접속 - 아래 링크를 통해 도로명주소 개발자센터에 접속한다. (https://www.juso.go.kr/addrlink/devAddrLinkRequestGuide.do?menu=roadApi) - 팝업 API와 검색 API가 있는데, 이번 포스팅에서는 더 간단한 팝업 API를 연동할 것이다. 팝업 API : 사용자 페이지에서 도로명주소 API에서 제공하는 팝업 화면을 오픈해 주소 검색 이후 선택한 주소 데이터를 반환받는 방식. 검색 API : 사용자 페이지에서 주소 검색을 위한 UI를 직접 구현할 때 사용하며, 검색한 주소 목록 데이터를 받아 개발자가 직접 화면에 출력해..

자바스크립트에서 소수점 계산이 이상하다??

자바스크립트에서 소수점 숫자를 덧셈 계산했을 때, 전혀 생각지도 못한 문제가 발생했다. 0.1 + 0.2 를 수행한 결과가 0.3이 아닌 0.30000000000000004 가 나오는 것이다! 다른 숫자를 더해봐도 결과는 마찬가지였다. 소수점 숫자끼리의 덧셈에서 정확한 값이 반환되지 않는것이다. 믿기지 않는다면 지금 바로 F12를 눌러 개발자도구를 열어 아래 코드를 실행해보자. 1 2 3 4 5 6 var a = 0.1; var b = 0.2; var result = a + b; console.log(result); cs 결과는 본문과 같이 0.30000000000000004 일 것이다. 그래서 이렇게 포스팅을 하게되었다. Javascript는 IEEE 754 를 기반으로 하고있기 때문에 64bit의 소..

[TYPES & GRAMMAR] 챕터 2 : VALUES - Array

Github에 공개되어있는 내용 중 TYPES & GRAMMAR의 챕터 2 : VALUES 의 Array 내용을 개인적으로 번역한 것입니다. 원문 : https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md getify/You-Dont-Know-JS A book series on JavaScript. @YDKJS on twitter. Contribute to getify/You-Dont-Know-JS development by creating an account on GitHub. github.com 챕터 2 : VALUES array, string, number는 어느 프로그램에서건 가장 기초가 되지만, Jav..

[TYPES & GRAMMAR] 챕터 1 : TYPES

Github에 공개되어있는 내용 중 TYPES & GRAMMAR의 챕터 1 : TYPES 를 개인적으로 번역한 것입니다.원문 : https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch1.md챕터 1 : TYPES대부분의 개발자들은 자바스크립트와 같은 동적 언어는 타입을 갖지 않는다고 말할 것이다. 이 주제에 대해 알아보기 위해 ES5.1 명세를 살펴보자. (http://www.ecma-international.org/ecma-262/5.1/) 이 명세 안의 알고리즘은 타입과 연관된 값을 다룬다. 타입의 값들은 아래 목록에 정확히 정의되어있다. 타입들은 ECMA Script language types and specif..

eval() 과 new Function()

eval() 과 new Function()eval()eval 함수는 String 형태의 소스 코드를 매개변수로, 해당 스크립트를 동적으로 실행시킬 수 있다. String 매개변수는 Javascript 파서에 의해 분석되고 실행된다. 하지만, 특별한 경우가 아닌 이상 eval 함수를 사용하지 않고도 동일한 로직을 구현할 수 있기도 하고 보안상의 이유로 사용하지 않는 것을 권장한다. 예시12var property = "안녕!";eval("alert(property)");cs 이렇게만 보면 굳이 eval 함수를 쓰는 이유를 이해할 수 없을 것이다. 그렇다면 아래 예시를 한 번 보자! 예시1234567891011121314151617181920212223242526272829303132function notif..