코드 땜장이

글

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

우리는 인터넷을 하다보면, 아래의 그림처럼 팝업이 차단되는 경우가 많이 있다. 브라우저가 팝업을 여는 동안 해당 페이지가 사용자를 괴롭히고 있다고 판단 하는 경우에 노출이 된다. 몇몇 분들은 어렸을 적 친구의 피씨에 설치하였던 무한 팝업을 해본 기억이 있을 것이다. 바로 그것을 막는 것이라 보면 된다. 자 그러면 괴롭히고 있다고 판단한 경우라고 하였는데, 그러면 그것이 무엇일까? 사용자 몰래 띄운 팝업 사용자 몰래 팝업을 띄우는 거는 꽤나 많이 볼 수 있다. <!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 _a...

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로 제공하는지 확인 해보...

세미콜론 찍을까 말까(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...

웹에 제스처 적용해보기 ( hammerjs )

스마트폰이 나오고 나서 모바일에서 사용하는 유저의 액션은 엄청 늘어나기 시작했다. 간단하게 마우스 클릭과 유사한 탭 부터 마우스 휠에 대응 되는 핀치, 스프레드, 터치가능한 디바이스에서만 가능한 투탭(두손가락으로 터치) 이상의 행위들... 우리는 사용자의 경험에 맞게 개발을 하여야 한다. 무슨말이냐 하면, 모바일기기에 휠이 없다고 해서 확대해 가면서 보아야 하는 컨텐츠를 마우스를 무조건 연결하여 보아야 하는 것은 말이 안된다는 뜻이다. Hammerjs 여기서 우리의 개발을 편하게 만들어 줄 수 있는 라이브러리가 있다. Hammerjs가 지원하는 제스처는 아래와 같습니다. Tap : 클릭과 같습니다. Press : 일정시간 이상 같은곳을 누르고 있습니다. Pan : 포인터가 특정위치를 클릭후 한 방향으로 이동시 발생 합니다. Swipe : 포인터가 특정위치를 클릭후 한 방향으로 특정시간 정도 특정거리 이상 이동시 발생합니다. Pinch : 두개 이상의 포인터가 특정방향에서 멀어지거나 가까워질때 발생 합니다. Rotate : 두개 이상의 포인터가 원을 그리게 되면 발생합니다. 위에서 보면 pinch와 rotate의 경우에는 두개이상의 포인터가 필요하여 마우스 만으로는 불가능한 액션이지만, 나머지는 하나의 포인터만으로 가능한 제스처이기에 충분히 마우스만으로 구현이 가능한다. 사용해보기 모바일과 PC에서 같이 사용해볼수 있는 Swipe 제스처를 사용해 보도록하자. 위 처럼 간단하게 스와이프 제스처를 추가해볼 수 있다. 이것저것 사용해보면 트렌디한 웹사이트를 만드는데에 꽤나 도움이 될 것 이다.

css 트릭2 (작은 글자)

폰트의 크기는 사용자에게 꽤나 중요한 정보이다. 읽는 순서에도 영향을 끼칠정도이니까 말이다. 이런 이미지를 본적 있나? 솔직히 나는 폰트 크기순으로 읽혔다. 그래서 이 포스팅을 쓰는거기도 하다. 작은 폰트로 글써보기. <div style =" font-size : 14 px" > font-size: 14px </div> <div style =" font-size : 13 px" > font-size: 13px </div> <div style =" font-size : 12 px" > font-size: 12px </div> <div style =" font-size : 11 px" > font-size: 11px </div> <div style =" font-size : 10 px" > font-size: 10px </div> <div style =" font-size : 9 px" > font-size: 9px </div> <div style =" font-size : 8 px" > font-size: 8px </div> <div style =" font-size : 7 px" > font-size: 7px </div> <div style =" font-size : 6 px" > font-size: 6px </div> <div style =" font-size : 5 px" > font-size: 5px </div> <div style =" font-size : 4 px" > font-size: 4px </div> 간단하게 ...

css 트릭1 (정사각형)

일단 이걸 css 트릭이라고 부르긴 하지만, 뭐 거창할 거 없이 팁정도의 내용이다. 일반적으로 기본서에는 잘 나오지 않는 내용을 다룰 예정이다. 정사각형 만들기 정사각형 만들기가 뭐 그리어렵다고, 글을 작성하는가? 라고 말할 수 있다. 당연하게도 맞는 말이다. <div style =" width : 200 px ; height : 200 px ; background : green" > 200*200 </div> 당연하게도 위처럼 하면 200*200의 정사각형이 된다. 만들어야 할 정사각형의 크기를 안다면 위처럼 지정 해줄 수 있다. 하지만, 부모 너비에 비례하는 정사각형을 만들려고 해보자. 예를 들어 부모의 너비의 10%하는 정사각형 말이다. <div style =" width : 10 % ; height : 10 % ; background : green" > 200*200 </div> 간단하게 작성해보았다. 하지만, 우리가 원했던 정사각형의 모양은 아니다. 아쉽게도 위의 코드는 부모(컨테이닝 블록)의 너비 10%, 높이 길이 10%이기 때문에 너비에 해당하는 정사각형을 이루기에는 어렵다. 비율지정 우리는 길이를 넣을 수 있는 속성의 값에 백분률도 넣기도 한다. 그런데 그 백분률이 무엇에 대한 백분률인지는 문서를 확인해보지 않으면 알 수 없다. 그래도 추정 할 수 있는 것은 width은 부모의 width를 height는 부모의 height를 따라가겠지 정도이다. 아래는 어떤 속성이 부모의 width, height따라 가는지에 대한 표이다. 부모의 width : width, left, right, padding, margin 부모의 heigh : height, top, bottom 자 위의 설명 대로면, padding이나 margin의 경우 padding-top, m...

state of css 2022 (리뷰)

최근에 GoogleIO의 섹션중에 state of css 2022가 있었는데, 꽤나 재미있는 속성의 추가가 있어서 소개하고자 한다. 전부 새로운 내용은 아니고 몇몇 브라우저들이 지원하고 있던 내용도 있기는 하니 참고 바란다. Colorv1 Fonts 해당 폰트는 새로운 형태의 폰트이다. 특징으로는 당연히 폰트이니 벡터일테고, 색상 변화에 초점을 맞춘 폰트인 듯 한다. 제공되는 내용은 색상 혼합 및 그라디언트이다. 이 내용이 반겨지는 것은 이제 아이콘폰트에서 투톤을 지원하기 위하여 이미지 파일을 사용하지 않아도 된다는 것이다. 한때 투톤 아이콘이 유행처럼 퍼졌던것을 기억하는가? < https://fonts.google.com/icons?selected=Material+Icons&icon.style=Two+tone > 위와 같이 색상을 두개를 표현하는 아이콘인데, 위처럼 이용하기위해서는 저 아이콘이 폰트가아닌 이미지로 불러와야 했다. svg도 이미지로 본다. 하지만 사이즈 변경이나 색상변경이 일반적인 폰트와 같은 형태가 아니기 때문에 다른 폰트들과 달라 꽤나 불편함이 있었다. 하지만 이번에 colorv1 fonts를 지원하게 되면 아이콘 폰트에 투톤을 적용하기가 더 수월하지 않을까 생각한다. 샘플은 아래에 있다. https://developer.chrome.com/blog/colrv1-fonts/ inert 일반적으로 우리는 alert함수 처럼 모달(해당 화면의 동작을 완료 하기 전에는 다른 화면으로 갈수 없는 팝업 형태)을 지원하기 위하여, 어떤 팝업을 열게 되면 뒤에 배경을 깔아서 해당 팝업 이외의 컨텐츠에 클릭을 할 수 없도록 지원하였다. < https://www.w3schools.com/howto/howto_css_delete_modal.asp > 위와 같이 말이다. 위의 방식은 백그라운드의 크기를 지정 하는 것부터 문제가 된다. 언제나 항상 html을 꽉...

크롬 확장프로그램 만들어보기

이번에 내가 만들어둔 크롬확장프로그램이 내려갔다... 위반사항이 있는 것을 고지해주었지만 메일을 읽는 습관이 안되어있어서 뭐 그럴수 있지 참고로 받은 위반사항은 Purple Potassium 라는 위반사항인데... 과도한 권한?? 문제라고 한다. tabs라는 권한을 요청했는데 사용하지 않았다라는 이유로 내려갔다고 한다. 뭐 리뉴얼 하려고 했던것이라 딱히 내려가도 상관 없는 앱이기는 했지만 말이다. 어쨋든 다시 만들기 전에 잠깐 살펴보는 용도로 샘플앱을 만들어보려고 한다. 일단 menifest version3에 맞춰서 만들려고 하니 참고 바란다. menifest 생성 위처럼 menifest.json 파일을 만들고 위와 같이 타이핑 해보자 { "name" : "hello extension" , "description" : "just say hello" , "version" : "1.0" , "manifest_version" : 3 } chrome://extensions 을 들어가서 "압축해제된 확장 프로그램을 로드합니다."를 선택 후 해당 폴더를 선택하면 크롬확장프로그램 설치가 완료된다. 하지만 아무것도 한것이 없기 때문에 아무것도 없다..... action 추가. menifest.json을 아래와 같이 나는 이때 아이콘도 같이 포함시켜주었으니 참고 하자. 아이콘 쓸만한 것이 없다면 default_icon은 제거해도 된다. { "name" : "hello extension" , "description" : "just say hello" , "version" : "1.0" , "manifest_version" : 3 , "action" : { ...

Intelij plugin 만들기

최근에 주변에 보면 주변 개발자들은 VSCode 혹은 JetBrain사의 IDE 두가지의 IDE를 많이 쓰는 것으로 보인다. 두가지 IDE 모두 plugin을 지원을 한다. 꽤나 많은 plugin들이 있지만, 나만 쓰는 혹은 우리회사만 쓰는 규칙에 딱 맞는 플러그인을 찾기에는 힘들 때가 있다. 그렇다면 플러그인을 직접 제작하면 어떨까? 해서 작성해본다. 개인적으로 WebStrom을 주 IDE로 쓰고 있다. 프로젝트 생성 나는 WebStrom 플러그인을 제작하고자 하기 때문에 IntelliJ Community버전을 설치했다. 또한 java11이상이 필요하여 OpenJDK 17.0.3을 설치하여 제작을 하였다. 프로젝트 생성은 매우 간단하다. 그저 새로운 프로젝트를 생성하면서 IDE Plugin을 클릭만 해주면 적절하게 작성을 다 해준다. 프로젝트를 만들게 되면 가장 먼저 살펴보면 좋을만한 내용은 META-INF/plugin.xml 파일이다.  <idea-plugin>  <id> com.example.demo </id>  <name> Demo </name> <!-- 플...