기본 콘텐츠로 건너뛰기

-0과 +0을 구분 할 수 있을

 0에는 부호가 없다. 수학을 배우면서 0이라는 숫자에 부호를 작성해본 적이 없을 것이다. 게다가 0에 부호가 있는가 없는 가에 수학에서는 어떠한 것도 변하지 않는다.

 그도 그럴 것이 0에 어떤 값을 더하던 원래 값 그대로 반환 될 것이고, 어떤 값을 곱하던지 0 일테니까 말이다.

 실제로는 없겠지만, 자바스크립트에는 0에는 부호가 존재한다.

 console.log로 작석된 대로 0, -0이 확실히 찍혀 있는 것을 알 수 있다. 하지만 !== 연산자로도, 양수가 더 큰 가에 대한 질의에도 그냥 같은 값이다. 결론이 날 수 밖에 없다. 뭐 물론 아래처럼 판단하는 것은 가능하다.
 Object.is는 값을 비교하는 방법 중 하나라고 알아두면 된다. 나중에 자세하게 다룰 일이 있을지는 모르겠다.


 위의 상황이 무엇이 문제가 될까? 일단 수학이라면 모르지만, 우리는 프로그래밍 하는 입장에서 숫자를 0으로 나눌 수 있지만, 그러한 상황은 피하려고 한다. 하지만 그렇게 되면 어떻게 될까 저 음수와 양수의 차이가 수학과 프로그래밍과 차이가 나는 부분이라고 말할 수 있겠다.


let pos = 0
let neg = -0

pos = 1 / pos // Infinity
neg = 1 / neg // -Infinity

console.log(pos > neg) // true

수학에서는 숫자를 0으로 나누는 것이 불가능 한 연산이지만, 자바스크립트에서는 가능하며, 결과 값이 0이 음수냐 양수냐에 따라서 무한과 음수부호의 무한으로 표현이 된다.


 컴퓨터가 부호를 표현하는 방법

 일단 컴퓨터는 0과 1로만 값을 인지 할 수 있고, -라는 기호는 사용하지 않는다. 하지만, 일반적으로 숫자 표현시 최상위 비트(0번째 인덱스)를 부호를 표현하는 값으로 사용 한다. 0이면 양수 1이면 음수.

 일단 위의 근거 만으로도 자바스크립트에 0의 부호가 있는지가 풀린다.

 일단, 4비트로 표현을 하려고 한다.

 0010(2)는 다들 알다시피 양수 2라는 것을 알 수 있을 것이다.

 1010(2)는 최상위 값이 1이면 음수로 사용 하고자 하였으니, -2가 된다.

 0000(2)는 +0, 1000(2)는 -0 이게 되어 0이 양수, 음수 전부 있게 된다.


1의 보수

 하지만 위의 방법만 으로는 뺄셈의 연산이 꽤 불편하다. 우리가 연산을 하고자 해보자.

 0110(2) + 1011(2) = 6 + -3 이렇게 말이다.

 이것을 연산 하려면 일단 부호 지수를 빼고 110(2) - 011(2) 변환 후 진행하면
 1의 보수로 변환하여 더하고 110(2) + 100(2) = [1]010(2) => 010(2) + [1] = 011(2) 발생한 carry[1]를 덧셈한 결과에 더해주어야 한다.


 하지만 음수에 대한 표현이 양수의 반대라고 한다면? 예를 들면 말이다.

 0110(2)의 음수 표현은 1001(2) 이런식 말이다. 더 자세히 설명하자면,

 0110(2) => 부호 부분이 0이니 4(100) + 2(010) + 0(000) 우리가 아는 방식대로 사용 하고.

 1001(2) => 부호 부분이 1이니 4(011) + 2(101) + 0(111) 이처럼 음수일 때는 1과 0을 반대로 보자는 것이다.

 0110(2) + 1100(2) == 6 + -3 이것을 위의 방법으로 다시 계산 해보자.
 0110(2) + 1100(2) = [1] 0010(2) 4비트로 해서 오버플로우가 났다. 6 - 3이 2가 나와버렸다.

 0100(2) + 1001(2) == 4 + -6 이것을 위의 방법으로 다시 계산 해보자. 
 0100(2) + 1001(2) = 1101(2)으로 -2가 정상적으로 구할 수 있는 것을 확인 하였다.

