본문 바로가기

프로그래밍/javascript(ES)

자바스크립트 sleep 함수 다른 언어들에는 sleep함수가 있는데 어째서인지 자바스크립트엔 없습니다. 그 이유는, 자바스크립트가 단일 스레드(한번에 한 작업만 처리)언어이기 때문입니다. 진짜로 자바스크립트에 다른 언어같은 sleep 함수가 생긴다면, sleep하는 시간동안 다른 작업을 전혀 처리하지 못하겠죠. 페이지도 멈추고 때때로는 브라우저가 응답없음이 되기도 합니다.그렇기에 우리는 우리가 원하는대로 작동할 수 있는 sleep 함수를 만들어줄 필요가 있습니다. * 이 글을 읽을때 async function에 대해 알면 더 편합니다. 자바스크립트의 sleep 함수 만들기먼저, 자바스크립트의 비동기 함수(async function)의 await 라는 키워드에서 이용하는 Promise 객체를 만들어주는 함수여야 합니다. 그 Promi.. 더보기
자바스크립트 ES class 자바스크립트 자체에는 Class 가 없다. 대신 prototype을 이용한 클래스 흉내내기가 있는 것이다. prototype은 확실히 다른 객체지향 언어인 JAVA같은 것과는 다르다. 그런데 뻘짓을 하며 찾아보다 보니.. 자바스크립트 class도 존재한다는것을 알게됬다. 정말 자바스크립트 안에 완전하게 있는 건 아니고, ECMAScript라는 자바스크립트 문법 추가버전에서 사용이 가능한 기능이다.(이런거 IE가 반영할 일은 없으니 IE 쓸 생각은 때려치워라.) 자바스크립트 Classclass 클래스명 { 내용 }위와 같이 쓰면 class 생성이 끝난다. ES에는 class 라는 키워드 자체가 추가되어서, 저런식으로 정확하게 "이것이 클래스다" 라고 말해줄 수 있다.그리고 일반적으로 JS에서 만드는 fun.. 더보기
자바스크립트 eval 함수 안녕하세요! 쨈입니다!이번 포스트에서는, 제가 자바스크립트를 한창 처음 접했었을 때 정말 구원자 같았던 eval 함수에 대해 이야기를 하려고 합니다.eval 함수의 사용과 남용에 대해서도 다룰것이니, 천천히 읽어보시면 좋겠습니다. (그냥 제 블로그 사진) 제가 객체({})의 요소들을 하나하나 document 요소들에게 입력해주어야 했을 때의 일입니다. 특정 이벤트가 발생했을 때 그 객체 안에 있는 특정 요소를 딱 집어서 뭔가를 하는게 문제였는데요.그때 제가 자바스크립트 외에 다른 언어도 사실상 거의 사용하지 못하는 수준이었기에, 이해도 제대로 되지 않은 상태었기에 그저 다음과 같은 생각만 했습니다."코드 자체를 동적으로 만들자"이었는데.. 알고보니 그런 상상은 상상만이 아니라 실제 함수로 존재한다는 것을.. 더보기
자바스크립트 비트 연산자 자바스크립트는 모든 것이 다 10진수 단위로 처리되며, 2진수 처리를 보기는 힘듭니다. 사실 저도 2진수 단위에서까지 처리를 하고 계산하는 코드를 별로 짜고 싶어 하지 않을 뿐더러.. 성능 문제가 심각하지 않다면 일반적 숫자 개념만 있어도 충분히 프로그램을 짤 수 있고 하기 때문에 지금까지 영 많이 쓰지는 않았습니다.일단 사용할 이유가 별로 많지 않기 때문이죠. 이렇게 보다보면 JS에 2진수 처리가 있긴 한걸까 생각할만도 한데.. 그렇다고 2진수 처리가 없는 것은 아니랍니다. 생각보다 JS에는 여러가지 비트 연산자들이 있는었습니다. 간단한 논리 비트 연산자부터 비트를 몇칸씩 움직이는 연산자, 그리고 비트들의 값을 뒤집어버리는 연산자도 있답니다. 물론 이런 연산자들이 무한한 2진수에서 계산을 하는 것은 아.. 더보기
자바스크립트 32 비트 정수 구조, 음수 int 자바스크립트에 사용되는 타입들 중에서 우리가 흔히 말하는 '정수'는 number입니다. C와 같은 시스템 계열 언어들은 대부분 값의 범위가 정해져 있고 소수점도 정해져있을 뿐더러 변수 하나를 계속 동적으로 바꾸는 일도 생각보다 힘듭니다. 하지만 JS는 그런 언어들이랑 거리가 멀기에 사실 동적으로 크기도 바뀌고, 소수도 마음대로 넣을 수 있으며 최대 범위도 엄청나게 크기에(최대크기 실험 링크), 사실상 거의 제한이 없다고 보면 되는데요. 하지만 이런 JS도 이 연산을 할때 만큼은 형식이 아주 제한적으로 바뀝니다. 바로 "비트 연산" 이죠. 그럼, 비트 연산에서 사용되는 정수형인 32비트 정수의 구조를 알아봅시다. 32비트 정수 구조먼저 당연하지만 기본 구조는 2진수 형식(2진수는 여기에서)을 띠고 있습니다.. 더보기
자바스크립트 정규식 RegExp 사용법 웹주소인지 판별하기, 특정한 틀 안에 있는지 확인하기 등등.. 여러가지 문자열들을 자바스크립트에서 처리하다 보면, 정규식이라는 기능이 필요하곤 합니다. 특정 상황에 맞는 문자열인지 검사하거나 특정 부분만 추출해내기 위해서 이 정규식처럼 편한 기능이 따로 없기 때문이죠!정규식이 하는 일은, 혼자서는 못 쓰이며 String과 같이 쓰일 시 문자열에서 특정 형식에 맞는 부분이 있는지 검사하거나 정규식에 맞는 문자열의 부분을 추출하는 정도입니다. 또한 일반적인 함수에서 불가능한 것들을 가능하게 만들어 주죠. 예를 들자면, 문자열의 replace 함수에서 포함된 '모든' 문자열들을 바꾼다던지 하는 것이죠. 아니면 HEX 코드가 맞는지 체크할 수도 있구요. 그럼, 이런 정규식들을 어떻게 사용하는지 알아봅시다. 정규.. 더보기
자바스크립트 Infinity 바로 앞의 크기 구하기 자바스크립트에는 숫자 형식의 값에 한계가 있습니다. 그 한계를 넘어서 더 값을 많이 저장하려고 할 경우에는 값이 변형되거나 손실 또는 Infinity로 취급되어 버리는데요. (Infinity로 취급될 경우에는 값을 완전히 잃어버리는 것이죠. 값의 한계에 대해서는 여기) 그래서 제가 궁금증이 하나 생겼습니다. Infinity로 취급되기 '바로 전' 한계의 값은 몇일까 이죠. 사실 저기 위에 링크를 걸어둔 글에 들어가 보면, Number.MAX_VALUE라는 최대값을 나타내주는 상수가 있습니다. 하지만 이 값은 e가 붙었고, JS에서 정한 최대 안전값을 넘었기에 값이 변형되거나 했을 수 있기에 정확하지 못하다는 판단이 들어, 직접 프로그램을 간단히 짜 보았습니다. Infinity 바로 앞의 수 구하기 123.. 더보기
자바스크립트 Number.MAX_SAFE_INTEGER Number.MAX_VALUE 자바스크립트는 아주 편리한 언어입니다. 복잡한 실제 프로그램이 아닌 '비교적' 단순한 웹을 위해 만들어졌기에 빠르고 편리하게 이용할수 있습니다. 하지만 이렇게 편리하다는 장점 뒤에는 약간의 단점이 숨어 있는데요. 바로 '정확성'이 떨어지는 상당히 치명적인 단점입니다. 이중 가장 대표적인 것을 소개하자면, 너무나 큰 수가 들어오면 그냥 Infinity가 되버리곤 하는 것입니다.그래서 자바스크립트에는 수의 최대 한도 이상으로 값을 저장해 값이 손실되는 것을 방지하기 위해서 두가지의 상수가 존재하는데요. 첫번째는 MAX_SAFE_INTEGER이고, 두번째로는 MAX_VALUE가 있습니다. 둘이 어떤 차이점이 있고 어떻게 사용해야 하는지 알아봅시다. Number.MAX_SAFE_INTEGER MAX_SAFE_I.. 더보기

티스토리툴바