코드 땜장이

글

7월, 2022의 게시물 표시

팝업이 차단 되었습니다. (회피하기)

우리는 인터넷을 하다보면, 아래의 그림처럼 팝업이 차단되는 경우가 많이 있다. 브라우저가 팝업을 여는 동안 해당 페이지가 사용자를 괴롭히고 있다고 판단 하는 경우에 노출이 된다. 몇몇 분들은 어렸을 적 친구의 피씨에 설치하였던 무한 팝업을 해본 기억이 있을 것이다. 바로 그것을 막는 것이라 보면 된다. 자 그러면 괴롭히고 있다고 판단한 경우라고 하였는데, 그러면 그것이 무엇일까? 사용자 몰래 띄운 팝업 사용자 몰래 팝업을 띄우는 거는 꽤나 많이 볼 수 있다. <!DOCTYPE html > <html> <head> <meta charset ="UTF-8" > <script> window . open ( 'https://www.google.com' , '_blank' ) </script> </head> <body></body> </html> 위의 코드는 아무런 맥락 없이 해당 페이지에 들어가자 팝업을 열게 하는 코드이다. 저런 상황을 팝업을 차단 하지 않게 된다면, 해당 페이지가 새로운 팝업을 여는 페이지를 열고 또 그페이지는 또 새로운 페이지를 여는 페이지를 열고 계속 반복하게 된다면 사용자를 괴롭히는 것이 될 수 있을 것이다. 공공 사이트에서 예전에 공지사항을 노출시키기 위하여 이러한 행위를 많이 했었고 해당 팝업들은 열심히 차단당했다. 즉 우리는 해당 페이지를 열기 위해서 유저의 행위를 받아야 한다. <!DOCTYPE html > <html> <head> <meta charset ="UTF-8" /> <script> function openNewPage () { window . open ( 'https://www.google.c

javscript getter, setter

일반 적으로 자바 C# 등등의 객체지향언어를 이용하여 개발하신 분들이라면 getter, setter는 아주 친숙한 내용일 것이다. 하지만, 자바스크립트에서는 전통적인 방법으로는 private 변수를 지원 하지 않기 때문에 _name 이런식으로 이름만 지어서 내부에서만 사용변수라는 표시만을 하여 내부 데이터이니 읽거나 쓰지 마세요 정도로 사용 하고 있다. 그렇다면 자바스크립트에는 getter, setter가 없을까? 접근자 프로퍼티(accessor property) get, set getter, setter를 이용하는 이유 중에는 데이터를 신뢰하고, 복잡한 로직을 밖으로 노출 하고 싶지 않아서 일 것이다. 간단한 예를 들어보자. const person = {} person . age = - 3 과연 사람 중에 -3 세인경우가 있을까? 뭐 개념적으로 2000년생의 경우 1997에 몇살이었냐고 물어본다면 가능하겟다만.... 이럴 때 사용 가능 한 것이 get, set이다. 간단하게 코드를 변형 해보자. const person = { get age () { return this . _age } , set age (age) { if (age > 0 ) { this . _age = age } } } 위 처럼 우리는 나이에 대해 정합성 체크를 하여 age속성을 사용 할 수 있게 되었다. private 변수처럼 사용 해보기 위 처럼 특정 속성에 대해서 정합성이 필요 한경우 특정 데이터를 위한 모델일 가능성이 높다. Person이 필요 할 때마다 literal object로 매번 정의 하는 것은 꽤나 불편한 내용일 것이다. 이때는 class가 유용 하겠지만 사용하기 애매하다면 function또한 꽤 좋은 대체재라고 말하고 싶다. function Person () { let _age Object . defineProperty ( this, '

new Date() - new Date() (javaScript 형변환)

우리는두 시간의 차이를 구하기 위하여 new Date() - new Date() 와 같이 분명 Date객체를 가지고 두 값의 차이를 구하는 -연산을 수행 하고 있고, 그리고 그것을 또 해주는 것을 볼 수 있다. 우리는 그런 특성을 보면서 형변환 중 묵시적 형변환이 되었구나, 라고 생각하곤 한다. 묵시적이라는 말의 뜻은 이와 같다. 말이나 행동으로 직접 드러내지 않고 남이 모르는 사이에 뜻을 나타내 보임. <출처: Naver Korean-English Dictionary> 직접 드러내지 않고 남이 모르는 사이에 바뀌었다는 것인데, 그렇다면 우리 개발자들에게 드러내지 않고 있는 규칙은 무엇일까? Symbol.toPrimitive 첫번째 규칙이다. obj[Symbol.toPrimitive](hint) 형변환이 필요한 경우 자바스크립트는 해당 객체의 Symbol.toPrimitive의 키를 갖는 함수를 연산을 할 때 필요한 자료형을 요청 하는 것으로 형변환을 수행한다. 자 그러면 형변환이 필요한 경우를 몇개 구성해보자. 첫째로 예제를 들었던 obj1 - obj2 와 같을 것이다. obj1, obj2 두 값과의 차이를 구한다는 것은 숫자일 수 밖에 없을 것이다. 두번째로 alert(obj1) 같이 obj1을 문자열로 표현을 해야 하는 경우가 있을 것이다. 세번째로 "나무" + obj1 , 1 + obj2 와 같이 덧셈 연산이 있을 것이다. 이 때에는 첫번째 연산의 경우 문자열과의 덧셈이기 때문에 obj1이 식혜라는 값이면 "나무식혜"와 같이 문자열로 변환이 필요 하며, 두번째의 경우에는 숫자와의 연산이기 때문에 obj2가 2라면 3과 같이 값이 나와야 할 것 이다. 자 그러면 위의 연산들이 과연 obj[Symbol.toPrimitive] 함수를 호출 할 때 어떤 값을 hint로 제공하는지 확인 해보도록 하자. const obj1 = { [ Symbol . toPrimitive ]: fu

세미콜론 찍을까 말까(ASI)

C-like 언어들은 세미콜론을 찍어줘야 하지만, 자바스크립트는 선택사항이다. 선택사항이다. 선택사항이긴 한데... 무조건 써야 한다는 파와 쓰지않아도 될때는 쓰지 말자라는 파가 있다. 뭐 나또한 써야 할 때만 쓰자는 파이다. 꼭 써야 한다는 파는 자동으로 입력 해주는 것이 개발자 에러코드를 수정해주는 것이지, 쓰지 말라는 것이기 아니기 때문에 써야 한다는 것이다. 나의 경우에는 뭐 에러에 대한 수정이라 생각 하지 않고 언어의 특성이라 생각 한다. ASI를 끌 수 있고, 다른 언어처럼 에러를 발생 시킬 수 있다면 뭐 그또한 나쁘지 않다 생각한다. 쓰지 않아도 되는데 작성했을 때, 아 이건 쓴 이유가 있구나 이 생각도 할 수 있다. 자동으로 작성 되는 규칙 자동으로 작성 되는 규칙 몇가지 예를 들어보겠다. 1 . 두 statement(문장) 라인종결자(엔터)로 구분 된다. 2. 두 statement(문장) 닫는 중괄호('}')로 구분 된다. 3. break, continue, return, throw 등은 라인종결자(엔터)로 구분 된다. 4. 웬만해서는 엔터로 구분되고 예외사항이 있다고 생각하는 것이 좋을 정도로 많은 부분이 자동적으로 입력된다. 이는 대부분의 기본서에서도 언급하는 내용이기도 하다. 괜히 메신저에서 어미에 ;를 붙이는 것이 습관화 된 사람이 많은게 아니다. 자동으로 입력되는 경우 예시 입력된 코드 자동으로 입력된 세미콜록 원래 작성하려고 했던 코드 return 2a + 1; return; 2a + 1; return 2*a + 1; function getObject() { return { // some lines }; } function getObject() { return; { // some lines }; } function getObject() { return { // some lines }; } i ++; i; ++; i++; if (i === 5) // as