2의 보수

 하지만 위의 방법은 0000(2), 1111(2) => +0과 -0 둘다 존재 하는 것을 좋지 않게 생각 한 사람 도 있지 않을까?

 일단 위의 1의 보수 방법을 취한뒤 1을 더하여 음수로 변경해보자.

 0110(2) => 1001(2) => 1010(2) 이처럼 말이다. 전혀 쌩뚱 맞은 숫자가 나온다.
 하지만 컴퓨터는 저걸 10진수로 읽을 필요 조차 없다. 우리는 그냥 저게 -6이라는 것만 알면 된다. -3은 2의 보수를 이용 하여 구하면  1101(2)이다.

-3: 1101(2), -6: 1010(2)

 이렇게 알고 6 + -3, 4 + -6 을 구해보자.

 0110(2) + 1101(2) = [1] 0011(2) 오버플로우 난 것은 그냥 버리면 된다. 6-3이 3이 되었다.

 0100(2) + 1010(2) = 1110(2) 음수로 나왔다. 4 - 6을 하여 우리는 저 값이 2라는 것을 알지만, 일단 구해보자. 2의 보수를 한번 더 취하면 양수가 나올것이다.

 1110(2) => 0001(2) => 0010(2) :: 음수를 취한 결과가 양수가 나왔으니, 위의 결과는 -2였다는 것을 알 수 있다.


 0000(2)의 0의 음수는 있을까? 2의 보수를 취해보자.

 0000(2) => 1111(2) => [1] 0000(2) 오버플로우 난 것은 제거하게 되니, 0이 된다.

 즉 우리는 이렇게 해서 양수만 있는 0을 가질 수 있게 되었다.


* 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness

댓글

이 블로그의 인기 게시물

아이콘 폰트 (icomoon 사용법)

 장난감 프로젝트를 만들다 보면, 아이콘이 필요한 경우가 있다. 간단하게 아이콘을 인터넷에서 검색하여, 이미지로 넣어두고 이미지 태그를 이용하여, 사용하는 경우가 일반적이였지만...  요즘에는 대부분 폰트를 이용하여 아이콘을 노출 한다. 나 같은 경우에도 기본적으로  https://material.io/resources/icons 를 참고하여 아이콘 폰트를 이용할 수 있도록 처리하고, 추가적으로 필요한 아이콘이고, 일상적으로 사용 되지 않는 아이콘의 경우에는  https://icomoon.io 에서 제작하여, 아이콘 폰트로 이용 하곤 한다.  그래서 이번에는 아이콘  https://icomoon.io 의 사용법을 간단히 공유하고자 한다.   들어가자 마자 위의 icoMoonApp버튼을 누르면 아래와 같은 화면이 나타난다.  icomoon에서 무료로 제공하는 아이콘들이 보이면 위에 파란색으로 표시 되어있는 집 모양 세가지를 선택한 후, 아래의 빨간색으로 표시되어있는 Generate Font를 눌러보자.  그리고 나서 바로 다운로드를 요청해보자. icomoon.zip이 다운로드가 될텐데, 압축을 해제해 보면, 아래의 폴더 및 파일들이 있다. 아래에서 중요한 것은 font 폴더와 style.css이다. demo-files fonts demo.html Read Me.txt selection.json style.css <!doctype html > <html> <head> <link rel ="stylesheet" href ="style.css" ></head> </head> <body> <span class ="icon-home" ></span> <span class ="icon-home2" ></span> <span class ="icon-home3"

javascript 압축 파일 다운로드

이번에는 전 게시글의 응용판? 이라고 해야하나....? 어쨋든! 우리는 각각의 파일들을 다운로드 해보았다. 그런데 생각보다 귀찮음?을 느꼇을 것이다. 파일을 각각 다운 받아야 한다는 현실때문에! 그래 파일 두개야 뭐 그렇다 치지... 하지만, 개발자도 사용자도 게으름뱅이이다. 자 결국, 우리가 해야 하는 것은 파일을 한 번에 둘다! 다운 받는 것이다. 물론, 클릭 한번에 여러개의 함수를 엮어서 다운받게 하면 되지만! 크롬에서 자주 봤듯이, 여러개의 파일을 다운로드를 시도하면 <- 여러개의 파일을 다운로드 합니다. 허용 합니까? 하고 물어보는 것을 볼 수 있다. 게다가 다운로드 한 파일들을 찾기도 귀찮다는 것. 자 해결책을 제시해보자면, https://github.com/Stuk/jszip 클라이언트 단에서 파일을 zip파일로 압축을 할 수가 있다! 필요한 작업은 아래와 같다. 0. 데이터 준비 1. BLOB(binary large object)를 만든다. 2. Blob을 URL.createObjectURL을 사용하여, 해당 binary의 주소를 생성. 3. 다운로드가 필요한 파일들을 Zip 객체에 셋팅! 4. a태그를 이용하여, 해당 url 셋팅 하고, 다운로드. 전 게시물과 별로 달라진게 없네... 자 그럼 샘플! 샘플을 보자! http://embed.plnkr.co/NMprnRxqYG0fkHa2J55D/ var util = {} function fixBinary(bin) { //binary to arrayBuffer var length = bin.length var buf = new ArrayBuffer(length) var arr = new Uint8Array(buf) for (var i = 0; i < length; i++) { arr[i] = bin.charCodeAt(i) } return buf } window.onload = function() {

Chart js와 amchart 비교

Chart js 특징은 위의 그림으로 대체 할 수 있을 듯 하다. 오픈 소스이고, 기본으로 제공하는 차트 종류가 8가지 Canv a s를 이용해서 차트를 그리고, 반응형을 지원한다. amchart amchart는 기본적으로 유료이며, 기본으로 제공하는 차트 종류가 기본적인 차트 + 주식 처럼 보이는 차트 + 지도에 관련된 차트(?) 까지 하면, 기본 제공 하는 종류가 20개 내외 이려나, 일일이 세기에는 양이 좀 많아 보인다. 렌더링은 svg를 통하여 그려지고, 당연 반응형도 지원이 된다. 그러면, 이 둘중에 어떤것이 내 프로젝트에 적합 하냐는 것이 문제이다. 일단, 주식 처럼 보이는 차트나 지도에 관련된 차트(?)가 필요하면, amchart를 선택해야 되는 것은 맞다. 그건 당연한 것이니 빼고 얘기 해보자! 여러 종류의 차트가 필요하다면, 일단은 amchart를 염두해 두는 것이 좋다. 돈 낸 만큼은 하는 듯 하다. 하지만, 기본적인 막대 그래프, 도넛 차트 등, 아주 기본적인 차트들인데, Chart js도 amchart도 그러한 차트가 없을 때가 문제가 된다. 그렇다면, 조금이라도 커스텀이 용이한 것을 찾는 것이 좋을 것이다.  일단 amchart에서 custom이라고 검색 하였을 때, 검색 결과가 61가지가 나온다. 차트의 종류도 많고, 각 차트마다 들어가는 속성이 매우 많기 때문에, 웬만한 내용들은 속성 값을 어떻게 주느냐에 따라서 변경이 가능 하게 된다. 커스텀의 예를 들면, 기본적으로 도넛 파이의 형태를 띄면서, 화살표로 목표를 표시해주는 차트가 필요하다고 생각 해보자. 이것은 amchart로 만든 그래프이고 이것은 chart js로 만든 그래프이다. 모양이 살짝 다르긴 하지만, 완벽하게 똑같이 구현 할 수도 있다. amchart로 만든 그래프의 경우, 저것은 도넛그래프가 아닌 guage 그래프이다. 원래 게이지 그래프는 이와 같은 모약